Skip to content

Latest commit

 

History

History
executable file
·
202 lines (177 loc) · 7.17 KB

README.md

File metadata and controls

executable file
·
202 lines (177 loc) · 7.17 KB
Raw

Slide

Fast, simple and secure messaging between users. Start a conversation with any user on the platform, add them as a friend, and get notified of incoming messages.




⚡ Preview

Mobile

Desktop

🎯 Features

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

Client

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.

Server

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.

DevOps

Tech What for
Vercel Host the client.
Heroku Server hosting & SSL certificate.
Babel Compile newer versions of JS to vanilla JS.

💡 Inspiration

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.

🚀 Learning Objectives

  • GraphQL mutations.
  • Master GraphQL.
  • Integrate a minimal modern conventional UI.
  • Advanced data fetching & caching with URQL.

📜 License

License

☕ Contact me