✨ MeChat ✨

MeChat, A Realtime chat application with cool UI, and Realtime messaging.

Features:

• Realtime messaging
• Chat with every user
• Google Login
• Edit profile

Website Link: Me Chat

Tech Stack

• HTML/CSS
• Javascript
• React
• Tailwind CSS
• Redux
• Nodejs/Expressjs
• MongoDB
• Socket.io

Flow Diagram

Screenshots

Login Page

Home Page

Mobile Screen

Client Side

npm install

Install modules mentioned in package.json

Create .env

Create a .env file in the client folder and add following in it

NEXT_PUBLIC_API_DOMAIN=<YOUR_NEXT_APP_URL>
ST_CONNECTION_URI=<SUPERTOKENS_CORE_CONNECTION_URI>
ST_API_KEY=<SUPERTOKENS_API_KEY>
NEXT_PUBLIC_API_URL=<YOUR_WEBSOCKET_BACKEND_URL>
PG_CONNECTION_STRING=<POSTGRES_DB_URL>

npm run dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Server Side

npm install

Install modules mentioned in package.json

Create .env

Create .env file in server folder and paste following in it

FRONTEND_URL=<YOUR_FRONTEND_URL>

npm run dev

Runs the app in the development mode.
Open http://localhost:5000 to run server.

You will also see any errors or information in the console