DEV Community: snehaa1989

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