TalkNWork

A full-stack real-time chat platform built with the MERN stack. Supports one-on-one and group messaging, HD voice & video calls, a friend system, in-app notifications, and a multiplayer Scribble drawing game — all in a clean, modern interface.

---

Features

Messaging

• Real-time one-on-one and group chat via Socket.io
• Image attachments with inline preview
• Message reactions (emoji)
• Inverted chat layout — newest messages always at the bottom
• Friend-gated DMs — you must be friends before messaging someone

Calls

• One-on-one HD video and voice calls powered by Agora RTC
• In-call controls: mute, toggle camera, screen share, end call
• Incoming call dialog with accept / decline
• Live call duration timer

Friends & Notifications

• Send, accept, and decline friend requests
• Friend request notifications panel
• Call history panel
• Online presence indicators

Groups

• Create groups with custom name and member list
• Group message list with sender avatars
• Member count displayed in header

Scribble

• Real-time multiplayer drawing and guessing game
• Invite friends directly from a chat
• Word hints, round timer, live scoreboard, end-of-game podium

Profile

• Upload and change profile picture (Cloudinary)
• Edit bio
• View member-since date, friend count, group count

UI

• MUI v6 component library with custom Indigo/Violet design system
• Light mode with #F1F5F9 background and #6366F1 primary
• MUI Skeleton loading states throughout
• Fully responsive (mobile sidebar toggle)

---

Tech Stack

Frontend

Framework	React 18 + TypeScript (Vite)
UI Library	Material UI v6
State	Redux Toolkit
Server State	TanStack React Query
Routing	React Router v6
Real-time	Socket.io client
Video / Audio	Agora RTC React

Backend

Runtime	Node.js + Express
Database	MongoDB + Mongoose
Auth	JWT + HTTP-only cookies
Real-time	Socket.io
Calls	Agora RTC (token server)
Storage	Cloudinary

---

Getting Started

1. Clone

git clone https://github.com/Manavi-Arora/TalkNWork-MERN.git
cd TalkNWork-MERN

2. Install dependencies

# Backend
cd backend
npm install

# Frontend
cd ../frontend
npm install

3. Environment variables

Create backend/.env:

MONGO_URI=<your_mongodb_uri>
JWT_SECRET=<your_jwt_secret>
CLOUDINARY_CLOUD_NAME=<your_cloudinary_cloud_name>
CLOUDINARY_API_KEY=<your_cloudinary_api_key>
CLOUDINARY_API_SECRET=<your_cloudinary_api_secret>
AGORA_APP_ID=<your_agora_app_id>
AGORA_APP_CERTIFICATE=<your_agora_app_certificate>
PORT=5000
NODE_ENV=development

Create frontend/.env:

VITE_AGORA_APP_ID=<your_agora_app_id>
VITE_API_BASE_URL=http://localhost:5000

4. Run

# Backend (from /backend)
npm run dev

# Frontend (from /frontend)
npm run dev

App runs at http://localhost:5173, API at http://localhost:5000.

---

Project Structure

TalkNWork/
├── backend/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── socket/
│   └── server.js
└── frontend/
    └── src/
        ├── app/           # Store, router, theme
        ├── features/
        │   ├── auth/
        │   ├── calls/
        │   ├── chat/
        │   ├── friends/
        │   ├── groups/
        │   ├── notifications/
        │   └── scribble/
        ├── layout/        # Sidebar, AppInitializer
        ├── pages/         # HomePage, ProfilePage
        └── shared/        # Utils, hooks, constants