TalkToMe

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

Features

• Real-time messaging — messages appear instantly via WebSocket (Socket.IO)
• Online presence — see which contacts are currently online
• Image sharing — attach and send images in any conversation
• Profile pictures — upload and update your avatar (stored on Cloudinary)
• Theme switcher — 30+ DaisyUI themes, persisted across sessions
• JWT authentication — stateless auth via HTTP-only cookies
• Contact search — filter your contact list live by name

Tech Stack

Layer	Technology
Frontend	React 19, Vite, Tailwind CSS, DaisyUI
State	Zustand
Routing	React Router v7
HTTP client	Axios
Real-time	Socket.IO (client)
Backend	Node.js, Express 5
Database	MongoDB (Mongoose)
Real-time	Socket.IO (server)
File storage	Cloudinary
Auth	JWT + bcryptjs

Project Structure

TalkToMe/
├── client/          # Vite + React frontend
│   └── src/
│       ├── components/   # Navbar, Sidebar, ChatContainer, MessageInput, …
│       ├── pages/        # HomePage, SignInPage, SignUpPage, ProfilePage, SettingPage
│       ├── store/        # Zustand stores (useAuthStore, useChatStore, useThemeStore)
│       └── lib/          # axios instance, utility helpers
└── server/          # Express backend
    └── src/
        ├── controllers/  # auth.controller, message.controller
        ├── lib/          # db, cloudinary, socket, utils
        ├── middlewares/  # auth.middleware (JWT guard)
        ├── models/       # User, Message (Mongoose schemas)
        └── routes/       # /api/auth, /api/message

Getting Started

Prerequisites

• Node.js 18+
• MongoDB database (local or Atlas)
• Cloudinary account (for profile picture uploads)

Environment variables

Create server/.env:

MONGODB_URI=your_mongodb_connection_string
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

Installation

# Install server dependencies
cd server
npm install

# Install client dependencies
cd ../client
npm install

Running locally

In one terminal:

cd server
npm run dev        # starts Express on http://localhost:5001

In another terminal:

cd client
npm run dev        # starts Vite dev server on http://localhost:5173

Open http://localhost:5173.

API Reference

All endpoints are prefixed with /api.

Auth — /api/auth

Method	Path	Auth	Description
POST	/signup	—	Create a new account
POST	/signin	—	Sign in, returns JWT cookie
POST	/logout	—	Clear the auth cookie
PUT	/update-profile	✓	Update profile picture
GET	/check	✓	Verify current session

Messages — /api/message

Method	Path	Auth	Description
GET	/users	✓	List all users except the caller
GET	/:id	✓	Get message history with a user
POST	/send-message	✓	Send a text or image message

Socket.IO events

Event	Direction	Payload	Description
getOnlineUsers	server → client	string[]	Updated list of online user IDs
newMessage	server → client	Message	Delivered to the recipient in real time

Usage

1. Sign up at /signup — provide full name, email, and password (min 6 chars).
2. Sign in at /signin — authenticates and sets an HTTP-only JWT cookie.
3. Select a contact from the sidebar to open a conversation.
4. Send a message — type and press Enter (or Shift+Enter for a new line), or click the image icon to attach a photo.
5. Update your profile at /profile — click the camera icon to upload a new avatar.
6. Change the theme at /setting — pick from 30+ themes; the choice is saved locally.