8000
8000
Skip to content

Latest commit

 

History

10 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

💬 MERN Chat Application

A real-time full-stack chat application built using the MERN stack (MongoDB, Express, React, Node.js) with Socket.io for real-time communication.

✨ Features

  • 🔐 Authentication & Authorization using JWT
  • 👾 Real-time messaging powered by Socket.io
  • 🟢 Online user presence status
  • ☁️ Cloudinary image upload support
  • ✅ Error handling on both client and server
  • 🔐 Passwords hashed using bcryptjs
  • 🍪 JWT stored in HTTP-only cookies for session management
  • ⚡ Modern UI with React, Lucide Icons, and Zustand for state management

📸 Screenshots

Signup Page

Signup Page

Login Page

Login Page

Profile Page

Profile Page

Chat Page

Chat Page


🚀 Tech Stack

🖥️ Frontend

  • React

🌐 Backend

  • Node.js
  • Express

🗄️ Database

  • MongoDB
  • Cloudinary (for image storage)

🛠️ Libraries

Frontend Libraries

  • React Router DOM (for navigation and routing between different pages)
  • Axios (for making HTTP requests to the backend)
  • Zustand (for state management and storing application data globally)
  • Lucide React (for providing icons to enhance UI)
  • React Hot Toast (for showing toast notifications on the client)

Backend Libraries

  • Mongoose (for MongoDB interactions)
  • Socket.io (for real-time messaging)
  • dotenv (for environment variables)
  • jsonwebtoken (for JWT authentication)
  • bcryptjs (for password hashing)
  • cookie-parser (for handling cookies)
  • cloudinary (for image uploading)
  • cors (for Cross-Origin Resource Sharing)

🛠️ Installation & Setup

1. Clone the repository

git clone https://github.com/yourusername/your-chat-app.git
cd your-chat-app

2. Install server dependencies

cd server
npm install

3. Install client dependencies

cd ../client
npm install

4. Setup environment variables

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

MONGODB_URI=your_mongo_connection_string
PORT=5001
JWT_SECRET=your_jwt_secret

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

NODE_ENV=development

▶️ Run the application

Start the backend server

cd server
npm run dev

Start the frontend client

cd client
npm run dev

📂 Folder Structure

client/       # React frontend
server/       # Node.js + Express backend

🙌 Acknowledgements

This project uses:

🤝 Contributing

Contributions are welcome! Fork the repo and create a pull request.

About

A real-time MERN stack chat application with: Authentication, Real-time Messaging, Cloud Image Uploads

Topics

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages

0