DEV Community: snehaa1989

Building TraceOps: Teaching AI to Investigate Production Incidents with Graphs, Not Guesses

snehaa1989 — Sat, 17 Oct 2026 16:15:57 +0000

How I built an evidence-first AI incident investigator using FalkorDB, Spring Boot, and JevModel for FalkorDB Graph Hacks 2026.

The moment that inspired TraceOps

Imagine this: checkout requests are failing, customers cannot complete payments, and alerts are firing across multiple services.

The monitoring system has detected the problem. But one question remains: What actually caused it?

Was there a recent deployment? Is a downstream service unhealthy? Is the database struggling? Or are several symptoms pointing toward a deeper dependency failure?

In a microservices architecture, answering these questions can require an engineer to investigate alerts, service dependencies, deployment history, logs, and previous incidents across multiple tools. Each source offers a piece of the puzzle, but the engineer must connect those pieces before making a decision.

AI can summarize an alert or suggest a likely cause. However, a convincing explanation is not necessarily a correct one. A deployment that happened two minutes before an incident may be relevant, but timing alone does not prove causation.

I wanted to explore a different approach: What if an AI incident investigator could reason over connected operational evidence, explain why a hypothesis is plausible, and acknowledge when it does not have enough information?

That question led me to build TraceOps.

Introducing TraceOps

TraceOps is an evidence-first AI incident investigator for microservices. It connects incidents, services, dependencies, deployments, and evidence in a graph, then uses that context to help engineers prioritize their investigation.

The goal is not to replace the engineer or automatically declare a root cause. It is to reduce the effort required to move from a noisy incident to a focused, evidence-backed investigation.

The prototype brings together three key ideas:

Graph-native context: Understand how services and operational events relate to one another.
Explainable investigation: Rank plausible causes using available evidence and show the context behind those hypotheses.
AI-assisted reasoning: Use a structured model assessment to help identify likely causes, missing evidence, and useful next checks.

TraceOps is built around a simple principle: an AI system should help engineers investigate with evidence, not replace evidence with confident guesses.

Why I chose a graph-first approach

Traditional incident data is often distributed across different systems. A service alert, a deployment record, and a database health signal might each look reasonable in isolation. The challenge is understanding how they connect.

A graph is a natural way to represent these relationships.

For TraceOps, I used FalkorDB to represent operational entities and their connections. The graph model includes services, incidents, evidence, and deployments, with relationships that describe affected services, dependencies, and where evidence was observed.

Consider a checkout service that depends on a payment service, which in turn depends on a payment database.

If checkout begins failing, investigating checkout alone may not be enough. A signal from the payment database could provide an important lead, even if the initial alert appears at the checkout layer.

Graph traversal allows TraceOps to explore connected dependencies instead of treating the affected service as an isolated component.

I also included deployment context because recent changes can be useful investigation signals. However, TraceOps must distinguish between a relationship worth investigating and a cause that has actually been established.

That distinction shaped the design: the graph supplies connected context, while the investigation logic interprets that context to prioritize hypotheses.

Under the hood: how TraceOps works

I chose Spring Boot for the backend because I wanted an explicit, structured investigation pipeline rather than a collection of loosely connected AI calls.

The architecture has three main parts.

1. FalkorDB: connecting the evidence

FalkorDB stores the graph used by the investigation workflow. Cypher queries retrieve incident context, related evidence, deployment information, and service dependencies.

This lets the application examine the incident in relation to the wider system. Instead of passing an isolated error message to an AI model, TraceOps can first gather relevant context from the graph.

2. Spring Boot: orchestrating the investigation

The Java backend exposes REST endpoints for incident scenarios, investigation results, and AI assessments.

The investigation service retrieves the incident context, explores service dependencies, and ranks hypotheses using explicit rules. These include possible dependency degradation, deployment regression, and insufficient evidence.

The rules are deliberately understandable. When a hypothesis ranks first, its score represents a heuristic ranking signal, not a statistically calibrated probability.

I wanted the first version to be testable and predictable before making the workflow more sophisticated.

3. JevModel: adding structured AI assessment

TraceOps also integrates JevModel to assess the investigation context.

The backend sends structured information about the incident, available evidence, deployments, dependencies, and heuristic hypotheses. The model returns a structured assessment of a potential cause and associated confidence information.

The AI assessment complements the graph-backed investigation; it does not replace it. Model-reported confidence is not the same as verified correctness, and the model should be allowed to return an insufficient-evidence assessment when the available context does not justify a strong conclusion.

Keeping these responsibilities separate makes the system easier to reason about: FalkorDB provides connected context, Spring Boot orchestrates the investigation, and the AI model contributes an additional assessment.

A walkthrough: investigating three incident scenarios

To evaluate the prototype, I created three predefined incident scenarios.

Scenario 1: Checkout payment failures

The first scenario involves payment failures, with evidence associated with the payment service and a signal involving the payment database.

The expected leading hypothesis is dependency degradation. The important part is not simply producing that label; it is making the dependency signal available as a reason to investigate the database and its health.

Scenario 2: Checkout failures after a deployment

The second scenario focuses on failures occurring shortly after a checkout deployment.

Here, deployment regression is the expected leading hypothesis. The deployment timing gives the engineer a useful lead, but further investigation would still be required to establish whether the release actually introduced the failure.

Scenario 3: Checkout requests timing out downstream

The third scenario involves checkout requests timing out while evidence points toward the payment service.

In this case, dependency degradation should rank ahead of deployment regression. The scenario helps test whether the investigation can distinguish a downstream dependency signal from a deployment-related explanation.

Together, these scenarios test whether TraceOps can produce different leading hypotheses for different evidence patterns, rather than treating every checkout failure as the same problem.

They are also a reminder that incident investigation is not just classification. The system needs to communicate what it found, why a hypothesis is worth exploring, and what information is still missing.

Evaluating the prototype

I wanted a repeatable way to test the investigation workflow instead of relying only on a successful live demo.

I created a scenario evaluation script that checks the expected leading hypothesis and evidence coverage across the predefined incidents.

The current evaluation reports:

100% top-one hypothesis accuracy across the three predefined scenarios.
100% evidence coverage across those scenarios.
100% precision and 100% recall for the deployment-regression case in this small evaluation set.

These results are encouraging, but they need to be interpreted carefully. Three predefined scenarios are not enough to establish general diagnostic accuracy. The scenarios test whether the current implementation behaves as expected on selected cases; they do not prove that it will correctly diagnose unfamiliar production incidents.

The next evaluation stage would include a larger collection of incidents, ambiguous evidence, conflicting signals, missing telemetry, and cases where insufficient evidence is the correct answer.

For an incident investigation tool, knowing when not to make a strong claim is as important as selecting the right hypothesis.

What I learned while building TraceOps

1. Better context can be more valuable than a more elaborate prompt

My biggest takeaway was that AI reasoning depends on the quality of the context it receives.

An isolated alert gives a model limited information. Connecting that alert to a service dependency, a deployment, and other observed signals provides a more useful starting point for investigation.

This is why the graph is central to TraceOps rather than simply a visualization added to an AI application.

2. Correlation is not causation

One of the easiest mistakes in incident analysis is to treat temporal proximity as proof. If a deployment happens just before an outage, it deserves investigation, but it is not automatically responsible.

Building TraceOps made me think more carefully about how a system should communicate hypotheses. A useful investigator should distinguish observations, supporting signals, alternative explanations, and confirmed causes.

3. Explainability has to be designed into the workflow

Displaying a final answer is not enough. Engineers need to understand what evidence contributed to a hypothesis and what they should check next.

This pushed me toward explicit graph queries, understandable heuristic rules, and structured model responses. These design choices also make the application easier to test and debug.

4. Evaluation should challenge the system, not just demonstrate it

A successful demo can show that an application works on one example. A repeatable evaluation helps reveal whether it behaves consistently across different cases.

The three seeded scenarios gave me a practical starting point, but they also exposed the limits of small test sets. Broader evaluation needs to include cases where the evidence is incomplete, conflicting, or misleading.

5. Building solo taught me to prioritize the investigation loop

Working on the project independently meant making deliberate scope decisions. Rather than attempting to build a complete observability platform, I focused on one core workflow: retrieve the incident context, traverse the graph, rank plausible hypotheses, request an AI assessment, and expose the result through an API and frontend.

That end-to-end loop became the foundation of the prototype. It also gave me a clearer roadmap for what should come next.

What comes next?

TraceOps is a prototype, and there is plenty of room to improve it.

My next priorities are:

Expand the evaluation dataset with more realistic and ambiguous incidents.
Add richer historical incident and verified-resolution data to improve investigation context.
Strengthen evidence provenance so that every hypothesis can be traced to the underlying observations.
Improve confidence calibration and measure how often the system appropriately abstains when evidence is insufficient.
Develop a controlled remediation workflow in which recommended actions require explicit human approval before any production-changing operation.

The last point is particularly important. An incident investigator should not silently turn a plausible hypothesis into an automatic rollback. Recommendations and execution are different responsibilities, and production-changing actions need safeguards.

Final thoughts

TraceOps started with a question: could connected data help AI investigate incidents more responsibly?

Building it with FalkorDB, Spring Boot, and JevModel gave me a practical way to explore that idea. The project combines graph-based context retrieval, explicit hypothesis ranking, and structured AI assessment in a single investigation workflow.

The prototype is still early, and its evaluation results apply only to the predefined scenarios. But the central idea is one I want to keep building on: incident response should not depend on an AI system sounding certain. It should depend on the quality of the evidence, the transparency of the reasoning, and the engineer's ability to verify the next step.

TraceOps is my step toward incident investigation that connects the dots before drawing conclusions.

Built for WeMakeDevs FalkorDB Graph Hacks 2026. By Team MinionMR

IncidentResponse #SpringBoot #DeveloperTools #AIOps

Building Your First Flutter Android App with Firebase: A Complete Beginner's Guide

snehaa1989 — Mon, 23 Feb 2026 17:03:56 +0000

Learn how to create a complete Android application using Flutter and Firebase from scratch

📋 Table of Contents

Introduction
Prerequisites
Setting Up Your Development Environment
Creating a New Flutter Project
Setting Up Firebase
Connecting Flutter to Firebase
Building the User Interface
Implementing Firebase Authentication
Storing Data with Firestore
Testing Your App
Conclusion

🚀 Introduction

Flutter has revolutionized mobile app development by allowing developers to create beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. When combined with Firebase, Google's mobile and web application development platform, you get a powerful stack that handles everything from authentication to real-time databases.

In this tutorial, we'll build a simple Task Management App that demonstrates:

User authentication with Firebase Auth
Real-time data storage with Firestore
Beautiful UI with Flutter widgets
Proper project structure and best practices

📚 Prerequisites

Before we start, make sure you have:

Basic programming knowledge (Dart syntax is similar to JavaScript/TypeScript)
Android Studio installed (includes Android SDK and emulator)
Flutter SDK installed
A Google account for Firebase
Visual Studio Code (optional, but recommended)

Installing Flutter

If you haven't installed Flutter yet:

# Download Flutter SDK from https://flutter.dev/docs/get-started/install
# Extract and add to PATH
export PATH="$PATH:/path/to/flutter/bin"

# Verify installation
flutter doctor

🛠️ Setting Up Your Development Environment

1. Install Android Studio

Download Android Studio
Install the Flutter and Dart plugins
Set up an Android virtual device (AVD)

2. Verify Your Setup

Run this command to ensure everything is working:

flutter doctor -v

You should see green checkmarks for:

Flutter toolchain
Android toolchain
Connected device (emulator or physical device)

📱 Creating a New Flutter Project

Let's create our Flutter project:

# Create a new Flutter project
flutter create task_manager_app
cd task_manager_app

# Open in VS Code (optional)
code .

Project Structure Overview

task_manager_app/
├── android/          # Android-specific code
├── ios/              # iOS-specific code
├── lib/              # Main Dart code
│   ├── main.dart     # Entry point
│   └── screens/      # App screens
├── pubspec.yaml      # Dependencies
└── test/             # Test files

🔥 Setting Up Firebase

1. Create a Firebase Project

Go to Firebase Console
Click "Add project"
Enter project name: task-manager-app
Enable Google Analytics (optional)
Click "Create project"

2. Add Android App to Firebase

In Firebase Console, click the Android icon
Package name: Find it in android/app/build.gradle (usually com.example.task_manager_app)
Download google-services.json
Place it in android/app/ directory

3. Enable Firebase Services

In your Firebase project, enable:

Authentication → Email/Password
Firestore Database → Start in test mode

🔗 Connecting Flutter to Firebase

1. Add Firebase Dependencies

Update your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.15.0
  firebase_auth: ^4.7.0
  cloud_firestore: ^4.8.0
  firebase_ui_auth: ^1.6.0

Run flutter pub get to install dependencies.

2. Configure Android

Add these lines to android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

android {
    // ...
    defaultConfig {
        // ...
        minSdkVersion 19
    }
}

Add to android/build.gradle:

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.3.15'
    }
}

🎨 Building the User Interface

Let's create a simple task management interface.

1. Create the Main App Structure

Replace lib/main.dart:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'screens/auth_screen.dart';
import 'screens/home_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Task Manager',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: AuthWrapper(),
    );
  }
}

class AuthWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final user = FirebaseAuth.instance.currentUser;
    return user != null ? HomeScreen() : AuthScreen();
  }
}

2. Create Authentication Screen

Create lib/screens/auth_screen.dart:

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _isLogin = true;
  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_isLogin ? 'Login' : 'Sign Up'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(
                labelText: 'Email',
                border: OutlineInputBorder(),
              ),
              keyboardType: TextInputType.emailAddress,
            ),
            SizedBox(height: 16),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(
                labelText: 'Password',
                border: OutlineInputBorder(),
              ),
              obscureText: true,
            ),
            SizedBox(height: 24),
            _isLoading
                ? CircularProgressIndicator()
                : ElevatedButton(
                    onPressed: _authenticate,
                    child: Text(_isLogin ? 'Login' : 'Sign Up'),
                    style: ElevatedButton.styleFrom(
                      minimumSize: Size(double.infinity, 50),
                    ),
                  ),
            TextButton(
              onPressed: () {
                setState(() {
                  _isLogin = !_isLogin;
                });
              },
              child: Text(_isLogin 
                  ? 'Don\'t have an account? Sign up' 
                  : 'Already have an account? Login'),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _authenticate() async {
    setState(() => _isLoading = true);

    try {
      if (_isLogin) {
        await FirebaseAuth.instance.signInWithEmailAndPassword(
          email: _emailController.text.trim(),
          password: _passwordController.text,
        );
      } else {
        await FirebaseAuth.instance.createUserWithEmailAndPassword(
          email: _emailController.text.trim(),
          password: _passwordController.text,
        );
      }
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error: ${e.message}')),
      );
    } finally {
      setState(() => _isLoading = false);
    }
  }
}

3. Create Home Screen

Create lib/screens/home_screen.dart:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final _taskController = TextEditingController();
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  @override
  Widget build(BuildContext context) {
    final user = _auth.currentUser;

    return Scaffold(
      appBar: AppBar(
        title: Text('Task Manager'),
        actions: [
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: _logout,
          ),
        ],
      ),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(16.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _taskController,
                    decoration: InputDecoration(
                      labelText: 'Add a new task',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                SizedBox(width: 8),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: _addTask,
                  style: IconButton.styleFrom(
                    backgroundColor: Colors.blue,
                    foregroundColor: Colors.white,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: StreamBuilder<QuerySnapshot>(
              stream: _firestore
                  .collection('tasks')
                  .where('userId', isEqualTo: user?.uid)
                  .orderBy('createdAt', descending: true)
                  .snapshots(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }

                if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
                  return Center(child: Text('No tasks yet. Add one!'));
                }

                return ListView.builder(
                  itemCount: snapshot.data!.docs.length,
                  itemBuilder: (context, index) {
                    final doc = snapshot.data!.docs[index];
                    final task = doc.data() as Map<String, dynamic>;

                    return Card(
                      margin: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
                      child: ListTile(
                        title: Text(task['title']),
                        subtitle: Text(
                          'Created: ${task['createdAt'].toDate().toString().substring(0, 19)}',
                        ),
                        trailing: IconButton(
                          icon: Icon(Icons.delete, color: Colors.red),
                          onPressed: () => _deleteTask(doc.id),
                        ),
                        leading: Checkbox(
                          value: task['completed'] ?? false,
                          onChanged: (value) => _toggleTask(doc.id, value!),
                        ),
                      ),
                    );
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Future<void> _addTask() async {
    if (_taskController.text.trim().isEmpty) return;

    final user = _auth.currentUser;
    if (user == null) return;

    try {
      await _firestore.collection('tasks').add({
        'title': _taskController.text.trim(),
        'completed': false,
        'userId': user.uid,
        'createdAt': Timestamp.now(),
      });
      _taskController.clear();
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error adding task: $e')),
      );
    }
  }

  Future<void> _deleteTask(String taskId) async {
    try {
      await _firestore.collection('tasks').doc(taskId).delete();
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error deleting task: $e')),
      );
    }
  }

  Future<void> _toggleTask(String taskId, bool completed) async {
    try {
      await _firestore.collection('tasks').doc(taskId).update({
        'completed': completed,
      });
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error updating task: $e')),
      );
    }
  }

  Future<void> _logout() async {
    await _auth.signOut();
  }
}

🔐 Implementing Firebase Authentication

Our authentication system is already implemented! Here's what we've done:

Email/Password Authentication

Users can sign up with email and password
Firebase handles password hashing and security
Automatic login state persistence

Key Features

Input validation: Basic email format checking
Error handling: User-friendly error messages
Loading states: Visual feedback during authentication
State management: Automatic UI updates on auth changes

📊 Storing Data with Firestore

Firestore is a flexible, scalable NoSQL cloud database. Here's how we're using it:

Data Structure

tasks/
  [taskId]: {
    title: "Complete Flutter tutorial",
    completed: false,
    userId: "user-uid",
    createdAt: timestamp
  }

Key Features Implemented

Real-time updates: UI updates automatically when data changes
User-specific data: Each user only sees their own tasks
CRUD operations: Create, Read, Update, Delete functionality
Query optimization: Efficient data fetching with where clauses

🧪 Testing Your App

Run on Emulator

# Check available devices
flutter devices

# Run on specific device
flutter run -d <device-id>

Test on Physical Device

Enable developer options on your Android device
Enable USB debugging
Connect device to computer
Run flutter devices to verify connection
Run flutter run

Common Testing Scenarios

Authentication Flow
- Sign up with new account
- Login with existing account
- Logout and login again
Task Management
- Add new tasks
- Mark tasks as complete
- Delete tasks
- Verify data persistence
Real-time Updates
- Open app on multiple devices
- Verify changes sync across devices

🎯 Best Practices and Tips

Security

Always validate user input on both client and server
Use Firebase Security Rules for production apps
Never store sensitive data in client-side code

Performance

Use pagination for large datasets
Implement proper error handling
Optimize widget rebuilds with const constructors

User Experience

Provide loading indicators
Show meaningful error messages
Implement proper navigation flow

🚀 Next Steps

Congratulations! You've built a complete Flutter app with Firebase integration. Here are some ways to enhance your app:

Add More Features
- Task categories and priorities
- Due dates and notifications
- Task sharing between users
Improve UI/UX
- Custom animations and transitions
- Dark mode support
- Responsive design for tablets
Advanced Firebase
- Cloud Functions for server-side logic
- Firebase Storage for file uploads
- Firebase Analytics for user insights
Deployment
- Build release APK: flutter build apk --release
- Publish to Google Play Store
- Set up CI/CD pipeline

📝 Conclusion

Building mobile apps with Flutter and Firebase offers an incredible development experience. You get:

Fast development with hot reload
Beautiful UI with Material Design
Real-time functionality out of the box
Scalable backend without server management
Cross-platform support from a single codebase

The combination of Flutter's expressive UI framework and Firebase's powerful backend services makes it possible to build production-quality applications quickly and efficiently.

Remember, this is just the beginning. The Flutter and Firebase ecosystems are constantly evolving, with new features and improvements being added regularly. Keep learning, experimenting, and building amazing apps!

Building a Full-Stack E-Commerce Web App with MERN Stack

snehaa1989 — Mon, 23 Feb 2026 16:52:57 +0000

In this comprehensive guide, we'll walk through building a complete e-commerce web application from scratch using the MERN stack (MongoDB, Express.js, React, Node.js). By the end of this tutorial, you'll have a fully functional online store with product listings, shopping cart functionality, user authentication, and payment integration.

🛍️ What We'll Build

Our e-commerce app will include:

Product catalog with categories and search
User authentication and authorization
Shopping cart management
Order processing
Payment integration with Stripe
Admin dashboard for product management
Responsive design for mobile and desktop

🛠️ Prerequisites

Before we start, make sure you have:

Node.js (v16 or higher) installed
MongoDB installed or MongoDB Atlas account
Basic knowledge of JavaScript, React, and Node.js
Code editor (VS Code recommended)
Postman for API testing

📁 Project Structure

ecommerce-app/
├── client/                 # React frontend
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── context/
│   │   ├── services/
│   │   └── utils/
│   └── package.json
├── server/                 # Node.js backend
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── middleware/
│   ├── config/
│   └── package.json
└── README.md

🚀 Step 1: Setting Up the Backend

Initialize the Server

mkdir ecommerce-app
cd ecommerce-app
mkdir server
cd server
npm init -y

Install Dependencies

npm install express mongoose cors dotenv bcryptjs jsonwebtoken
npm install stripe nodemailer multer
npm install -D nodemon concurrently

Create Server Structure

// server/index.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(cors());
app.use(express.json());

// Database Connection
mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/ecommerce', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:'));

// Routes
app.use('/api/users', require('./routes/users'));
app.use('/api/products', require('./routes/products'));
app.use('/api/orders', require('./routes/orders'));
app.use('/api/payment', require('./routes/payment'));

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Create User Model

// server/models/User.js
const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  isAdmin: { type: Boolean, default: false },
  address: {
    street: String,
    city: String,
    zipCode: String,
    country: String,
  },
}, { timestamps: true });

userSchema.pre('save', async function(next) {
  if (!this.isModified('password')) return next();
  this.password = await bcrypt.hash(this.password, 12);
  next();
});

userSchema.methods.comparePassword = async function(password) {
  return await bcrypt.compare(password, this.password);
};

module.exports = mongoose.model('User', userSchema);

Create Product Model

// server/models/Product.js
const mongoose = require('mongoose');

const productSchema = new mongoose.Schema({
  name: { type: String, required: true },
  description: { type: String, required: true },
  price: { type: Number, required: true },
  category: { type: String, required: true },
  brand: { type: String, required: true },
  image: { type: String, required: true },
  countInStock: { type: Number, required: true, default: 0 },
  rating: { type: Number, default: 0 },
  numReviews: { type: Number, default: 0 },
  reviews: [{
    name: String,
    rating: Number,
    comment: String,
    user: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
  }],
}, { timestamps: true });

module.exports = mongoose.model('Product', productSchema);

Create Order Model

// server/models/Order.js
const mongoose = require('mongoose');

const orderSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
  orderItems: [{
    name: { type: String, required: true },
    qty: { type: Number, required: true },
    image: { type: String, required: true },
    price: { type: Number, required: true },
    product: { type: mongoose.Schema.Types.ObjectId, ref: 'Product', required: true },
  }],
  shippingAddress: {
    address: { type: String, required: true },
    city: { type: String, required: true },
    postalCode: { type: String, required: true },
    country: { type: String, required: true },
  },
  paymentMethod: { type: String, required: true },
  paymentResult: {
    id: String,
    status: String,
    update_time: String,
    email_address: String,
  },
  itemsPrice: { type: Number, required: true },
  taxPrice: { type: Number, required: true },
  shippingPrice: { type: Number, required: true },
  totalPrice: { type: Number, required: true },
  isPaid: { type: Boolean, default: false },
  paidAt: Date,
  isDelivered: { type: Boolean, default: false },
  deliveredAt: Date,
}, { timestamps: true });

module.exports = mongoose.model('Order', orderSchema);

Create Authentication Routes

// server/routes/users.js
const express = require('express');
const jwt = require('jsonwebtoken');
const User = require('../models/User');
const auth = require('../middleware/auth');

const router = express.Router();

// Register User
router.post('/register', async (req, res) => {
  try {
    const { name, email, password } = req.body;

    const userExists = await User.findOne({ email });
    if (userExists) {
      return res.status(400).json({ message: 'User already exists' });
    }

    const user = await User.create({ name, email, password });

    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, {
      expiresIn: '30d',
    });

    res.status(201).json({
      _id: user._id,
      name: user.name,
      email: user.email,
      isAdmin: user.isAdmin,
      token,
    });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// Login User
router.post('/login', async (req, res) => {
  try {
    const { email, password } = req.body;

    const user = await User.findOne({ email });
    if (!user || !(await user.comparePassword(password))) {
      return res.status(401).json({ message: 'Invalid email or password' });
    }

    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, {
      expiresIn: '30d',
    });

    res.json({
      _id: user._id,
      name: user.name,
      email: user.email,
      isAdmin: user.isAdmin,
      token,
    });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// Get User Profile
router.get('/profile', auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id);
    if (user) {
      res.json({
        _id: user._id,
        name: user.name,
        email: user.email,
        isAdmin: user.isAdmin,
        address: user.address,
      });
    } else {
      res.status(404).json({ message: 'User not found' });
    }
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

module.exports = router;

Create Product Routes

// server/routes/products.js
const express = require('express');
const Product = require('../models/Product');
const auth = require('../middleware/auth');
const admin = require('../middleware/admin');

const router = express.Router();

// Get All Products
router.get('/', async (req, res) => {
  try {
    const pageSize = 10;
    const page = Number(req.query.pageNumber) || 1;
    const keyword = req.query.keyword
      ? {
          name: {
            $regex: req.query.keyword,
            $options: 'i',
          },
        }
      : {};

    const count = await Product.countDocuments({ ...keyword });
    const products = await Product.find({ ...keyword })
      .limit(pageSize)
      .skip(pageSize * (page - 1));

    res.json({ products, page, pages: Math.ceil(count / pageSize) });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// Get Single Product
router.get('/:id', async (req, res) => {
  try {
    const product = await Product.findById(req.params.id);
    if (product) {
      res.json(product);
    } else {
      res.status(404).json({ message: 'Product not found' });
    }
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// Create Product (Admin Only)
router.post('/', auth, admin, async (req, res) => {
  try {
    const product = new Product({
      name: 'Sample Product',
      price: 0,
      user: req.user._id,
      image: '/images/sample.jpg',
      brand: 'Sample Brand',
      category: 'Sample Category',
      countInStock: 0,
      numReviews: 0,
      description: 'Sample description',
    });

    const createdProduct = await product.save();
    res.status(201).json(createdProduct);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// Update Product (Admin Only)
router.put('/:id', auth, admin, async (req, res) => {
  try {
    const { name, price, description, image, brand, category, countInStock } = req.body;

    const product = await Product.findById(req.params.id);
    if (product) {
      product.name = name;
      product.price = price;
      product.description = description;
      product.image = image;
      product.brand = brand;
      product.category = category;
      product.countInStock = countInStock;

      const updatedProduct = await product.save();
      res.json(updatedProduct);
    } else {
      res.status(404).json({ message: 'Product not found' });
    }
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// Delete Product (Admin Only)
router.delete('/:id', auth, admin, async (req, res) => {
  try {
    const product = await Product.findById(req.params.id);
    if (product) {
      await product.remove();
      res.json({ message: 'Product removed' });
    } else {
      res.status(404).json({ message: 'Product not found' });
    }
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

// Create Product Review
router.post('/:id/reviews', auth, async (req, res) => {
  try {
    const { rating, comment } = req.body;

    const product = await Product.findById(req.params.id);
    if (product) {
      const alreadyReviewed = product.reviews.find(
        (r) => r.user.toString() === req.user._id.toString()
      );

      if (alreadyReviewed) {
        return res.status(400).json({ message: 'Product already reviewed' });
      }

      const review = {
        name: req.user.name,
        rating: Number(rating),
        comment,
        user: req.user._id,
      };

      product.reviews.push(review);
      product.numReviews = product.reviews.length;
      product.rating = product.reviews.reduce((acc, item) => item.rating + acc, 0) / product.reviews.length;

      await product.save();
      res.status(201).json({ message: 'Review added' });
    } else {
      res.status(404).json({ message: 'Product not found' });
    }
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

module.exports = router;

🎨 Step 2: Setting Up the Frontend

Initialize React App

cd ..
npx create-react-app client
cd client

Install Frontend Dependencies

npm install axios react-router-dom react-bootstrap bootstrap
npm install @reduxjs/toolkit react-redux react-toastify

Create Redux Store

// client/src/store.js
import { configureStore } from '@reduxjs/toolkit';
import productSlice from './slices/productSlice';
import cartSlice from './slices/cartSlice';
import userSlice from './slices/userSlice';

export const store = configureStore({
  reducer: {
    products: productSlice,
    cart: cartSlice,
    user: userSlice,
  },
});

Create Product Slice

// client/src/slices/productSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

const initialState = {
  products: [],
  product: {},
  loading: false,
  error: null,
  page: 1,
  pages: 1,
};

export const listProducts = createAsyncThunk(
  'products/listProducts',
  async ({ keyword = '', pageNumber = 1 }) => {
    const { data } = await axios.get(
      `/api/products?keyword=${keyword}&pageNumber=${pageNumber}`
    );
    return data;
  }
);

export const listProductDetails = createAsyncThunk(
  'products/listProductDetails',
  async (id) => {
    const { data } = await axios.get(`/api/products/${id}`);
    return data;
  }
);

const productSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(listProducts.pending, (state) => {
        state.loading = true;
      })
      .addCase(listProducts.fulfilled, (state, action) => {
        state.loading = false;
        state.products = action.payload.products;
        state.page = action.payload.page;
        state.pages = action.payload.pages;
      })
      .addCase(listProducts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      })
      .addCase(listProductDetails.pending, (state) => {
        state.loading = true;
      })
      .addCase(listProductDetails.fulfilled, (state, action) => {
        state.loading = false;
        state.product = action.payload;
      })
      .addCase(listProductDetails.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export default productSlice.reducer;

Create Cart Slice

// client/src/slices/cartSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  cartItems: localStorage.getItem('cartItems')
    ? JSON.parse(localStorage.getItem('cartItems'))
    : [],
  shippingAddress: localStorage.getItem('shippingAddress')
    ? JSON.parse(localStorage.getItem('shippingAddress'))
    : {},
  paymentMethod: localStorage.getItem('paymentMethod')
    ? localStorage.getItem('paymentMethod')
    : '',
};

const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addToCart: (state, action) => {
      const item = action.payload;
      const existItem = state.cartItems.find((x) => x.product === item.product);

      if (existItem) {
        state.cartItems = state.cartItems.map((x) =>
          x.product === existItem.product ? item : x
        );
      } else {
        state.cartItems = [...state.cartItems, item];
      }
      localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
    },
    removeFromCart: (state, action) => {
      state.cartItems = state.cartItems.filter((x) => x.product !== action.payload);
      localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
    },
    saveShippingAddress: (state, action) => {
      state.shippingAddress = action.payload;
      localStorage.setItem('shippingAddress', JSON.stringify(action.payload));
    },
    savePaymentMethod: (state, action) => {
      state.paymentMethod = action.payload;
      localStorage.setItem('paymentMethod', action.payload);
    },
    clearCartItems: (state) => {
      state.cartItems = [];
      localStorage.setItem('cartItems', JSON.stringify([]));
    },
  },
});

export const {
  addToCart,
  removeFromCart,
  saveShippingAddress,
  savePaymentMethod,
  clearCartItems,
} = cartSlice.actions;

export default cartSlice.reducer;

Create Product Components

// client/src/components/Product.jsx
import React from 'react';
import { Card, Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Rating from './Rating';

const Product = ({ product }) => {
  return (
    <Card className="my-3 p-3 rounded">
      <Link to={`/product/${product._id}`}>
        <Card.Img src={product.image} variant="top" />
      </Link>
      <Card.Body>
        <Link to={`/product/${product._id}`}>
          <Card.Title as="div">
            <strong>{product.name}</strong>
          </Card.Title>
        </Link>
        <Card.Text as="div">
          <Rating
            value={product.rating}
            text={`${product.numReviews} reviews`}
          />
        </Card.Text>
        <Card.Text as="h3">${product.price}</Card.Text>
      </Card.Body>
    </Card>
  );
};

export default Product;

// client/src/components/Rating.jsx
import React from 'react';
import { FaStar, FaStarHalfAlt, FaRegStar } from 'react-icons/fa';

const Rating = ({ value, text, color }) => {
  return (
    <div className="rating">
      <span>
        {value >= 1 ? (
          <FaStar />
        ) : value >= 0.5 ? (
          <FaStarHalfAlt />
        ) : (
          <FaRegStar />
        )}
      </span>
      <span>
        {value >= 2 ? (
          <FaStar />
        ) : value >= 1.5 ? (
          <FaStarHalfAlt />
        ) : (
          <FaRegStar />
        )}
      </span>
      <span>
        {value >= 3 ? (
          <FaStar />
        ) : value >= 2.5 ? (
          <FaStarHalfAlt />
        ) : (
          <FaRegStar />
        )}
      </span>
      <span>
        {value >= 4 ? (
          <FaStar />
        ) : value >= 3.5 ? (
          <FaStarHalfAlt />
        ) : (
          <FaRegStar />
        )}
      </span>
      <span>
        {value >= 5 ? (
          <FaStar />
        ) : value >= 4.5 ? (
          <FaStarHalfAlt />
        ) : (
          <FaRegStar />
        )}
      </span>
      <span>{text && text}</span>
    </div>
  );
};

export default Rating;

Create Product List Page

// client/src/pages/HomePage.jsx
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Row, Col } from 'react-bootstrap';
import Product from '../components/Product';
import { listProducts } from '../slices/productSlice';
import Loader from '../components/Loader';
import Message from '../components/Message';

const HomePage = () => {
  const dispatch = useDispatch();
  const { loading, error, products } = useSelector((state) => state.products);

  useEffect(() => {
    dispatch(listProducts());
  }, [dispatch]);

  return (
    <>
      <h1>Latest Products</h1>
      {loading ? (
        <Loader />
      ) : error ? (
        <Message variant="danger">{error}</Message>
      ) : (
        <Row>
          {products.map((product) => (
            <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
              <Product product={product} />
            </Col>
          ))}
        </Row>
      )}
    </>
  );
};

export default HomePage;

Create Shopping Cart Page

// client/src/pages/CartPage.jsx
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useNavigate } from 'react-router-dom';
import { Row, Col, ListGroup, Image, Form, Button, Card } from 'react-bootstrap';
import { FaTrash } from 'react-icons/fa';
import { addToCart, removeFromCart } from '../slices/cartSlice';

const CartPage = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const cart = useSelector((state) => state.cart);
  const { cartItems } = cart;

  const addToCartHandler = (product, qty) => {
    dispatch(addToCart({ ...product, qty }));
  };

  const removeFromCartHandler = (id) => {
    dispatch(removeFromCart(id));
  };

  const checkoutHandler = () => {
    navigate('/login?redirect=/shipping');
  };

  return (
    <Row>
      <Col md={8}>
        <h1>Shopping Cart</h1>
        {cartItems.length === 0 ? (
          <Message>
            Your cart is empty <Link to="/">Go Back</Link>
          </Message>
        ) : (
          <ListGroup variant="flush">
            {cartItems.map((item) => (
              <ListGroup.Item key={item.product}>
                <Row>
                  <Col md={2}>
                    <Image src={item.image} alt={item.name} fluid rounded />
                  </Col>
                  <Col md={3}>
                    <Link to={`/product/${item.product}`}>{item.name}</Link>
                  </Col>
                  <Col md={2}>${item.price}</Col>
                  <Col md={2}>
                    <Form.Control
                      as="select"
                      value={item.qty}
                      onChange={(e) =>
                        addToCartHandler(item, Number(e.target.value))
                      }
                    >
                      {[...Array(item.countInStock).keys()].map((x) => (
                        <option key={x + 1} value={x + 1}>
                          {x + 1}
                        </option>
                      ))}
                    </Form.Control>
                  </Col>
                  <Col md={2}>
                    <Button
                      type="button"
                      variant="light"
                      onClick={() => removeFromCartHandler(item.product)}
                    >
                      <FaTrash />
                    </Button>
                  </Col>
                </Row>
              </ListGroup.Item>
            ))}
          </ListGroup>
        )}
      </Col>
      <Col md={4}>
        <Card>
          <ListGroup variant="flush">
            <ListGroup.Item>
              <h2>
                Subtotal ({cartItems.reduce((acc, item) => acc + item.qty, 0)}) items
              </h2>
              $
              {cartItems
                .reduce((acc, item) => acc + item.qty * item.price, 0)
                .toFixed(2)}
            </ListGroup.Item>
            <ListGroup.Item>
              <Button
                type="button"
                className="btn-block"
                disabled={cartItems.length === 0}
                onClick={checkoutHandler}
              >
                Proceed To Checkout
              </Button>
            </ListGroup.Item>
          </ListGroup>
        </Card>
      </Col>
    </Row>
  );
};

export default CartPage;

💳 Step 3: Payment Integration with Stripe

Install Stripe Dependencies

npm install stripe @stripe/stripe-js

Create Payment Route

// server/routes/payment.js
const express = require('express');
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
const router = express.Router();

router.post('/create-checkout-session', async (req, res) => {
  try {
    const { cartItems } = req.body;

    const line_items = cartItems.map((item) => ({
      price_data: {
        currency: 'usd',
        product_data: {
          name: item.name,
          images: [item.image],
        },
        unit_amount: item.price * 100,
      },
      quantity: item.qty,
    }));

    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items,
      mode: 'payment',
      success_url: `${process.env.CLIENT_URL}/success`,
      cancel_url: `${process.env.CLIENT_URL}/cart`,
    });

    res.json({ id: session.id });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

module.exports = router;

Create Payment Component

// client/src/components/CheckoutForm.jsx
import React from 'react';
import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';
import CheckoutForm from './CheckoutForm';

const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);

const Payment = () => {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

export default Payment;

🚀 Step 4: Deployment

Environment Variables

Create .env files for both client and server:

# server/.env
MONGODB_URI=mongodb://localhost:27017/ecommerce
JWT_SECRET=your_jwt_secret
STRIPE_SECRET_KEY=your_stripe_secret_key
CLIENT_URL=http://localhost:3000

# client/.env
REACT_APP_API_URL=http://localhost:5000
REACT_APP_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key

Deploy to Heroku

# Install Heroku CLI
npm install -g heroku

# Login to Heroku
heroku login

# Create Heroku app
heroku create your-ecommerce-app

# Set environment variables
heroku config:set MONGODB_URI=your_mongodb_atlas_uri
heroku config:set JWT_SECRET=your_jwt_secret
heroku config:set STRIPE_SECRET_KEY=your_stripe_secret_key

# Deploy
git subtree push --prefix server heroku main

🎉 Conclusion

Congratulations! You've successfully built a full-featured e-commerce application using the MERN stack. This application includes:

✅ User authentication and authorization

✅ Product management with categories and search

✅ Shopping cart functionality

✅ Order processing

✅ Payment integration with Stripe

✅ Responsive design

✅ Admin dashboard capabilities

📚 Next Steps

To enhance your e-commerce application, consider adding:

Real-time inventory management
Advanced search and filtering
Customer reviews and ratings
Email notifications
Analytics dashboard
Social media integration
Multi-language support
Progressive Web App (PWA) features

🛠️ Technologies Used

MongoDB: NoSQL database for storing products, users, and orders
Express.js: Backend framework for RESTful APIs
React: Frontend library for building user interfaces
Node.js: JavaScript runtime for server-side development
Redux: State management for the React application
Stripe: Payment processing platform
Bootstrap: CSS framework for responsive design
JWT: Authentication tokens for secure user sessions

📝 Final Thoughts

Building an e-commerce application with the MERN stack provides a solid foundation for understanding full-stack web development. The skills you've learned here are transferable to many other types of web applications.

Remember to always prioritize security, performance, and user experience when building production applications. Happy coding! 🚀

Building a Real-Time Video Conferencing Web App with WebRTC, Node.js, and Socket.IO

snehaa1989 — Mon, 23 Feb 2026 16:42:36 +0000

Introduction

Video conferencing has become essential in today's digital world. In this tutorial, we'll build a fully functional video conferencing application using WebRTC for peer-to-peer video streaming, Node.js for the backend, and Socket.IO for real-time signaling.

Prerequisites

Basic knowledge of JavaScript, Node.js, and HTML/CSS
Node.js installed on your machine
Understanding of client-server architecture

What We'll Build

A video conferencing app with:

Multiple participant video streams
Audio/video controls
Room-based meetings
Real-time participant management

Project Structure

video-conferencing/
├── server/
│   ├── package.json
│   ├── server.js
│   └── public/
│       ├── index.html
│       ├── style.css
│       └── client.js

Step 1: Setting Up the Backend

First, let's create our Node.js server with Express and Socket.IO:

mkdir server && cd server
npm init -y
npm install express socket.io

server.js:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.use(express.static('public'));

const rooms = {};

io.on('connection', (socket) => {
    console.log('User connected:', socket.id);

    socket.on('join-room', (roomId, userId) => {
        socket.join(roomId);

        if (!rooms[roomId]) {
            rooms[roomId] = [];
        }

        rooms[roomId].push(userId);

        socket.to(roomId).emit('user-connected', userId);

        socket.on('disconnect', () => {
            socket.to(roomId).emit('user-disconnected', userId);
            rooms[roomId] = rooms[roomId].filter(id => id !== userId);
        });
    });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

Step 2: Creating the Frontend

public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Conferencing App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Video Conference Room</h1>
            <div class="room-info">
                <span id="room-id"></span>
                <span id="participant-count">1 participant</span>
            </div>
        </header>

        <main>
            <div class="video-grid" id="video-grid">
                <!-- Local video will be added here -->
            </div>

            <div class="controls">
                <button id="mute-btn">🎤 Mute</button>
                <button id="video-btn">📹 Video Off</button>
                <button id="share-screen-btn">🖥️ Share Screen</button>
                <button id="leave-btn">📞 Leave</button>
            </div>
        </main>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script src="client.js"></script>
</body>
</html>

public/style.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #1a1a2e;
    color: white;
    height: 100vh;
    overflow: hidden;
}

.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    background: #16213e;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.room-info {
    display: flex;
    gap: 2rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.video-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    overflow-y: auto;
}

.video-container {
    position: relative;
    background: #0f3460;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    background: #16213e;
    border-radius: 8px;
}

.controls button {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 6px;
    background: #e94560;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.controls button:hover {
    background: #c23652;
    transform: translateY(-2px);
}

.controls button.active {
    background: #27ae60;
}

.controls button.danger {
    background: #e74c3c;
}

Step 3: Implementing WebRTC Logic

public/client.js:

const socket = io();
const videoGrid = document.getElementById('video-grid');
const roomId = window.location.pathname.split('/')[1] || 'default-room';
const userId = Math.random().toString(36).substr(2, 9);

document.getElementById('room-id').textContent = `Room: ${roomId}`;

let localStream;
let peerConnections = {};
let isMuted = false;
let isVideoOff = false;

// WebRTC configuration
const configuration = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' }
    ]
};

// Initialize local media
async function initializeMedia() {
    try {
        localStream = await navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        });

        const localVideo = createVideoElement(userId, 'You', true);
        localVideo.srcObject = localStream;

        socket.emit('join-room', roomId, userId);
    } catch (error) {
        console.error('Error accessing media devices:', error);
        alert('Unable to access camera/microphone');
    }
}

// Create video element
function createVideoElement(userId, label, isLocal = false) {
    const videoContainer = document.createElement('div');
    videoContainer.className = 'video-container';
    videoContainer.id = `video-${userId}`;

    const video = document.createElement('video');
    video.autoplay = true;
    video.muted = isLocal;
    video.playsinline = true;

    const videoLabel = document.createElement('div');
    videoLabel.className = 'video-label';
    videoLabel.textContent = label;

    videoContainer.appendChild(video);
    videoContainer.appendChild(videoLabel);
    videoGrid.appendChild(videoContainer);

    return video;
}

// Create peer connection
function createPeerConnection(userId) {
    const pc = new RTCPeerConnection(configuration);

    // Add local stream to peer connection
    localStream.getTracks().forEach(track => {
        pc.addTrack(track, localStream);
    });

    // Handle incoming streams
    pc.ontrack = (event) => {
        const [remoteStream] = event.streams;
        const remoteVideo = document.getElementById(`video-${userId}`);
        if (remoteVideo && !remoteVideo.srcObject) {
            remoteVideo.srcObject = remoteStream;
        }
    };

    // Handle ICE candidates
    pc.onicecandidate = (event) => {
        if (event.candidate) {
            socket.emit('ice-candidate', {
                candidate: event.candidate,
                to: userId
            });
        }
    };

    return pc;
}

// Socket event handlers
socket.on('user-connected', async (userId) => {
    console.log('User connected:', userId);

    const pc = createPeerConnection(userId);
    peerConnections[userId] = pc;

    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);

    socket.emit('offer', {
        offer: offer,
        to: userId
    });

    createVideoElement(userId, `User ${userId.substr(0, 5)}`);
});

socket.on('user-disconnected', (userId) => {
    console.log('User disconnected:', userId);

    const videoElement = document.getElementById(`video-${userId}`);
    if (videoElement) {
        videoElement.remove();
    }

    if (peerConnections[userId]) {
        peerConnections[userId].close();
        delete peerConnections[userId];
    }
});

socket.on('offer', async ({ offer, from }) => {
    if (!peerConnections[from]) {
        peerConnections[from] = createPeerConnection(from);
    }

    const pc = peerConnections[from];
    await pc.setRemoteDescription(new RTCSessionDescription(offer));

    const answer = await pc.createAnswer();
    await pc.setLocalDescription(answer);

    socket.emit('answer', {
        answer: answer,
        to: from
    });
});

socket.on('answer', async ({ answer, from }) => {
    const pc = peerConnections[from];
    await pc.setRemoteDescription(new RTCSessionDescription(answer));
});

socket.on('ice-candidate', async ({ candidate, from }) => {
    const pc = peerConnections[from];
    if (pc) {
        await pc.addIceCandidate(new RTCIceCandidate(candidate));
    }
});

// Control buttons
document.getElementById('mute-btn').addEventListener('click', () => {
    isMuted = !isMuted;
    localStream.getAudioTracks().forEach(track => {
        track.enabled = !isMuted;
    });

    const btn = document.getElementById('mute-btn');
    btn.textContent = isMuted ? '🔇 Unmute' : '🎤 Mute';
    btn.classList.toggle('active', isMuted);
});

document.getElementById('video-btn').addEventListener('click', () => {
    isVideoOff = !isVideoOff;
    localStream.getVideoTracks().forEach(track => {
        track.enabled = !isVideoOff;
    });

    const btn = document.getElementById('video-btn');
    btn.textContent = isVideoOff ? '📹 Video On' : '📹 Video Off';
    btn.classList.toggle('active', isVideoOff);
});

document.getElementById('share-screen-btn').addEventListener('click', async () => {
    try {
        const screenStream = await navigator.mediaDevices.getDisplayMedia({
            video: true
        });

        const videoTrack = screenStream.getVideoTracks()[0];

        // Replace video track in all peer connections
        Object.values(peerConnections).forEach(pc => {
            const sender = pc.getSenders().find(s => 
                s.track && s.track.kind === 'video'
            );
            if (sender) {
                sender.replaceTrack(videoTrack);
            }
        });

        videoTrack.onended = () => {
            // Restore camera video
            localStream.getVideoTracks().forEach(track => {
                Object.values(peerConnections).forEach(pc => {
                    const sender = pc.getSenders().find(s => 
                        s.track && s.track.kind === 'video'
                    );
                    if (sender) {
                        sender.replaceTrack(track);
                    }
                });
            });
        };

    } catch (error) {
        console.error('Error sharing screen:', error);
    }
});

document.getElementById('leave-btn').addEventListener('click', () => {
    window.location.href = '/';
});

// Update participant count
function updateParticipantCount() {
    const count = document.querySelectorAll('.video-container').length;
    document.getElementById('participant-count').textContent = 
        `${count} participant${count !== 1 ? 's' : ''}`;
}

// Initialize the application
initializeMedia();

// Update participant count periodically
setInterval(updateParticipantCount, 1000);

Step 4: Enhanced Server with Signaling

Let's update our server to handle WebRTC signaling:

// Add these event handlers to your existing server.js

socket.on('offer', ({ offer, to }) => {
    socket.to(to).emit('offer', {
        offer: offer,
        from: socket.id
    });
});

socket.on('answer', ({ answer, to }) => {
    socket.to(to).emit('answer', {
        answer: answer,
        from: socket.id
    });
});

socket.on('ice-candidate', ({ candidate, to }) => {
    socket.to(to).emit('ice-candidate', {
        candidate: candidate,
        from: socket.id
    });
});

Step 5: Adding Room Management

Create a simple landing page for room creation:

public/room.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create or Join Room</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }

        .container {
            background: white;
            padding: 3rem;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 400px;
            width: 90%;
        }

        h1 {
            color: #333;
            margin-bottom: 2rem;
        }

        .input-group {
            margin-bottom: 1.5rem;
        }

        input {
            width: 100%;
            padding: 1rem;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        input:focus {
            outline: none;
            border-color: #667eea;
        }

        button {
            width: 100%;
            padding: 1rem;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
            margin-bottom: 1rem;
        }

        button:hover {
            background: #5a67d8;
        }

        .secondary {
            background: #48bb78;
        }

        .secondary:hover {
            background: #38a169;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📹 Video Conference</h1>

        <div class="input-group">
            <input type="text" id="room-input" placeholder="Enter room name or ID">
        </div>

        <button onclick="createRoom()">Create New Room</button>
        <button class="secondary" onclick="joinRoom()">Join Existing Room</button>

        <div id="room-info" style="margin-top: 2rem; display: none;">
            <p style="color: #666;">Share this room ID with others:</p>
            <p id="room-id-display" style="font-weight: bold; color: #667eea; font-size: 1.2rem;"></p>
        </div>
    </div>

    <script>
        function generateRoomId() {
            return Math.random().toString(36).substr(2, 9).toUpperCase();
        }

        function createRoom() {
            const roomId = generateRoomId();
            document.getElementById('room-input').value = roomId;
            document.getElementById('room-info').style.display = 'block';
            document.getElementById('room-id-display').textContent = roomId;

            setTimeout(() => {
                window.location.href = `/${roomId}`;
            }, 2000);
        }

        function joinRoom() {
            const roomId = document.getElementById('room-input').value.trim();
            if (roomId) {
                window.location.href = `/${roomId}`;
            } else {
                alert('Please enter a room ID');
            }
        }

        // Check if there's a room in the URL
        const pathRoom = window.location.pathname.substr(1);
        if (pathRoom) {
            window.location.href = `/${pathRoom}`;
        }
    </script>
</body>
</html>

Update your server.js to serve the room page:

// Add this route before the static middleware
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/room.html');
});

// Update the existing route for room pages
app.get('/:room', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

Key Concepts Explained

WebRTC (Web Real-Time Communication)

WebRTC enables peer-to-peer audio, video, and data sharing between browsers without requiring plugins. Key components:

RTCPeerConnection: The main interface for WebRTC connections
MediaStream: Represents audio/video streams
ICE (Interactive Connectivity Establishment): Handles NAT traversal
STUN/TURN servers: Help establish connections across networks

Socket.IO Signaling

WebRTC requires a signaling server to exchange connection information:

Offer/Answer: One peer creates an offer, the other responds with an answer
ICE Candidates: Network connection information exchanged between peers
Room Management: Socket.IO rooms help organize participants

Peer Connection Flow

User A creates RTCPeerConnection
User A creates offer and sends via Socket.IO
User B receives offer, creates answer
Both exchange ICE candidates
Direct peer-to-peer connection established

Advanced Features to Consider

Recording: Use MediaRecorder API to record sessions
Chat: Add text messaging with Socket.IO
File Sharing: Implement file transfer capabilities
Breakout Rooms: Create sub-rooms within main conference
Virtual Backgrounds: Use canvas manipulation for backgrounds
Bandwidth Management: Adapt video quality based on network conditions

Deployment Considerations

HTTPS Required: WebRTC only works on secure connections
STUN/TURN Servers: Consider using paid TURN servers for better connectivity
Scaling: For large applications, consider Redis for Socket.IO scaling
Monitoring: Implement logging and monitoring for connection quality

Troubleshooting Common Issues

Connection Failed: Check STUN/TURN server configuration
No Video/Audio: Ensure browser permissions are granted
One-Way Audio: Check NAT traversal and firewall settings
Poor Quality: Implement bandwidth adaptation

Conclusion

We've built a functional video conferencing application using modern web technologies. This foundation can be extended with additional features like recording, chat, and advanced room management.

The combination of WebRTC for peer-to-peer media streaming and Socket.IO for signaling provides a robust architecture for real-time communication applications.

Next Steps

Add user authentication
Implement persistent room storage
Add mobile responsiveness
Integrate with calendar systems
Add analytics and usage tracking