ismail-arame / chat_app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

this project is built using :

MERN stack (Mongodb, Express, React, Nodejs) , nextjs for server side rendering and typescript for type checking, socketio for realtime communication and authentication is done using JWT (Json Web Token)

TODO :

setup docker to run the website in a container

you have to set envirenment varaibles in both frontend and backend in order to make it work perfectly.

Frontend :

you will have to create a .env.local file and set this in its content (you can set your own cloud config and secrets if you want to):

NEXT_PUBLIC_API_ENDPOINT=http://localhost:7000 NEXT_PUBLIC_CLOUD_NAME=dgr8f6lpi NEXT_PUBLIC_CLOUD_SECRET=hslkxjsi NEXT_PUBLIC_DARK_BACKGROUND=https://res.cloudinary.com/dmhcnhtng/image/upload/v1677358270/Untitled-1_copy_rpx8yb.jpg

ACCESS_TOKEN_SECRET=6uv7NHET9n6RezPbVFj4KMCZJvMd7LJU26e69uDttCkurjCt7Lb

Backend :

you will have to create a .env file and set this in its content:

CLIENT_ENDPOINT=http://localhost:3000

DATABASE_URL=mongodb+srv://username:password@cluster0.bd441vd.mongodb.net #(connect to your mongodb atlas account and get a DATABASE_URL) PORT=7000

NODE_ENV=development ACCESS_TOKEN_SECRET=6uv7NHET9n6RezPbVFj4KMCZJvMd7LJU26e69uDttCkurjCt7Lb REFRESH_TOKEN_SECRET=$RN49TP%6KbJAW2&^HI!UuakLCtv(Grghd*pzsfF+mjySnYZx7

//DEFAULT data DEFAULT_PICTURE=https://res.cloudinary.com/dkd5jblv5/image/upload/v1675976806/Default_ProfilePicture_gjngnb.png DEFAULT_STATUS=Hey there ! I am using whatsapp

app design and features :

Login Page :

1.png

Register Page :

2.png

Home Page :

home.png

Logout :

logout.png

Messages Design :

6.png

Online Users :

online.png

Sent Delivered Read message status :

Sent Status is shown when a message sent to offile user Delivered Status is shown when a message is sent to an online user Read Status is shown when a user reads a message

delivered-sent-read.png

Realtime Typing :

typing.png

typing-2.png

Searching for Users :

searching-for-new-users.png

emojis :

emojis.png

Multiple Image Selection :

select-images.png

About


Languages

Language:TypeScript 76.7%Language:JavaScript 21.3%Language:CSS 2.0%