🎥 Streamify

A full-stack, real-time video calling and messaging platform built with the MERN stack and Stream API.

---

📖 About The Project

Streamify is a modern, responsive web application designed to connect users through seamless real-time video calls and text messaging. Whether you're looking to catch up with friends, collaborate with a team, or build out a scalable community, Streamify provides the infrastructure to do so effortlessly.

The platform is meticulously architected by decoupling the frontend and backend to ensure scalability and ease of maintenance. It features dynamic theming capabilities, instantaneous communication powered by WebRTC (via Stream), and a robust backend ensuring your data is secure.

---

✨ Key Features

• 🔐 Secure Authentication: JWT-based stateless authentication with robust password hashing (bcrypt).
• 📹 Real-Time Video & Chat: Integrated with the Stream.io SDK for enterprise-grade video calling and messaging.
• 🤝 Social Mechanics: Discover recommended users, send friend requests, and manage your network dynamically.
• 🎨 Dynamic Theming: Globally manageable UI themes using DaisyUI and Zustand state management.
• ⚡ Lightning Fast: Powered by Vite on the frontend for instant HMR and optimized production builds.
• 🔄 Efficient Data Fetching: Utilizes @tanstack/react-query to eliminate manual loading states and handle caching effectively.

---

🏗️ Architecture & Tech Stack

The repository is structured as a monorepo containing both the frontend and backend codebases.

🖥️ Frontend Architecture

The frontend is built for speed, responsiveness, and excellent developer experience. It interacts seamlessly with our backend APIs as well as directly with Stream's WebSocket services for real-time capabilities.

• Core Framework: React (Bootstrapped with Vite)
• Routing: React Router v7 for declarative and nested navigation.
• State Management:
  • Server State: @tanstack/react-query handles caching, background updates, and eliminates boilerplate for loading/error states.
  • Client/Global State: zustand is used for lightweight, globally accessible state management, primarily for dynamic theming.
• Styling: Tailwind CSS combined with DaisyUI components, offering a robust theming system (e.g., data-theme).
• Real-time UI Components: stream-chat-react provides pre-built, highly customizable chat UI interfaces (MessageList, Thread, Channel, etc.).
• Notifications: react-hot-toast for elegant, non-intrusive toast alerts.

⚙️ Backend Architecture

The backend serves as a secure RESTful API that handles user authentication, database management, and securely generating tokens required for the Stream SDK.

• Runtime & Framework: Node.js and Express.js
• Database: MongoDB hosted on Atlas, modeled and queried using mongoose.
• Authentication & Security:
  • bcryptjs for secure password hashing (utilizing Mongoose pre-save hooks).
  • jsonwebtoken (JWT) for stateless, secure HTTP-Only cookie-based sessions.
  • cookie-parser and cors for handling cross-origin credentialed requests.
• Real-time Integration: The stream-chat Node SDK is used server-side to sync user records (upserting users) and generate secure client access tokens.
• Production Serving: In production, the Express server is configured to statically serve the compiled React application, allowing for a unified single-port deployment on platforms like Render.

---

📁 Folder Structure

streamify/
├── backend/                  # Express API Server
│   ├── src/
│   │   ├── controllers/      # Route controllers (auth, chat, user activities)
│   │   ├── lib/              # Database & Stream API configurations
│   │   ├── middleware/       # JWT Authentication middleware (protectRoute)
│   │   ├── models/           # Mongoose schemas (User, FriendRequest)
│   │   ├── routes/           # Express API routes
│   │   └── server.js         # Backend entry point
│   └── package.json
├── frontend/                 # React Vite Client
│   ├── public/
│   ├── src/
│   │   ├── components/       # Reusable UI components (Navbar, Sidebar, PageLoader)
│   │   ├── constants/        # Application constants
│   │   ├── hooks/            # Custom React hooks (e.g., useAuthUser)
│   │   ├── lib/              # Axios configuration (axiosInstance)
│   │   ├── pages/            # Application routes (Home, Chat, Login, Notifications)
│   │   ├── store/            # Zustand global state (useThemeStore)
│   │   ├── App.jsx           # Main React component & Routing Hub
│   │   └── main.jsx          # Frontend entry point & Context Providers
│   └── package.json
└── package.json              # Root project dependencies & deployment scripts

---

🚀 Getting Started

Follow these instructions to set up the project locally.

Prerequisites

• Node.js installed on your local machine.
• A MongoDB Atlas account and database connection string. (Ensure Network Access is set to 0.0.0.0/0 during development).
• A Stream.io account. Create an organization and an app to grab your API keys.

Local Installation

1. Clone the repository

   git clone https://github.com/yourusername/streamify.git
   cd streamify

2. Install Dependencies You can install dependencies for both the frontend and backend using the root script:

   npm install --prefix backend
   npm install --prefix frontend

3. Setup Environment Variables

   Create a .env file in the backend/ directory:

   PORT=5001
   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_secure_random_string # Tip: use `openssl rand -base64 32`
   STREAM_API_KEY=your_stream_api_key
   STREAM_API_SECRET=your_stream_api_secret
   NODE_ENV=development

   Create a .env file in the frontend/ directory:

   VITE_STREAM_API_KEY=your_stream_api_key

Running Locally

To run the application in a development environment, you need two terminals.

Terminal 1 (Backend):

cd backend
npm run dev

(Runs on http://localhost:5001 with nodemon)

Terminal 2 (Frontend):

cd frontend
npm run dev

(Runs on Vite's default dev port, proxying requests to the backend)

---

☁️ Deployment

Streamify can be deployed using two different approaches: Decoupled Deployment (Highly Recommended) or Unified Monolithic Deployment.

Option A: Decoupled Deployment (Frontend on Vercel & Backend on Render) - Recommended 🚀

Deploying the frontend statically to Vercel and backend to Render provides superior loading performance and scale.

1. Configure the Backend (Render)

• Deploy your backend code from the /backend folder as a Web Service on Render.
• Define your environment variables in the Render settings:

  PORT=5001
  MONGODB_URI=your_mongodb_connection_string
  JWT_SECRET=your_jwt_secret
  STREAM_API_KEY=your_stream_api_key
  STREAM_API_SECRET=your_stream_api_secret
  NODE_ENV=production
  FRONTEND_URL=https://your-app.vercel.app # URL of your Vercel deployment

• Code Change Required (CORS): Ensure backend/src/server.js cors settings allow your Vercel frontend domain:

  app.use(cors({
    origin: process.env.FRONTEND_URL || "http://localhost:5173",
    credentials: true
  }));

• Code Change Required (Cookies): In backend/src/controllers/auth.controller.js, cross-origin cookies require sameSite: "none" and secure: true:

  res.cookie("jwt", token, {
    maxAge: 7 * 24 * 60 * 60 * 1000,
    httpOnly: true,
    sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
    secure: process.env.NODE_ENV === "production"
  });

2. Configure the Frontend (Vercel)

• Import your repository on Vercel, setting the Root Directory to frontend.
• Vercel will auto-detect Vite as the framework.
• Define your environment variables in Vercel:

  VITE_STREAM_API_KEY=your_stream_api_key
  VITE_BACKEND_URL=https://your-backend-url.onrender.com/api

• Code Change Required (Axios): Update your frontend/src/lib/axios.jsx to dynamically target the backend URL:

  export const axiosInstance = axios.create({
    baseURL: import.meta.env.VITE_BACKEND_URL || "http://localhost:5001/api",
    withCredentials: true,
  });

---

Option B: Unified Monolithic Deployment (Render Only)

You can serve both frontend and backend on a single Render service by statically serving the production build:

1. The root package.json contains a build script that installs dependencies and builds the Vite frontend:

   npm run build

2. The start script launches the Node server:

   npm run start

3. In production mode, the Express backend automatically serves the static assets located in frontend/dist.
4. Create a Web Service on Render, point to the root directory, set the Build Command to npm run build, and the Start Command to npm run start.

---

💡 Future Roadmap

• Group Video Calls: Expanding 1-on-1 calls to support group meetings.
• Screen Sharing: Allowing users to broadcast their screens during active video calls.
• Push Notifications: Integrating web push notifications for incoming calls and messages.
• Custom Avatars & Profiles: Allowing richer user profiles and banner images.

---

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the ISC License. See LICENSE for more information.