Launching: kahaani

Namaste 🙏 and welcome to all of you😄

Today, i am going to launch my new app kahaani (story) which i had made for the hackathon organised by Grafbase and Hashnode.

Website link: https://mykahaani.vercel.app

Github links:

1. Frontend: https://github.com/Vikas-Maur/kahaani

2. Backend: https://github.com/Vikas-Maur/kahaani-backend

Demo video:

Introduction

Kahaani is a hindi word which means "story" in english. And as the name suggests, the app is focussed on documenting people's stories or their journey by basically giving them their personal online diary.

Features

The user can fill their diaries through posts which are called stories. Based on that, the app has following features.

1. CRUD: users can create, read, update and delete stories.

2. Authentication: users are allowed to access their own diaries only (or their own created posts).

3. Grouping memories: users can tag their stories and hence group them based on their particular day's feeling (very sad, sad, neutral, happy, very happy).

4. Storing moments: users can store images in their stories as well for nostalgia in the future.

Technologies used

I used the following technologies to achieve the above:

1. NextJs (coz as of now i love it the most).

2. TailwindCSS (man! I just hav forgotten to write CSS)

3. NextAuth (for authentication): spotify, discord and github providers used.

4. Grafbase for schema, query and mutations (used typescript sdk for more points 😎)

5. Grafbase Auth

6. Grafbase Database

7. Cloudinary (for image upload)

the STORY?

Sooooooo, the story behind kahaani goes back to me being unable to sleep at nights due to infinite thoughts which flow in this universe.

I am just talking to myself, thinking about various stuff, telling myself the stories which occurred with me only, imagining "What If?" etc etc.

And a lot times, i had wished for an app/website where i can write those stories of mine, and document them forever.

Something which is less than a full fledged blog, a simple yet a powerful app.

And after I heard about this grafbase hackathon, i thought it is the best time to do such a thing.

the STORY actually started thousands of years ago...

I love to listen podcasts and had listened stories of hundreds of smart ppl.

And having heard them, i got to know that great Indian geniuses like Chanakya (one the greatest strategiest, financial guy, kingmaker etc etc, a full fledged polymath) actually promoted documenting your journey and felt that it's a very important thing to be done by everyone.

And this knowledge only backed me up with my decision to create such an app.

Coz hey! Obv the next generations could only learn about your life, from your life if you had properly documented it. And hey! Its just a very funn thing to do, to talk.

And hence all this gave birth to kahaani.

the WHY?

In this section, I'll talk why i made certain decisions while making the app.

1. I used Nextjs and tailwindcss coz I thought it would be very easy for me to build frontend on it.

2. I know that i could have used grafbase in Nextjs only, but I chose to keep them different as I thought that it would be much more cleaner and again, easier to do so.

3. I used NextAuth for authentication as grafbase has a guide on it and i easily learnt it. https://grafbase.com/guides/how-to-use-nextauthjs-as-your-jwt-provider-with-grafbase

4. I chose cloudinary as it was free and easy to use and gave me a simple widget to perform my tasks.

So, overall my decisions were based on how can i make a quality website in the least amount of time possible.

the WHY? ( Features edition )

Now, I'll tell y I added some features to a very basic diary writing app.

1. I chose to allow grouping stories, so that users, in future, can smile at their happy stories, laugh at their sad ones and even value their neutral days. So, they can reflect on "How far they have come?"

2. I chose to allow uploading images and store certain moments again so that users can just reflect, laugh, smile looking at those memories they have gathered.

grafbase: THE FRIEND

In all these, grafbase helped me with creating the core functionality of the app that is to create, read, store, filter, update and delete stories.

Grafbase helped me with the database stuff and the CRUD operations using graphql.

Also along with that, grafbase integrated authentication from NextAuth very easily so that user can only access his/her documents.

It was my first experience with Graphql as I have never used it before. So, it took me some time to figure graphql out.

And grafbase, as a friend, made my journey a lot more easier.

the CHALLENGES

As always, life is full of challenges and no matter how hard or smart you become to make it easy, it will still remain fullllll of challenges.

So, here are the challenge i faced while making this application:

1. I actually started with using Auth0 instead of NextAuth. And after tonnes of debugging for approx. 2 days I just decided to change the platform. The last error i remeber was asking me for some organisation parameter to be added in env variables. And i didn't know anything about that and on Auth0 dashboard i saw that the organisation feature was paid. And hence i decided to break up and move on.

2. Making UI was a very challenging thing for me as I am bad with designes and those kind of creative stuffs.

3. Production is always full of errors and never a first time job. And yepp, i did a lot of mistakes like not including variable in dependency list etc etc, the error which showed when i was literally at the DEPLOY stage in my head. Also, due to keys, secrets for dev and prov, those got mixed and it took me time to make them work again.

4. I didn't know the base, the Graphql and it took me time to learn about it.

the LEARNINGS

Majorly from this project, I learned about Graphql and how it functions. Also the role of grafbase and how it helped me to manage my Graphql queries, mutations and databases along with authentication.

And also, learnt a lot about authentication as well due to Auth0 not working and then shifting to NextAuth from that.

the END

I got to learn a lot from this project and added Graphql to my skills due to this project.

Fun fact: I just realised it very much later that, Mann! I have used npm for backend and yarn for frontend. Damn! Idk if that's right or wrong, but i created an inconsistency unknowingly 😂.

Thank you for reading the article and do checkout kahaani . I would love to hear from you guys, your perspective, things which could be improved, what i did right, what i did wrong, your thoughts

And yepp, your stories.