How to Master Web Development with Vibe Coding: Complete Career Guide [₹10L Average Salary]

 Phase 1: Web Development Fundamentals and Design Foundations (Month 1-2)

HTML5 and Semantic Markup (2-3 weeks)
Building solid foundation in modern HTML is essential for all web development:

• Semantic HTML Structure – Document outline, headings, sections, articles, navigation, accessibility
• Forms and Input Elements – Form validation, input types, form handling, user experience optimization
• HTML5 APIs – Local storage, geolocation, canvas, video/audio, drag and drop functionality
• SEO and Accessibility – Meta tags, structured data, ARIA attributes, screen reader compatibility

CSS3 and Modern Styling (3-4 weeks)

• Layout Systems – Flexbox mastery, CSS Grid, positioning, responsive layout patterns
• Modern CSS Features – Custom properties, calc(), clamp(), container queries, CSS animations
• Responsive Design – Media queries, mobile-first approach, breakpoint strategies, fluid design
• CSS Methodologies – BEM naming, component styling, CSS-in-JS concepts, maintainable code

JavaScript Fundamentals (3-4 weeks)

• Core JavaScript – Variables, data types, functions, objects, arrays, control structures
• ES6+ Features – Arrow functions, destructuring, template literals, modules, promises, async/await
• DOM Manipulation – Element selection, event handling, dynamic content creation, user interactions
• Error Handling – Try-catch blocks, debugging techniques, browser developer tools mastery

Foundation Projects:

1. Responsive Portfolio Website – Personal portfolio with modern CSS, interactive elements, mobile optimization
2. Interactive Landing Page – Business landing page with animations, form handling, performance optimization

3. JavaScript Calculator – Advanced calculator with history, keyboard support, and responsive design

Phase 2: Frontend Framework Mastery with React (Month 2-4)

React Fundamentals and Component Architecture (4-5 weeks)

• Component-Based Thinking – Component design, props, state, lifecycle methods, functional components
• React Hooks – useState, useEffect, useContext, useReducer, custom hooks, hook optimization
• Event Handling – User interactions, form handling, event delegation, synthetic events
• Conditional Rendering – Dynamic content, list rendering, conditional logic, performance considerations

Advanced React Development (4-5 weeks)

Professional React Application Development:

jsx

// Modern React Component with Advanced Patterns

import React, { useState, useEffect, useCallback, useMemo } from ‘react’;

import { useQuery, useMutation, useQueryClient } from ‘@tanstack/react-query’;

import { toast } from ‘react-hot-toast’;

import { useDebounce } from ‘../hooks/useDebounce’;

import { useLocalStorage } from ‘../hooks/useLocalStorage’;

import LoadingSpinner from ‘../components/LoadingSpinner’;

import ErrorBoundary from ‘../components/ErrorBoundary’;

// Custom hook for product management

const useProducts = (searchTerm, category) => {

  const debouncedSearchTerm = useDebounce(searchTerm, 300);

  return useQuery({

    queryKey: [‘products’, debouncedSearchTerm, category],

    queryFn: async () => {

      const params = new URLSearchParams();

      if (debouncedSearchTerm) params.append(‘search’, debouncedSearchTerm);

      if (category) params.append(‘category’, category);

      const response = await fetch(`/api/products?${params}`);

      if (!response.ok) {

        throw new Error(‘Failed to fetch products’);

      }

      return response.json();

    },

    staleTime: 5 * 60 * 1000, // 5 minutes

    cacheTime: 10 * 60 * 1000, // 10 minutes

  });

};

// Main E-commerce Product Catalog Component

const ProductCatalog = () => {

  const [searchTerm, setSearchTerm] = useState(”);

  const [selectedCategory, setSelectedCategory] = useState(”);

  const [sortBy, setSortBy] = useState(‘name’);

  const [viewMode, setViewMode] = useLocalStorage(‘viewMode’, ‘grid’);

  const [favorites, setFavorites] = useLocalStorage(‘favorites’, []);

  const queryClient = useQueryClient();

  // Fetch products with search and filter

  const {

    data: productsData,

    isLoading,

    error,

    refetch

  } = useProducts(searchTerm, selectedCategory);

  // Add to cart mutation

  const addToCartMutation = useMutation({

    mutationFn: async (productId) => {

      const response = await fetch(‘/api/cart’, {

        method: ‘POST’,

        headers: { ‘Content-Type’: ‘application/json’ },

        body: JSON.stringify({ productId, quantity: 1 }),

      });

      if (!response.ok) {

        throw new Error(‘Failed to add to cart’);

      }

      return response.json();

    },

    onSuccess: () => {

      toast.success(‘Product added to cart!’);

      queryClient.invalidateQueries([‘cart’]);

    },

    onError: (error) => {

      toast.error(`Error: ${error.message}`);

    }

  });

  // Toggle favorite product

  const toggleFavorite = useCallback((productId) => {

    setFavorites(prev => {

      if (prev.includes(productId)) {

        return prev.filter(id => id !== productId);

      } else {

        return […prev, productId];

      }

    });

  }, [setFavorites]);

  // Memoized sorted and filtered products

  const sortedProducts = useMemo(() => {

    if (!productsData?.products) return [];

    return […productsData.products].sort((a, b) => {

      switch (sortBy) {

        case ‘price-low’:

          return a.price – b.price;

        case ‘price-high’:

          return b.price – a.price;

        case ‘rating’:

          return b.rating – a.rating;

        case ‘newest’:

          return new Date(b.createdAt) – new Date(a.createdAt);

        default:

          return a.name.localeCompare(b.name);

      }

    });

  }, [productsData?.products, sortBy]);

  // Handle search input

  const handleSearchChange = useCallback((e) => {

    setSearchTerm(e.target.value);

  }, []);

  // Handle category filter

  const handleCategoryChange = useCallback((category) => {

    setSelectedCategory(category);

  }, []);

  if (error) {

    return (

      <div className=”error-container”>

        <h2>Something went wrong</h2>

        <p>{error.message}</p>

        <button onClick={() => refetch()} className=”retry-button”>

          Try Again

        </button>

      </div>

    );

  }

  return (

    <ErrorBoundary>

      <div className=”product-catalog”>

        {/* Search and Filter Header */}

        <div className=”catalog-header”>

          <div className=”search-container”>

            <input

              type=”text”

              placeholder=”Search products…”

              value={searchTerm}

              onChange={handleSearchChange}

              className=”search-input”

            />

          </div>

          <div className=”filter-container”>

            <select

              value={selectedCategory}

              onChange={(e) => handleCategoryChange(e.target.value)}

              className=”category-filter”

            >

              <option value=””>All Categories</option>

              <option value=”electronics”>Electronics</option>

              <option value=”clothing”>Clothing</option>

              <option value=”books”>Books</option>

              <option value=”home”>Home & Garden</option>

            </select>

            <select

              value={sortBy}

              onChange={(e) => setSortBy(e.target.value)}

              className=”sort-filter”

            >

              <option value=”name”>Sort by Name</option>

              <option value=”price-low”>Price: Low to High</option>

              <option value=”price-high”>Price: High to Low</option>

              <option value=”rating”>Highest Rated</option>

              <option value=”newest”>Newest First</option>

            </select>

            <div className=”view-mode-toggle”>

              <button

                onClick={() => setViewMode(‘grid’)}

                className={`view-button ${viewMode === ‘grid’ ? ‘active’ : ”}`}

              >

                Grid

              </button>

              <button

                onClick={() => setViewMode(‘list’)}

                className={`view-button ${viewMode === ‘list’ ? ‘active’ : ”}`}

              >

                List

              </button>

            </div>

          </div>

        </div>

        {/* Product Results */}

        <div className=”catalog-content”>

          {isLoading ? (

            <div className=”loading-container”>

              <LoadingSpinner />

              <p>Loading products…</p>

            </div>

          ) : sortedProducts.length > 0 ? (

            <>

              <div className=”results-count”>

                {productsData.totalCount} products found

              </div>

              <div className={`product-grid ${viewMode}`}>

                {sortedProducts.map(product => (

                  <ProductCard

                    key={product.id}

                    product={product}

                    viewMode={viewMode}

                    isFavorite={favorites.includes(product.id)}

                    onToggleFavorite={() => toggleFavorite(product.id)}

                    onAddToCart={() => addToCartMutation.mutate(product.id)}

                    isAddingToCart={addToCartMutation.isLoading}

                  />

                ))}

              </div>

              {/* Pagination Component */}

              <Pagination

                currentPage={productsData.currentPage}

                totalPages={productsData.totalPages}

                onPageChange={(page) => {

                  // Handle pagination

                }}

              />

            </>

          ) : (

            <div className=”no-results”>

              <h3>No products found</h3>

              <p>Try adjusting your search criteria</p>

            </div>

          )}

        </div>

      </div>

    </ErrorBoundary>

  );

};

// Individual Product Card Component

const ProductCard = React.memo(({

  product,

  viewMode,

  isFavorite,

  onToggleFavorite,

  onAddToCart,

  isAddingToCart

}) => {

  const [imageLoaded, setImageLoaded] = useState(false);

  return (

    <div className={`product-card ${viewMode}`}>

      <div className=”product-image-container”>

        {!imageLoaded && <div className=”image-placeholder”>Loading…</div>}

        <img

          src={product.imageUrl}

          alt={product.name}

          className={`product-image ${imageLoaded ? ‘loaded’ : ”}`}

          onLoad={() => setImageLoaded(true)}

        />

        <button

          onClick={onToggleFavorite}

          className={`favorite-button ${isFavorite ? ‘active’ : ”}`}

          aria-label={isFavorite ? ‘Remove from favorites’ : ‘Add to favorites’}

        >

        </button>

      </div>

      <div className=”product-info”>

        <h3 className=”product-name”>{product.name}</h3>

        <p className=”product-description”>{product.description}</p>

        <div className=”product-rating”>

          <span className=”stars”>

            {‘★’.repeat(Math.floor(product.rating))}

            {‘☆’.repeat(5 – Math.floor(product.rating))}

          </span>

          <span className=”rating-count”>({product.reviewCount} reviews)</span>

        </div>

        <div className=”product-price”>

          {product.originalPrice > product.price && (

            <span className=”original-price”>${product.originalPrice}</span>

          )}

          <span className=”current-price”>${product.price}</span>

          {product.originalPrice > product.price && (

            <span className=”discount”>

              {Math.round(((product.originalPrice – product.price) / product.originalPrice) * 100)}% off

            </span>

          )}

        </div>

        <div className=”product-actions”>

          <button

            onClick={onAddToCart}

            disabled={isAddingToCart || product.stock === 0}

            className=”add-to-cart-button”

          >

            {isAddingToCart ? ‘Adding…’ : ‘Add to Cart’}

          </button>

          {product.stock < 10 && product.stock > 0 && (

            <span className=”low-stock”>Only {product.stock} left!</span>

          )}

          {product.stock === 0 && (

            <span className=”out-of-stock”>Out of Stock</span>

          )}

        </div>

      </div>

    </div>

  );

});

export default ProductCatalog;

State Management and React Ecosystem (2-3 weeks)

• Context API – Global state management, provider patterns, performance optimization
• Redux Toolkit – Modern Redux patterns, slices, RTK Query, middleware integration
• React Router – Navigation, dynamic routing, protected routes, code splitting
• Form Handling – Formik, React Hook Form, validation, user input management

Testing and Quality Assurance (1-2 weeks)

• Jest and React Testing Library – Unit testing, component testing, integration testing
• Testing Strategies – Test-driven development, mocking, snapshot testing, coverage reporting
• Debugging Tools – React DevTools, browser debugging, performance profiling
• Code Quality – ESLint, Prettier, Husky, pre-commit hooks, code review practices

React Projects:

1. E-commerce Product Catalog – Complete shopping application with search, filters, cart, and user accounts
2. Social Media Dashboard – Real-time social platform with posts, comments, likes, and user profiles
3. Task Management Application – Collaborative task manager with teams, projects, and real-time updates

Phase 3: Backend Development and Database Integration (Month 4-5)

Node.js and Express.js Mastery (4-5 weeks)

• Server-Side JavaScript – Node.js fundamentals, event loop, modules, npm ecosystem
• Express Framework – Routing, middleware, error handling, request/response cycle
• API Development – RESTful APIs, HTTP methods, status codes, API documentation
• Authentication and Security – JWT tokens, bcrypt, session management, security best practices

Database Design and Integration (3-4 weeks)

Professional Backend API Development:

javascript

// Advanced Express.js API with MongoDB Integration

const express = require(‘express’);

const mongoose = require(‘mongoose’);

const bcrypt = require(‘bcryptjs’);

const jwt = require(‘jsonwebtoken’);

const rateLimit = require(‘express-rate-limit’);

const helmet = require(‘helmet’);

const cors = require(‘cors’);

const morgan = require(‘morgan’);

const { body, validationResult } = require(‘express-validator’);

const app = express();

// Security and middleware setup

app.use(helmet());

app.use(cors({

  origin: process.env.FRONTEND_URL || ‘http://localhost:3000’,

  credentials: true

}));

app.use(morgan(‘combined’));

app.use(express.json({ limit: ’10mb’ }));

app.use(express.urlencoded({ extended: true }));

// Rate limiting

const limiter = rateLimit({

  windowMs: 15 * 60 * 1000, // 15 minutes

  max: 100 // limit each IP to 100 requests per windowMs

});

app.use(‘/api/’, limiter);

// MongoDB connection with error handling

mongoose.connect(process.env.MONGODB_URI || ‘mongodb://localhost:27017/vibeapp’, {

  useNewUrlParser: true,

  useUnifiedTopology: true,

})

.then(() => console.log(‘Connected to MongoDB’))

.catch(err => {

  console.error(‘MongoDB connection error:’, err);

  process.exit(1);

});

// User Model with advanced validation

const userSchema = new mongoose.Schema({

  username: {

    type: String,

    required: [true, ‘Username is required’],

    unique: true,

    trim: true,

    minlength: [3, ‘Username must be at least 3 characters’],

    maxlength: [20, ‘Username cannot exceed 20 characters’]

  },

  email: {

    type: String,

    required: [true, ‘Email is required’],

    unique: true,

    lowercase: true,

    validate: {

      validator: function(email) {

        return /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(email);

      },

      message: ‘Please enter a valid email’

    }

  },

  password: {

    type: String,

    required: [true, ‘Password is required’],

    minlength: [6, ‘Password must be at least 6 characters’],

    select: false // Don’t return password by default

  },

  profile: {

    firstName: { type: String, trim: true },

    lastName: { type: String, trim: true },

    avatar: { type: String },

    bio: { type: String, maxlength: 500 },

    location: { type: String },

    website: { type: String }

  },

  role: {

    type: String,

    enum: [‘user’, ‘admin’, ‘moderator’],

    default: ‘user’

  },

  isActive: {

    type: Boolean,

    default: true

  },

  emailVerified: {

    type: Boolean,

    default: false

  },

  lastLogin: {

    type: Date

  },

  loginAttempts: {

    type: Number,

    default: 0

  },

  lockUntil: {

    type: Date

  }

}, {

  timestamps: true,

  toJSON: { 

    transform: function(doc, ret) {

      delete ret.password;

      delete ret.__v;

      return ret;

    }

  }

});

// Password hashing middleware

userSchema.pre(‘save’, async function(next) {

  if (!this.isModified(‘password’)) return next();

  try {

    const salt = await bcrypt.genSalt(12);

    this.password = await bcrypt.hash(this.password, salt);

    next();

  } catch (error) {

    next(error);

  }

});

// Password comparison method

userSchema.methods.comparePassword = async function(candidatePassword) {

  try {

    return await bcrypt.compare(candidatePassword, this.password);

  } catch (error) {

    throw new Error(‘Password comparison failed’);

  }

};

// Account lockout methods

userSchema.virtual(‘isLocked’).get(function() {

  return !!(this.lockUntil && this.lockUntil > Date.now());

});

userSchema.methods.incLoginAttempts = function() {

  // If we have a previous lock that has expired, restart at 1

  if (this.lockUntil && this.lockUntil < Date.now()) {

    return this.updateOne({

      $unset: { lockUntil: 1 },

      $set: { loginAttempts: 1 }

    });

  }

  const updates = { $inc: { loginAttempts: 1 } };

  // Lock account after 5 attempts for 2 hours

  if (this.loginAttempts + 1 >= 5 && !this.isLocked) {

    updates.$set = { lockUntil: Date.now() + 2 * 60 * 60 * 1000 };

  }

  return this.updateOne(updates);

};

userSchema.methods.resetLoginAttempts = function() {

  return this.updateOne({

    $unset: { loginAttempts: 1, lockUntil: 1 }

  });

};

const User = mongoose.model(‘User’, userSchema);

// Product Model for e-commerce functionality

const productSchema = new mongoose.Schema({

  name: {

    type: String,

    required: [true, ‘Product name is required’],

    trim: true,

    maxlength: [100, ‘Product name cannot exceed 100 characters’]

  },

  description: {

    type: String,

    required: [true, ‘Product description is required’],

    maxlength: [2000, ‘Description cannot exceed 2000 characters’]

  },

  price: {

    type: Number,

    required: [true, ‘Price is required’],

    min: [0, ‘Price cannot be negative’]

  },

  originalPrice: {

    type: Number,

    min: [0, ‘Original price cannot be negative’]

  },

  category: {

    type: mongoose.Schema.Types.ObjectId,

    ref: ‘Category’,

    required: [true, ‘Category is required’]

  },

  tags: [{

    type: String,

    trim: true

  }],

  images: [{

    url: { type: String, required: true },

    alt: { type: String },

    isPrimary: { type: Boolean, default: false }

  }],

  inventory: {

    stock: { type: Number, default: 0, min: 0 },

    sku: { type: String, unique: true },

    trackInventory: { type: Boolean, default: true }

  },

  shipping: {

    weight: { type: Number, min: 0 },

    dimensions: {

      length: Number,

      width: Number,

      height: Number

    },

    freeShipping: { type: Boolean, default: false },

    shippingCost: { type: Number, min: 0 }

  },

  seo: {

    metaTitle: { type: String, maxlength: 60 },

    metaDescription: { type: String, maxlength: 160 },

    slug: { type: String, unique: true }

  },

  rating: {

    average: { type: Number, default: 0, min: 0, max: 5 },

    count: { type: Number, default: 0 }

  },

  isActive: {

    type: Boolean,

    default: true

  },

  createdBy: {

    type: mongoose.Schema.Types.ObjectId,

    ref: ‘User’,

    required: true

  }

}, {

  timestamps: true

});

// Generate slug before saving

productSchema.pre(‘save’, function(next) {

  if (this.isModified(‘name’)) {

    this.seo.slug = this.name

      .toLowerCase()

      .replace(/[^a-zA-Z0-9]/g, ‘-‘)

      .replace(/-+/g, ‘-‘)

      .replace(/^-|-$/g, ”);

  }

  next();

});

const Product = mongoose.model(‘Product’, productSchema);

// Authentication middleware

const authMiddleware = async (req, res, next) => {

  try {

    const token = req.header(‘Authorization’)?.replace(‘Bearer ‘, ”);

    if (!token) {

      return res.status(401).json({ 

        success: false, 

        message: ‘Access token is required’ 

      });

    }

    const decoded = jwt.verify(token, process.env.JWT_SECRET || ‘fallback-secret’);

    const user = await User.findById(decoded.id).select(‘+password’);

    if (!user || !user.isActive) {

      return res.status(401).json({ 

        success: false, 

        message: ‘Invalid or inactive user’ 

      });

    }

    req.user = user;

    next();

  } catch (error) {

    return res.status(401).json({ 

      success: false, 

      message: ‘Invalid token’ 

    });

  }

};

// Admin authorization middleware

const adminMiddleware = (req, res, next) => {

  if (req.user.role !== ‘admin’) {

    return res.status(403).json({ 

      success: false, 

      message: ‘Admin access required’ 

    });

  }

  next();

};

// Input validation middleware

const handleValidationErrors = (req, res, next) => {

  const errors = validationResult(req);

  if (!errors.isEmpty()) {

    return res.status(400).json({

      success: false,

      message: ‘Validation failed’,

      errors: errors.array()

    });

  }

  next();

};

// User Registration Endpoint

app.post(‘/api/auth/register’,

  [

    body(‘username’)

      .trim()

      .isLength({ min: 3, max: 20 })

      .withMessage(‘Username must be 3-20 characters’)

      .matches(/^[a-zA-Z0-9_]+$/)

      .withMessage(‘Username can only contain letters, numbers, and underscores’),

    body(’email’)

      .isEmail()

      .normalizeEmail()

      .withMessage(‘Please provide a valid email’),

    body(‘password’)

      .isLength({ min: 6 })

      .withMessage(‘Password must be at least 6 characters’)

      .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/)

      .withMessage(‘Password must contain at least one lowercase letter, uppercase letter, and number’)

  ],

  handleValidationErrors,

  async (req, res) => {

    try {

      const { username, email, password, profile } = req.body;

      // Check if user already exists

      const existingUser = await User.findOne({

        $or: [{ email }, { username }]

      });

      if (existingUser) {

        return res.status(400).json({

          success: false,

          message: existingUser.email === email 

            ? ‘Email is already registered’ 

            : ‘Username is already taken’

        });

      }

      // Create new user

      const user = new User({

        username,

        email,

        password,

        profile: profile || {}

      });

      await user.save();

      // Generate JWT token

      const token = jwt.sign(

        { id: user._id, email: user.email }, 

        process.env.JWT_SECRET || ‘fallback-secret’,

        { expiresIn: ‘7d’ }

      );

      res.status(201).json({

        success: true,

        message: ‘User registered successfully’,

        data: {

          user: {

            id: user._id,

            username: user.username,

            email: user.email,

            profile: user.profile,

            role: user.role

          },

          token

        }

      });

    } catch (error) {

      console.error(‘Registration error:’, error);

      res.status(500).json({

        success: false,

        message: ‘Registration failed’,

        error: process.env.NODE_ENV === ‘development’ ? error.message : ‘Internal server error’

      });

    }

  }

);

// User Login Endpoint

app.post(‘/api/auth/login’,

  [

    body(’email’).isEmail().normalizeEmail().withMessage(‘Please provide a valid email’),

    body(‘password’).notEmpty().withMessage(‘Password is required’)

  ],

  handleValidationErrors,

  async (req, res) => {

    try {

      const { email, password } = req.body;

      // Find user and include password field

      const user = await User.findOne({ email }).select(‘+password’);

      if (!user) {

        return res.status(400).json({

          success: false,

          message: ‘Invalid email or password’

        });

      }

      // Check if account is locked

      if (user.isLocked) {

        return res.status(423).json({

          success: false,

          message: ‘Account is temporarily locked due to too many failed login attempts’

        });

      }

      // Verify password

      const isPasswordValid = await user.comparePassword(password);

      if (!isPasswordValid) {

        await user.incLoginAttempts();

        return res.status(400).json({

          success: false,

          message: ‘Invalid email or password’

        });

      }

      // Reset login attempts on successful login

      if (user.loginAttempts > 0) {

        await user.resetLoginAttempts();

      }

      // Update last login

      user.lastLogin = new Date();

      await user.save();

      // Generate JWT token

      const token = jwt.sign(

        { id: user._id, email: user.email },

        process.env.JWT_SECRET || ‘fallback-secret’,

        { expiresIn: ‘7d’ }

      );

      res.json({

        success: true,

        message: ‘Login successful’,

        data: {

          user: {

            id: user._id,

            username: user.username,

            email: user.email,

            profile: user.profile,

            role: user.role,

            lastLogin: user.lastLogin

          },

          token

        }

      });

    } catch (error) {

      console.error(‘Login error:’, error);

      res.status(500).json({

        success: false,

        message: ‘Login failed’,

        error: process.env.NODE_ENV === ‘development’ ? error.message : ‘Internal server error’

      });

    }

  }

);

// Protected Profile Route

app.get(‘/api/user/profile’, authMiddleware, async (req, res) => {

  try {

    const user = await User.findById(req.user._id);

    res.json({

      success: true,

      data: { user }

    });

  } catch (error) {

    res.status(500).json({

      success: false,

      message: ‘Failed to fetch profile’,

      error: process.env.NODE_ENV === ‘development’ ? error.message : ‘Internal server error’

    });

  }

});

// Product CRUD Operations

app.get(‘/api/products’, async (req, res) => {

  try {

    const page = parseInt(req.query.page) || 1;

    const limit = parseInt(req.query.limit) || 12;

    const skip = (page – 1) * limit;

    const query = { isActive: true };

    // Search functionality

    if (req.query.search) {

      query.$or = [

        { name: { $regex: req.query.search, $options: ‘i’ } },

        { description: { $regex: req.query.search, $options: ‘i’ } },

        { tags: { $in: [new RegExp(req.query.search, ‘i’)] } }

      ];

    }

    // Category filter

    if (req.query.category) {

      query.category = req.query.category;

    }

    // Price range filter

    if (req.query.minPrice || req.query.maxPrice) {

      query.price = {};

      if (req.query.minPrice) query.price.$gte = parseFloat(req.query.minPrice);

      if (req.query.maxPrice) query.price.$lte = parseFloat(req.query.maxPrice);

    }

    // Sorting

    let sortBy = {};

    switch (req.query.sortBy) {

      case ‘price-low’:

        sortBy.price = 1;

        break;

      case ‘price-high’:

        sortBy.price = –1;

        break;

      case ‘rating’:

        sortBy[‘rating.average’] = –1;

        break;

      case ‘newest’:

        sortBy.createdAt = –1;

        break;

      default:

        sortBy.name = 1;

    }

    const [products, totalCount] = await Promise.all([

      Product.find(query)

        .populate(‘category’, ‘name’)

        .populate(‘createdBy’, ‘username’)

        .sort(sortBy)

        .skip(skip)

        .limit(limit),

      Product.countDocuments(query)

    ]);

    res.json({

      success: true,

      data: {

        products,

        pagination: {

          currentPage: page,

          totalPages: Math.ceil(totalCount / limit),

          totalCount,

          hasNext: page < Math.ceil(totalCount / limit),

          hasPrev: page > 1

        }

      }

    });

  } catch (error) {

    console.error(‘Products fetch error:’, error);

    res.status(500).json({

      success: false,

      message: ‘Failed to fetch products’

    });

  }

});

// Global error handler

app.use((error, req, res, next) => {

  console.error(‘Global error handler:’, error);

  // Mongoose validation error

  if (error.name === ‘ValidationError’) {

    const errors = Object.values(error.errors).map(err => err.message);

    return res.status(400).json({

      success: false,

      message: ‘Validation Error’,

      errors

    });

  }

  // Mongoose duplicate key error

  if (error.code === 11000) {

    const field = Object.keys(error.keyValue);

    return res.status(400).json({

      success: false,

      message: `${field} already exists`

    });

  }

  // JWT errors

  if (error.name === ‘JsonWebTokenError’) {

    return res.status(401).json({

      success: false,

      message: ‘Invalid token’

    });

  }

  // Default error response

  res.status(error.status || 500).json({

    success: false,

    message: error.message || ‘Internal Server Error’

  });

});

// 404 handler

app.use(‘*’, (req, res) => {

  res.status(404).json({

    success: false,

    message: `Route ${req.originalUrl} not found`

  });

});

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {

  console.log(`Server running on port ${PORT}`);

  console.log(`Environment: ${process.env.NODE_ENV || ‘development’}`);

});

module.exports = app;

Advanced Backend Concepts (2-3 weeks)

• File Upload and Processing – Multer, image processing, cloud storage integration
• Real-time Communication – WebSockets, Socket.io, live chat, notifications
• Payment Integration – Stripe, PayPal, webhook handling, subscription management
• Email Services – Nodemailer, email templates, automated email workflows

Backend Projects:

1. Complete Authentication System – JWT-based auth with user roles, password reset, email verification
2. RESTful Blog API – Full CRUD operations, user management, comment system, search functionality
3. Real-time Chat Application – Socket.io implementation with rooms, private messages, file sharing

Phase 4: Full-Stack Integration and Advanced Features (Month 5-6)

MERN Stack Application Development (4-5 weeks)

• Frontend-Backend Integration – API consumption, error handling, loading states, data synchronization
• State Management – Global state, server state, caching strategies, optimistic updates
• File Upload Systems – Image upload, file management, progress tracking, cloud storage
• Search and Filtering – Advanced search functionality, real-time filtering, pagination

Performance Optimization and Security (3-4 weeks)

• Frontend Performance – Code splitting, lazy loading, image optimization, caching strategies
• Backend Performance – Database optimization, API caching, request optimization, monitoring
• Security Implementation – CORS, helmet, rate limiting, input validation, secure headers
• Error Handling – Comprehensive error boundaries, logging, user-friendly error messages

DevOps and Deployment (2-3 weeks)

• Version Control – Git workflows, branching strategies, collaborative development
• Deployment Platforms – Heroku, Netlify, Vercel, AWS deployment options
• Environment Management – Environment variables, configuration management, secrets handling
• Monitoring and Analytics – Performance monitoring, error tracking, user analytics

Full-Stack Projects:

1. Social Media Platform – Complete social application with posts, comments, likes, user profiles
2. E-learning Management System – Course management, video streaming, progress tracking, assessments
3. Project Management Tool – Team collaboration, task management, real-time updates, file sharing

Phase 5: Specialization and Professional Development (Month 6-7)

Choose Advanced Specialization:

Frontend Specialization (Advanced React Ecosystem):

• Next.js Mastery – Server-side rendering, static site generation, API routes, edge functions
• Advanced State Management – Zustand, Jotai, Recoil, micro-frontend architecture
• Design Systems – Component libraries, Storybook, design tokens, accessibility compliance
• Performance Engineering – Core web vitals, lighthouse optimization, advanced caching

Backend Specialization (Node.js Architecture):

• Microservices Architecture – Service decomposition, API gateways, inter-service communication
• Database Optimization – Query optimization, indexing strategies, database scaling
• Cloud Services Integration – AWS services, serverless functions, container orchestration
• Advanced Security – OAuth implementation, encryption, security auditing, compliance

Full-Stack Specialization (End-to-End Development):

• DevOps Integration – CI/CD pipelines, Docker containerization, cloud deployment automation
• Testing Strategies – End-to-end testing, performance testing, load testing, quality assurance
• Project Architecture – System design, scalability planning, technology selection
• Team Leadership – Code review processes, mentoring, technical documentation, agile methodologies