CHATIFY-APP

A modern, real-time chat application built with React and Node.js. Experience seamless messaging with real-time notifications, user authentication, and a beautiful responsive UI.

📋 Table of Contents

• Features
• Tech Stack
• Project Structure
• Prerequisites
• Installation & Setup
• Environment Variables
• Running the Application
• Project Architecture
• API Endpoints
• Usage Guide
• Contributing

✨ Features

• 💬 Real-time Messaging: Instant message delivery using Socket.io
• 🔐 User Authentication: Secure JWT-based authentication with password hashing (bcryptjs)
• 👤 User Profiles: Upload and manage profile pictures via Cloudinary
• 📧 Email Notifications: Email verification and notifications using Resend
• 🛡️ Security: Rate limiting and protection against abuse using Arcjet
• 📱 Responsive Design: Beautiful UI built with React, TailwindCSS + DaisyUI
• ⚙️ State Management: Efficient state management with Zustand
• ⏳ Loading States: Skeleton loading screens for better UX

🛠 Tech Stack

Frontend

• ⚛️ Framework: React 19
• ⚡ Build Tool: Vite
• 🎨 Styling: TailwindCSS + DaisyUI
• 🔄 State Management: Zustand
• 🌐 HTTP Client: Axios
• 🔌 Real-time Communication: Socket.io Client
• 🗺️ Routing: React Router v7
• 🎯 UI Icons: Lucide React
• 🔔 Notifications: React Hot Toast

Backend

• 🖥️ Runtime: Node.js
• 🚀 Framework: Express.js v5
• 🗄️ Database: MongoDB with Mongoose ODM
• 🔌 Real-time: Socket.io
• 🔑 Authentication: JWT (jsonwebtoken) + bcryptjs
• 🖼️ File Upload: Cloudinary
• 📨 Email Service: Resend
• 🛡️ Security: Arcjet
• 🔧 Dev Tool: Nodemon
• 🔗 Middleware: Cookie Parser, CORS

📁 Project Structure

CHATIFY-APP/
├── backend/
│   ├── src/
│   │   ├── server.js                 # Main server entry point
│   │   ├── controllers/
│   │   │   ├── auth.controller.js    # Authentication logic
│   │   │   └── message.controller.js # Message handling
│   │   ├── routes/
│   │   │   ├── auth.routes.js        # Auth endpoints
│   │   │   └── message.routes.js     # Message endpoints
│   │   ├── models/
│   │   │   ├── User.js               # User schema
│   │   │   └── Message.js            # Message schema
│   │   ├── middleware/
│   │   │   ├── auth.middleware.js    # JWT verification
│   │   │   ├── arcjet.middleware.js  # Rate limiting
│   │   │   └── socket.auth.middleware.js # Socket auth
│   │   ├── lib/
│   │   │   ├── db.js                 # MongoDB connection
│   │   │   ├── socket.js             # Socket.io setup
│   │   │   ├── cloudinary.js         # Image upload config
│   │   │   ├── resend.js             # Email service config
│   │   │   ├── arcjet.js             # Security config
│   │   │   └── util.js               # Utility functions
│   │   └── emails/
│   │       ├── emailHandler.js       # Email sending logic
│   │       └── emailTemplate.js      # Email templates
│   ├── .env                          # Environment variables
│   └── package.json
│
├── frontend/
│   ├── src/
│   │   ├── main.jsx                  # React app entry point
│   │   ├── App.jsx                   # Main app component
│   │   ├── index.css                 # Global styles
│   │   ├── pages/
│   │   │   ├── ChatPage.jsx          # Main chat interface
│   │   │   ├── LogInPage.jsx         # Login page
│   │   │   └── SignUpPage.jsx        # Sign up page
│   │   ├── components/
│   │   │   ├── ChatContainer.jsx     # Chat messages display
│   │   │   ├── ChatHeader.jsx        # Chat header with user info
│   │   │   ├── ChatList.jsx          # List of conversations
│   │   │   ├── MessageInput.jsx      # Message input field
│   │   │   ├── ContactList.jsx       # Available contacts
│   │   │   ├── ActiveTabSwitch.jsx   # Tab switcher
│   │   │   ├── ProfileHeader.jsx     # User profile section
│   │   │   ├── NoChatFound.jsx       # Empty state
│   │   │   ├── NoChatHistory.jsx     # No messages state
│   │   │   ├── PageLoader.jsx        # Page loading spinner
│   │   │   ├── BorderAnimatedContainer.jsx # Animated UI
│   │   │   ├── MessagesLoadingSkeleton.jsx # Message skeleton
│   │   │   └── UsersLoadingSkeleton.jsx # User skeleton
│   │   ├── hooks/
│   │   │   └── useKeyboardSound.js   # Keyboard sound effect hook
│   │   ├── lib/
│   │   │   └── axios.js              # Axios instance with config
│   │   ├── store/
│   │   │   ├── useAuthStore.js       # Auth state management
│   │   │   └── useChatStore.js       # Chat state management
│   │   └── public/
│   │       └── sounds/               # Audio assets
│   ├── vite.config.js
│   ├── tailwind.config.js
│   ├── postcss.config.js
│   └── package.json
│
└── package.json (root)

📦 Prerequisites

Before you begin, ensure you have the following installed:

• 🖥️ Node.js (v18 or higher) - Download here
• 📦 npm or yarn - Comes with Node.js
• 🗄️ MongoDB (Local or Atlas Cloud) - Setup MongoDB
• 🖼️ Cloudinary Account - Sign up here (for image uploads)
• 📧 Resend Account - Sign up here (for email services)
• 🛡️ Arcjet Account - Sign up here (for security/rate limiting)

🚀 Installation & Setup

Step 1: Clone the Repository

cd CHATIFY-APP

Step 2: Install Backend Dependencies

cd backend
npm install

Step 3: Install Frontend Dependencies

cd ../frontend
npm install

Step 4: Navigate Back to Root

cd ..

🔑 Environment Variables

Backend Setup (.env file in /backend)

Create a .env file in the backend directory with the following variables:

# Server Configuration
PORT=5000
NODE_ENV=development

# Database
MONGODB_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/chatify

# JWT
JWT_SECRET=your_jwt_secret_key_here

# Cloudinary (Image Upload)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Resend (Email Service)
RESEND_API_KEY=your_resend_api_key

# Arcjet (Security/Rate Limiting)
ARCJET_KEY=your_arcjet_key

# Client URL (for CORS)
CLIENT_URL=http://localhost:5173

# Email Configuration
SENDER_EMAIL=noreply@yourdomain.com

Frontend Setup (.env file in /frontend - if needed)

If you need to configure the API endpoint, create a .env file in the frontend directory:

VITE_API_URL=http://localhost:5000/api

▶️ Running the Application

Option 1: Run Backend and Frontend Separately

Terminal 1 - Start Backend:

cd backend
npm run dev

The backend server will start on http://localhost:5000

Terminal 2 - Start Frontend:

cd frontend
npm run dev

The frontend will be available at http://localhost:5173

Option 2: Build Frontend for Production

To build the frontend for production deployment:

cd frontend
npm run build

Then start the backend, which will serve the built frontend files.

🏗 Project Architecture

Frontend Flow

1. 🔐 Authentication

   • User signs up/logs in on SignUpPage or LogInPage
   • Credentials sent to backend via Axios
   • JWT token stored in cookies
   • User redirected to ChatPage

2. 💬 Chat Interface

   • ChatPage displays three main sections:
     • ContactList: Available users to chat with
     • ChatList: Recent conversations
     • ChatContainer: Active conversation messages

3. ⚡ Real-time Messaging

   • Socket.io connection established with authentication
   • Messages sent and received in real-time
   • UI updates automatically via Zustand state management

4. 🔄 State Management (Zustand Stores)

   • useAuthStore: Manages user authentication and profile
   • useChatStore: Manages conversations and messages

Backend Flow

1. 🔑 Authentication Flow

   • User registration: Password hashed with bcryptjs
   • User login: JWT token generated
   • Protected routes verified via auth.middleware.js

2. 💾 Message Flow

   • GET messages: Retrieve conversation history from MongoDB
   • POST message: Save message to MongoDB and broadcast via Socket.io

3. 🔌 Real-time Socket Events

   • connection: User connects to Socket.io
   • send_message: Emit message to recipient
   • receive_message: Listen for incoming messages
   • user_online_status: Update user online status

4. 🛡️ Security

   • Arcjet middleware protects against rate limiting and abuse
   • CORS enabled for frontend origin only
   • Socket authentication via middleware

📡 API Endpoints

Authentication Routes (/api/auth)

Method	Endpoint	Description
POST	/signup	Register new user
POST	/login	User login
POST	/logout	User logout
GET	/me	Get current user profile
PUT	/profile	Update user profile
POST	/profile/upload	Upload profile picture

Message Routes (/api/message)

Method	Endpoint	Description
GET	/users	Get all available users
GET	/:userId	Get messages with specific user
POST	/send/:id	Send message to user

💬 Usage Guide

📝 Creating an Account

1. Visit the application URL
2. Click "Sign Up"
3. Enter your email, password, and username
4. 📧 Email verification (if enabled)
5. Create your account

💌 Sending Messages

1. Select a user from the Contacts list
2. Type your message in the Message Input field
3. Press Enter or click Send button
4. Messages appear in real-time for both users via Socket.io

🖼️ Uploading Profile Picture

1. Click on your profile icon
2. Click "Upload Picture"
3. Select an image from your device
4. Profile picture updates immediately via Cloudinary

🟢 Online Status

• 🟢 Green indicator shows when users are online
• Status updates in real-time via Socket.io

📝 Development Notes

Available Scripts

Backend:

• 🔄 npm run dev - Start development server with hot reload via Nodemon
• 🚀 npm start - Start production server

Frontend:

• ⚡ npm run dev - Start development server with Vite
• 📦 npm run build - Build for production
• 🔍 npm run lint - Run ESLint
• 👀 npm run preview - Preview production build

🔥 Hot Reload

• Backend: Nodemon automatically restarts the server on file changes
• Frontend: Vite provides instant hot module replacement (HMR)

🐛 Debugging

• Backend: Add console.log() statements or use a debugger
• Frontend: Use React Developer Tools browser extension
• Network: Check browser DevTools Network tab for API calls

🤝 Contributing

We welcome contributions! Here's how to get started:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

---

🆘 Troubleshooting

Common Issues

Backend won't start:

• Check if port 5000 is already in use
• Verify MongoDB connection string in .env
• Ensure all required environment variables are set

Frontend won't connect to backend:

• Check if backend is running on port 5000
• Verify CLIENT_URL in backend .env matches frontend URL
• Check browser console for CORS errors

Messages not sending:

• Verify Socket.io connection is established
• Check browser console for errors
• Ensure user is authenticated

Database connection error:

• Verify MongoDB URI in .env
• Check MongoDB credentials
• Ensure MongoDB service is running

📧 Contact & Support

For issues, questions, or suggestions, please open an issue in the repository.

---

Happy Chatting! 🚀