Building an Anonymous Chat App using Hasura & GraphQL - Secretly
Hello Folks, today I am sharing the new small application I built for the Hasura x Hashnode Hackathon.
Secretly is a completely anonymous chatting platform to chat with your friends without revealing your identity. Sounds fun, right, let's dive into it.
This idea has been inspired by the lack of a proper anonymous messaging platform where we can only allow people to chat with us in our own friends/followers circle and connect with them anonymously. Secretly is aimed at solving this very problem.
Let's look at the application before proceeding
You can visit the live app here
- Create a unique Chat Link for every session
- Share chat link to chat with friends anonymously
- No Chat History is retained if the user ends the session
- Complete anonymity makes it fun
- Funny random usernames
- One-click to get started!
- Backend: NodeJS, Express
- Frontend: Angular, Ionic
- Database: Postgres using Railway.app
- API: GraphQL using Hasura
- DevOps: Docker
- Deployment: Fly.io, Firebase
So, I used the above tech stack to build and deploy this project. I will now walk through the basic steps I took.
First of all, I set up my database structure and Hasura configuration.
Database & Hasura
I created 3 tables users, chats, messages and setted up foreign key relationships between them like below:
I then spun up an Express server using NodeJS with only one API exposed to create a user session and send a unique JWT token.
This token will be stored by the frontend in the local storage and will be used for subsequent requests and will be validated at the Hasura end as well.
Then on the frontend, I have used GraphQL subscriptions using Hasura API with Apollo Client for Angular for real-time updates of Chats & Messages.
Users can then chat from the chat screen and one can end the session by clicking Logout to clear all chats and messages, all records from the table will be deleted as well.
This is also a PWA (Progressive Web App) which can be installed on any device that supports it.
There are many things I learned while building and deploying the project. Here are few:
- Creating GraphQL APIs of a relational database using Hasura
- Configuring Hasura for Permissions, Authentication
- Building a Responsive web app using Ionic and Angular
- Consuming GraphQL APIs on the client-side using libraries like Apollo
- Building Progressive Web App
There are many many improvements that can be done to make this better such as
- Improve performance of chatting
- User profile customization
- Improved PWA configuration & push notifications
- End individual chats rather than the complete session
This project is open source and can be found on GitHub here:
If you like what I do, you can support me by clicking here