Memora : Treasure memories

Aashish Vichare ✨

Fullstack Engineer
Flutter Developer
In the digital age, memories are fleeting. We capture moments, only to forget them amidst the deluge of daily content. Enter "Memora" — an app designed to treasure and revisit cherished memories. Imagine creating a digital time capsule: sealing a precious memory today and scheduling it to resurface in the future. But Memora isn't just for solo reminiscing. Its unique "group capsule" feature allows shared memories to be unlocked jointly, ensuring moments are relived in unison with loved ones. From intimate anniversaries to milestone celebrations, Memora transforms the way we reminisce, making every memory a treasure waiting to be rediscovered. Leveraging Grafbase's robust capabilities, I've crafted the prototype of Memora. But this is just the beginning. The horizon promises more features, refinements, and enhancements, ensuring that Memora continues to evolve and resonate even more deeply with its users.

Demo :

Watch on YouTube
In the demo, you can see the basic flow
A user initiates by crafting a Capsule, supplementing it with a caption and choosing from a range of media options: audio, video, or image. They can further personalize the experience by adding members who are granted access to view this capsule. Additionally, a location constraint can be set, requiring users to be within a 50km radius of the designated spot to access the capsule. The cherry on top? Users can schedule a specific time for the Capsule's grand unveiling.
If the designated time for the capsule hasn't arrived, it remains locked and inaccessible. Additionally, even if the time is right but you're not at the specified location set during its creation, the capsule will remain sealed.
Upon the scheduled moment of revelation, the capsule's content becomes visible on the user's feed. If other members were linked to that particular capsule, they, too, are treated to this memory on their respective feeds.
I'm thrilled to take you behind the scenes of how Memora is been built.

Grafbase Setup

Grafbase allows developers to deploy Graphql APIs faster. Grafbase isn't just a platform; it's a powerhouse of potential. Whether it's integrating diverse data sources through resolvers and connectors, finetuning edge caching, establishing authentication and permission protocols, or enabling serverless search, Grafbase has it all covered.
But the magic doesn't stop there. With the Grafbase CLI, you're granted the freedom to operate locally, ensuring that development is a breeze. Moreover, every Git branch comes equipped with its own exclusive preview deployment. This not only simplifies testing but also fosters seamless collaboration, ensuring that your project's progression is both smooth and efficient.
Grafbase makes it super easy to add authentication. For Supabase , I simply add the Supabase project URL and JWT secret which you can get from your Supabase project setting (Settings->API->JWT settings).
Grafbase automatically creates all queries and mutations required to perform CRUD operations on Models. Another amazing thing about Grafbase is you can spin up your api locally and test it before deploying.

Flutter with Grafbase

To begin with, let's look at the implementation of creating a user in the Grafbase default database. I am using Flutter as my client. To create a User as declared using the User model in the Grafbase config, we need to do a few setup steps.
Get Grafbase URL and Key: If you want to test it locally simply copy and paste the local URL that printed out in the console when you run npx grafbase dev
Install dotenv and http package for Flutter.
Note that you need to pass the x-api-key in the header. In the body pass "query" which will be your Graphql query string and also the variables that you need to pass as input to the query. I am passing the Authorization header because I need it for certain resolvers.
Similarly, you can call any query or mutation created on Grafbase.

Custom mutation with Resolvers

All the resolvers for grafbase have to be under grafbase/resolvers folder.
Grafbase makes it super easy to add your custom logic by adding resolvers. For Memora , I plan to extend it and send users email notifications as the capsule availability date comes closer. For this, I want a one-time cron job. With Grafbase it's super easy to test this locally which makes it so much better. Let's see how.
The resolver field points to the file that has the resolver handler.

Cron job scheduling with Grafbase

I am going to use cron-job-org for my cron jobs. It allows us to add headers and body to our cron job and also mention the expiry date for our cron jobs so that it runs only once. That is exactly what we need. You can read more about it here.
In short, we schedule a cron job at the exact time the capsule is scheduled by the user. The cron job is fired at that time in the future and sends the user the email notification we need. The cron's expiry date will be one hour after its scheduled time so that it runs only once and then gracefully retires.
Note that we need to consider the user's timezone so that the cron job is fired at the right time.
It converts the cron expression into CronObj which we have declared at the start of the file.
The same way you can write custom resolvers and add your logic, connect your data and connect to other APIs and tools through Grafbase.

Grafbase Insights

This section aims to highlight important nuances while working with Grafbase.
Branch-Specific Credentials: Each branch in Grafbase possesses its own unique API key and URL. If you switch between branches, ensure that you update both the API key and URL accordingly. Failing to do so will result in an "Unauthorized Error". On the project dashboard, the "Connect" button displays your main branch's URL and key. To determine the key for alternative branches, simply navigate to the desired branch and initiate the Pathfinder. The headers will reveal the associated key.
Cloudflare Glitches: Experiencing Cloudflare-related issues when operating Grafbase dev? A straightforward solution is to upgrade your Grafbase CLI to version 0.31.0 or later.
Attribute Ordering Restrictions: As of the current date (15th August 2023), sorting is exclusively available based on the "createdAt" attribute of your models. However, rest assured, the dedicated Grafbase team is actively working to enhance this feature.
Environmental Variable Constraints: Any environmental variable prefixed with GRAFBASE_ is not permissible.
Environmental Variables After Deployment: When uploading your project, don't forget to refresh the environment variables in Grafbase's project settings. Note that the .env file is solely functional when launching a local Grafbase API server.

Memora's Blueprint

The comprehensive codebase for Memora, along with its intertwined Grafbase configurations, is readily available for your perusal. While this article has been curated to spotlight the most crucial and beneficial aspects to aid developers in their journey with Grafbase, a deeper dive into the complete code offers an expansive understanding of the project's intricacies.
Partner With Aashish
View Services

More Projects by Aashish