- Send messages to any user on the platform.
- Local email authentication via email & password.
- Update your profile name and picture.
- Default gradient display picture upon sign-up.
- Image uploads and hosting through ImgBB's API.
- Friend/unfriend other users.
- Receive live notifications of incoming messages.
- Delete/archive unwanted messages.
- Sort conversations by date, name or unread.
- Sort friends by date or name.
- Interactive inbox-like UI.
| Tech | What for |
|---|---|
| React | Build a component-based user interface. |
| Next.js | Server-side rendering (SSR) of React components. |
| URQL | GraphQL Client for data fetching, caching. |
| GraphQL | Query language to describe how to interact with the API. |
| Websockets | GraphQL live subscriptions for real-time messaging. |
| React Hook Form | Form state management and validation. |
| React Dropzone | Upload image files. |
| Dnd Kit | Drag & Drop tookit. |
| Moment.js | Parse & display dates. |
| Chakra UI | Quickly build beautiful UI components. |
| Tech | What for |
|---|---|
| Node.js | JavaScript runtime environment. |
| Express | Design & build the API. |
| GraphQL | Design & model the application entities. |
| PostgreSQL | SQL database. |
| Redis | Store session data in memory for lightning-fast queries. |
| Sequelize | Interact with the database. |
| Apollo Server Express | Create a GraphQL server with Express.js. |
| GOT | Fetch data with promise-based HTTP requests. |
| GraphQL API | HTTP API architecture. |
| Tech | What for |
|---|---|
| Vercel | Host the client. |
| Heroku | Server hosting & SSL certificate. |
| Babel | Compile newer versions of JS to vanilla JS. |
The next intriguing step in my path to GraphQL mastery was GraphQL subscriptions. An instant messaging application was the perfect project to put GraphQL subscriptions to practice. Most social media applications have some sort of messaging system to allow users to interact with each other, so the ability to build one from the ground up seemed like a riveting challenge to me.
- GraphQL mutations.
- Master GraphQL.
- Integrate a minimal modern conventional UI.
- Advanced data fetching & caching with URQL.