InstaChat

A real-time chat application with Instagram-inspired UI & seamless video calling

---

Features

Feature	Description
Real-time Messaging	Instant chat powered by Socket.IO with live updates
Video Calling	High-quality video calls via Stream GetStream SDK
Presence Indicators	Live online/offline status for all users
Clear Chat	One-click chat history cleanup
Responsive Design	Fully optimized for mobile and desktop
Instagram-inspired UI	Modern, familiar, and visually polished interface

---

🧠 Tech Stack

Frontend

• React (via Vite) — fast, component-based UI
• Tailwind CSS — utility-first styling
• Socket.IO Client — real-time event handling

Backend

• Node.js + Express.js — REST API server
• MongoDB — persistent data storage
• Socket.IO — WebSocket communication layer

Integrations

• Stream Video SDK — video/audio calling infrastructure
• JWT — secure authentication tokens

---

📂 Project Structure

InstaChat/
├── Client/                  # React Frontend (Vite)
│   ├── src/
│   │   ├── Components/      # Reusable UI components
│   │   ├── Pages/           # Route-level pages
│   │   ├── Utils/           # Custom React hooks
│   │           
│   └── .env                 # Frontend environment variables
│
├── Server/                  # Node.js Backend
│   ├── controllers/         # Route handlers
│   ├── models/              # Mongoose schemas
│   ├── routes/              # Express route definitions
│   ├── middleware/          # Auth & error middleware
│   └── .env                 # Backend environment variables
│
└── README.md

---

⚙️ Getting Started

Prerequisites

• Node.js v18+
• MongoDB instance (local or Atlas)
• Stream account for video SDK

---

1 · Clone the Repository

git clone https://github.com/Parth-Chikalkar/InstaChat
cd instachat

2 · Backend Setup

cd Server
npm install
npm start

3 · Frontend Setup

cd Client
npm install
npm run dev

---

🔑 Environment Variables

Server/.env

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key

GETSTREAM_API_KEY=your_stream_api_key
GETSTREAM_API_SECRET=your_stream_api_secret

Client/.env

VITE_BACKEND_URL=http://localhost:5000
VITE_STREAM_API_KEY=your_stream_api_key

---

📞 Video Calling Flow

User A ──► sends call request
             │
             ▼
          User B receives popup
             │
             ▼
          User B accepts
             │
             ▼
    Both users join call room
             │
             ▼
    Stream handles video & audio

---

Highlights

-Blazing fast — Vite + Tailwind keep the frontend lean and snappy -Real-time first — Socket.IO ensures zero-latency messaging -Production-grade video — Stream SDK handles all WebRTC complexity -Clean architecture — frontend and backend are fully decoupled

---

📸 UI Inspiration

• Instagram DM — familiar, fluid chat interface
• WhatsApp — intuitive calling experience

---

👨‍💻 Author

Parth Chikalkar