Skip to content

Real-time messenger with private, public & group chat. Made using PERN + GraphQL stack.

License

Notifications You must be signed in to change notification settings

amand33p/les-chat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

Desktop-1 Desktop-2 Desktop-3 Desktop-4

Mobile

Mobile-1 Mobile-2 Mobile-3 Mobile-4 Mobile-5

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