Chatty

A full-stack real-time chat application built with the MERN stack and Socket.io.

Live Demo

• Frontend: chat-temp-two.vercel.app

Features

• Real-time messaging with Socket.io
• JWT authentication with secure HTTP-only cookies
• User registration and login
• Profile picture upload via Cloudinary
• Online user presence tracking
• 30+ UI themes powered by DaisyUI
• Fully responsive design

Tech Stack

Frontend

• React 18
• Vite
• Zustand (state management)
• React Router v7
• Socket.io-client
• Axios
• Tailwind CSS + DaisyUI

Backend

• Node.js + Express
• Socket.io
• MongoDB + Mongoose
• JSON Web Tokens (JWT)
• bcryptjs
• Cloudinary
• cookie-parser, cors, dotenv

Getting Started

Prerequisites

• Node.js 18+
• MongoDB Atlas account
• Cloudinary account

Backend setup

cd backend
npm install

Create backend/src/.env:

MONGODB_URI=your_mongodb_connection_string
PORT=5001
JWT_SECRET=your_jwt_secret
NODE_ENV=development
FRONTEND_URL=http://localhost:5173
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

npm run dev

Frontend setup

cd frontend
npm install

Create frontend/.env:

VITE_API_URL=http://localhost:5001/api

npm run dev

The app will be running at http://localhost:5173.

Deployment

Service	Platform	Config
Frontend	Vercel	Root directory: frontend
Backend	Railway	Root directory: backend

Vercel environment variables

VITE_API_URL=https://your-backend.up.railway.app/api

Railway environment variables

MONGODB_URI=your_mongodb_connection_string
PORT=5001
JWT_SECRET=your_jwt_secret
NODE_ENV=production
FRONTEND_URL=https://your-app.vercel.app
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

MongoDB Atlas: make sure to allow network access from 0.0.0.0/0 for Railway deployments.

Project Structure

chatapp/
├── backend/
│   └── src/
│       ├── controllers/    # Route handlers
│       ├── lib/            # DB, socket, cloudinary, utils
│       ├── middleware/     # JWT auth middleware
│       ├── models/         # Mongoose schemas
│       └── routes/         # Express routes
└── frontend/
    └── src/
        ├── components/     # Reusable UI components
        ├── pages/          # HomePage, LoginPage, SignUpPage, ProfilePage, SettingsPage
        ├── store/          # Zustand stores
        └── lib/            # Axios instance