CatchUp – Real-Time Chat & Video Call App

CatchUp is a cutting-edge, full-stack web application that enables users to connect, chat, and meet face-to-face in real-time. Built with the MERN stack (MongoDB, Express, React, Node.js) and Socket.IO, the platform delivers seamless messaging, real-time notifications, and high-quality video calls in a responsive, user-friendly interface.

Key Features

Real-Time Messaging :

1. Instant one-on-one chats with message history.
2. Unseen message notifications for quick awareness.
3. Support for text and image messages with Cloudinary integration.

Secure User Management

1. Signup and login with JWT authentication.
2. Profile updates with name, bio, and profile picture.
3. Secure password handling with hashing.

Video Call Functionality

1. High-quality, low-latency video calls between users.
2. Integrated directly into the web platform without external apps.
3. Real-time connection managed via Socket.IO for seamless communication.

Online Presence & Status

1. See which users are online in real-time.
2. Instant notifications when users come online or go offline.

Responsive Frontend

1. Built with React and TailwindCSS for smooth UX across devices.
2. Intuitive chat interface and easy-to-navigate dashboard.

Robust Backend

1. Node.js + Express server with protected routes.
2. MongoDB database for persistent user and message storage.
3. Real-time events handled with Socket.IO.

Tech Stack

Frontend: React, TailwindCSS, React Router, Axios, React Hot Toast
Backend: Node.js, Express, JWT Authentication, Socket.IO, Cloudinary Integration
Database: MongoDB, Mongoose
Deployment: Vercel (Frontend), Node.js-compatible hosting (Backend)

Getting Started

Prerequisites

1. Node.js v18+
2. MongoDB database instance
3. Cloudinary account for media uploads

Installation

1. Clone the repository

git clone https://github.com/VikramDhull/CatchUp
cd catchup

2. Install dependencies

Frontend

cd client
npm install

Backend

cd ../server
npm install

3. Set up environment variables in .env (backend)

MONGODB_URI=<Your MongoDB URI>
JWT_SECRET=<Your JWT Secret>
CLOUDINARY_CLOUD_NAME=<Cloudinary Cloud Name>
CLOUDINARY_API_KEY=<Cloudinary API Key>
CLOUDINARY_API_SECRET=<Cloudinary API Secret>
FRONTEND_URL=<Your Frontend URL>

4. Start development servers

Backend

npm run server

Frontend

cd ../client
npm run dev

Usage

Register/Login: Create an account or log in securely.
Profile Setup: Add a profile picture and bio for a personal touch.
Messaging: Select users from the sidebar, send messages, and see real-time notifications.
Video Call: Start one-on-one video calls with online users instantly.
Track Activity: View unseen messages and maintain conversation history.

Screenshots

Chat Page

SignUp Page

Future Enhancements

Group chat and multi-party video calls
Advanced analytics for messaging patterns
Dark mode & enhanced UI themes

License

This project is for educational and personal use.

Contact

Developed by Vikram Dhull
For inquiries, reach out via imvikramdhull@gmail.com