Skip to content

guide.md

Latest commit

 

History

History
192 lines (153 loc) · 9.92 KB

guide.md

File metadata and controls

192 lines (153 loc) · 9.92 KB
Raw

Streamify Video Calls - End-to-End Complete Guide

Welcome to the comprehensive guide for setting up, building, and deploying StreamifyVideoCalls—a full-stack web application with video calling and messaging features built using the MERN stack and Stream's SDKs.

This document serves as an exhaustive reference covering both backend and frontend configurations, architecture details, routing logic, and deployment steps.

1. Introduction & Architecture

Streamify is a video calling and text chat platform divided into two main environments:

  • Frontend: A React application powered by Vite, utilizing modern libraries for data fetching, state management, and styling.
  • Backend: An Express server handling authentication routes, MongoDB interactions, and Stream service integrations.

Key Workflows

  1. Authentication: User Registration -> Onboarding Details -> Login -> Generate JWT Token.
  2. Social Mechanics: Discover Recommended Users, Send Friend Requests, Accept Friend Requests.
  3. Chat & Video via Stream: Users obtain tokens from the backend to securely interact with the Stream.io infrastructure directly from the frontend.

2. Tech Stack

Frontend

  • Framework: React (Bootstrapped with Vite npm create vite@latest)
  • Routing: react-router-dom (v7+)
  • Styling: tailwindcss (v3) & daisyui (v4)
  • State Management: zustand (For global theming state)
  • Data Fetching: @tanstack/react-query & axios
  • Notifications: react-hot-toast
  • Chat/Video SDK: stream-chat, stream-chat-react

Backend

  • Runtime: Node.js
  • Framework: Express.js
  • Database: MongoDB (managed via mongoose)
  • Authentication: bcrypt (password hashing), jsonwebtoken (JWT for stateless sessions), cookie-parser
  • Environment: dotenv
  • Cross-Origin Requests: cors
  • Video/Chat Service: stream-chat (Server SDK)

3. Backend Setup & Configuration

Initializing the Backend

  1. Create a backend folder.
  2. Run npm init -y inside to create a package file.
  3. Install dependencies: 
    npm install express bcrypt jsonwebtoken cookie-parser cors dotenv mongoose stream-chat
  4. Update server.js within the src/ directory to serve as the main entry point:
    • Configure Express logic.
    • Register route handlers (app.use('/api/auth', authRoutes), etc.).

Environment Variables (.env)

Generate and declare following keys at the root of the backend folder:

  • Database URI (MongoDB Atlas).
  • Secret strings for Session Encryption.
  • Stream SDK connection secrets.
PORT=5001
MONGODB_URI=your_mongo_cloud_atlas_url
JWT_SECRET=generate_using_openssl
STREAM_API_KEY=your_stream_key
STREAM_API_SECRET=your_stream_secret
NODE_ENV=development

(Tip: To get a secure random key for your JWT secret, run openssl rand -base64 32 via terminal)

Database Connectivity (MongoDB)

  • Connect using mongoose located in src/lib/db.js.
  • Export a connectDB() wrapper function and invoke this asynchronously before Express calls app.listen().
  • Note: Ensure IP access lists inside MongoDB Atlas network access points are opened up (0.0.0.0/0) during development.

User Authentication Workflow (Auth Controller)

The controllers located in src/controllers/auth.controller.js act on routes defined in src/routes/auth.route.js.

  1. Signup Phase: Evaluate user payload, check duplicates.
  2. Password Hashing: We use Mongoose pre('save') hooks within the User.js schema models to automatically hash outgoing passwords using bcrypt.
  3. Token Creation: Valid authenticated sessions generate a JSON Web Token injected into an HTTP-Only secure cookie format.
  4. Stream App Synchronization: Instantly map new users via the stream.js custom wrapper logic which hooks into serverClient.upsertUser.

Real-Time Services (Stream setup)

  1. Initialize the StreamChat client instance in your backend (lib/stream.js).
  2. Implement Token Generation route for user sessions (http://localhost:5001/api/chat/token). Clients require this token securely from your server to speak functionally with the Stream WebSocket APIs.

User Lifecycle & Onboarding (Protected Routes)

  1. Created middleware auth.middleware.js to extract and verify the jwt cookie.
  2. Fetches user data dynamically via req.user.

4. Frontend Setup & Configuration

Scaffolding

Initialize using npm create vite@latest . inside the frontend folder, choose React + JavaScript.

Installing Tailwind & Daisy UI

  • Follow current guidelines to configure tailwind.config.js.
  • Make sure to target your ./src/**/*.{js,jsx,ts,tsx} files in the Tailwind content.
  • Include Daisy UI require('daisyui') within plugins array.
  • Assign theme globally using DaisyUI’s native wrapper <div data-theme="theme-name">.

Routing Architecture

  • Wrap the core <App /> application with <BrowserRouter> via main.jsx.
  • Implement page structures inside a dedicated src/pages folder:
    • HomePage, SignUpPage, LoginPage
    • Render components dynamically utilizing standard <Routes> wrapper mechanisms.

State & API Integrations

Streamify leverages TanStack Query (React Query) for predictable, declarative API data requests without manually managing useEffect lifecycles.

  1. QueryClient Provider: Encase the <App /> within QueryClientProvider within main.jsx.
  2. Custom Hooks Integration: Encapsulate API checks (e.g., verifying logged-in user via /auth/me) utilizing useQuery under standardized query keys (['authUser']).
  3. Form submissions for Login / Sign-up utilize useMutation implementations mapped alongside centralized Axios instances.
  4. Avoid redundant manual loading states by depending on TanStack Query abstractions (isLoading, error).

Theming System (Zustand)

Manage standard visual themes uniformly across the application via Zustand.

  1. Create src/store/useThemeStore.js.
  2. Register theme parameters (theme, setTheme()) onto the globally accessible state tree.
  3. Access data properties universally via the useThemeStore() customized consumer.

Integrating Stream UI Packages

npm install stream-chat stream-chat-react
  • Import CSS declarations natively globally (import "stream-chat-react/dist/css/v2/index.css";) within the main.jsx scope before your primary index.css.
  • Bootstrap Chat, Channel, Window, ChannelHeader, MessageList, MessageInput, and Thread containers.

5. Deployment Guide (Render)

Deploying Streamify involves consolidating both frontend builds + backend executable instances natively beneath a unified package process inside a singular environment.

Finalizing Build Configuration

Create an entry-level package.json sitting in the Root Directory pointing directly alongside the frontend and backend structures. Establish these build scripts to orchestrate the deployment workflow:

"scripts": {
    "start": "npm run start --prefix backend",
    "build": "npm install --prefix backend && npm install --prefix frontend && npm run build --prefix frontend"
}

Static Asset Serving (Express fallback)

Configure the backend server to natively serve React frontend-compiled dist assets running actively specifically when targeting NODE_ENV=production. Modifying server.js:

import path from "path";
const __dirname = path.resolve();

// Only after defining functional API routes.
if (process.env.NODE_ENV === "production") {
    app.use(express.static(path.join(__dirname, "../frontend/dist")));

    app.get("*", (req, res) => {
        res.sendFile(path.join(__dirname, "../frontend", "dist", "index.html"));
    });
}

Environment Synchronization (Axios baseURL)

Ensure dynamically mapped URLs within your centralized Axios integration logic shift automatically depending on active runtimes natively:

const BASE_URL = import.meta.env.MODE === "development" ? "http://localhost:5001/api" : "/api";
export const axiosInstance = axios.create({
  baseURL: BASE_URL,
  withCredentials: true, // Necessary if cookie logic relies on credentials.
});

Deploying to Render Cloud Space

  1. Commit all files natively mapped to a designated GitHub Repo (verify .env and node_modules folders remain appropriately excluded via .gitignore globally positioned within root).
  2. Connect rendering configurations seamlessly directly leveraging chosen repositories.
  3. Set the build command to npm run build natively inside Render.
  4. Establish the start execution command as npm run start.
  5. Map necessary backend Environmental mappings cleanly specifically inside Render Settings (no need mapping NODE_ENV=production explicitly as Render inherently establishes this natively).

6. Required References

  1. Express Documentation - Essential backend routing.
  2. Mongoose Middleware (Hooks) - Crucial for database schema password hashing pre-hooks.
  3. Stream Video & Chat Platform Documentation - The underlying core framework handling scalable WebRTC and messaging.
  4. Tailwind CSS (v3) & DaisyUI - Detailed setup references for specific application styling components.
  5. React Router Setup (v7) - Fundamental navigation boundaries.
  6. TanStack React Query - Server-state orchestration techniques to maintain predictable auth payloads.
  7. Zustand GitHub Docs - The specific reference behind lightweight global themed parameters.
  8. Render Docs (Static Sites & Node.js Deployments) - Deployment integration references.