💬 Real-Time Chat App (MERN Stack)

A full-stack social media / chat application built using the MERN stack (MongoDB, Express.js, React, Node.js). This app allows users to interact in real-time with posts, likes, comments, and authentication.

---

🚀 Features

• 🔐 User Authentication (Register, Login, Logout)
• 📝 Create, Read, Update, Delete (CRUD) Posts
• ❤️ Like and 💬 Comment on Posts
• ☁️ Image Upload via Cloudinary
• ⚡ Real-time communication using Socket.io

---

🛠️ Tech Stack

Frontend

• React (Vite)
• Tailwind CSS
• DaisyUI

Backend

• Node.js
• Express.js
• MongoDB (Mongoose)

Other Tools

• JWT Authentication
• Bcrypt.js (Password Hashing)
• Cookie Parser
• Cloudinary (Media Storage)
• Socket.io (Real-time features)

---

🚀 Project Setup Guide

1. Create Project Structure

Create two folders: Frontend and Backend.

2. Frontend Setup

Open a terminal inside the Frontend folder and run the following commands:

npm create vite@latest .
# Select: React (JavaScript variant)
npm install
npm run dev

3. Backend Setup

Inside the Backend folder, open a terminal and run:

npm init -y
npm i express mongoose dotenv jsonwebtoken bcryptjs cookie-parser cloudinary socket.io
npm i nodemon -D

Create an entry file named index.js.

4. Install Tailwind CSS v3 and DaisyUI v4

Follow official instructions or use:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install daisyui
  

5. Add Environment Variables

Add your Cloudinary keys and MongoDB URI in a .env file inside Backend:

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
MONGODB_URI=your_mongodb_uri
  

6. Run the Project

Start both frontend and backend:

# For Backend
npm start
For Frontend

npm run dev

📸 Output Screens