LesChat! | Real-time messenger | PERN-GraphQL

Real-time chat app made with PERN + GraphQL - features private, global & group messaging

Demo

Deployed on Netlify (front-end) & Heroku (back-end)

Built using

Front-end

• ReactJS - Frontend framework
• Apollo Client - State management library to manage both local and remote data with GraphQL
• Apollo Subscriptions - Get real-time updates from your GraphQL server
• Context API w/ hooks - For state of user, selected chat, toast notifs, theme etc.
• React Router - For general routing & navigation
• React Hook Form - For flexible forms
• Material-UI w/ lots of CSS customisations - UI library
• Yup - For form validation
• date-fns - For manipulating & formatting of dates

Back-end

• Node.js - Runtime environment for JS
• Apollo Server - To build a self-documenting GraphQL API server
• Apollo Subscriptions - Subscriptions are GraphQL operations that watch events emitted from Apollo Server.
• PostgreSQL - Opens-source SQL database to store data
• Sequelize - NodeJS ORM for SQL-based databases
• JSON Web Token - A standard to secure/authenticate HTTP requests
• Bcrypt.js - For hashing passwords
• Dotenv - To load environment variables from a .env file

Features

• Authentication (login/register w/ username & password)
• Real-time chat using web-sockets
• Private messaging with all registered users
• Global channel for all-users-at-one-place chat
• Creation of groups with users of choice
• Users can leave from group after getting added
• Group creator can add/remove members from group
• Group creator can delete the group, & its messages along with it
• Group creator can rename the said group's name
• Error management with descriptive messages
• Toast notifications for actions: creating groups, removing users etc.
• Loading spinners for relevant fetching processes
• Formatted dates for adding/updating questions/answers/comments
• Dark mode toggle w/ local storage save
• Proper responsive UI for all screens

Screenshots

Desktop/Tablet

Mobile

Usage

Env variable:

Create a .env file in server directory and add the following:

PORT = 4000
JWT_SECRET = "Your JWT secret"

Client:

Open client/src/backendUrls.js & change the "backendUrls" object to:

{
  http: "http://localhost:4000",
  ws: "ws://localhost:4000/graphql"
}

Run client development server:

cd client
npm install
npm start

Server:

Open server/config/config.json & update the development keys' values to match your local PostgreSQL credentials.

Install 'sequelize-cli' & 'nodemon' as global packages, if you haven't yet.

Run this command to migrate the SQL table to your own local PSQL: sequelize db:migrate

Run backend development server:

cd server
npm install
npm run dev