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.

Thinking

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

Demo

You can visit the live app here

Features

• 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!

Tech Stack

• Backend: NodeJS, Express
• Frontend: Angular, Ionic
• Database: Postgres using Railway.app
• API: GraphQL using Hasura
• DevOps: Docker
• Deployment: Fly.io, Firebase

Development

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:

Tables

Relationships

Permissions

Backend

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.

Frontend

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.

PWA

This is also a PWA (Progressive Web App) which can be installed on any device that supports it.

Learnings

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

Future Improvements

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

Source Code

This project is open source and can be found on GitHub here:

Support Me

If you like what I do, you can support me by clicking here