Why Web Development Is Important for Businesses in 2026

// ProductList.jsx — a real, production-shaped React component
// This is what a fresher's portfolio project should look like.

import { useState, useEffect } from "react";

export default function ProductList({ categoryId }) {
  const [products, setProducts] = useState([]);
  const [status, setStatus] = useState("idle"); // idle | loading | error | success
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!categoryId) return;

    let cancelled = false;
    setStatus("loading");
    setError(null);

    async function fetchProducts() {
      try {
        const res = await fetch(
          `/api/products?category=${categoryId}`
        );
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        if (!cancelled) {
          setProducts(data.items);
          setStatus("success");
        }
      } catch (err) {
        if (!cancelled) {
          setError(err.message);
          setStatus("error");
        }
      }
    }

    fetchProducts();
    return () => {
      cancelled = true;
    };
  }, [categoryId]);

  if (status === "loading") return <p>Loading products…</p>;
  if (status === "error") return <p className="error">Error: {error}</p>;
  if (!products.length) return <p>No products found.</p>;

  return (
    <ul className="product-list">
      {products.map((p) => (
        <li key={p.id} className="product">
          <img src={p.image} alt={p.name} loading="lazy" />
          <h3>{p.name}</h3>
          <p>₹{p.price.toLocaleString("en-IN")}</p>
        </li>
      ))}
    </ul>
  );
}

// Why this is production-shaped:
// - Explicit states: idle, loading, error, success
// - Cancellation-safe useEffect cleanup
// - Lazy-loaded images for performance
// - Proper error handling with a visible message
// - Currency formatted for Indian market
//
// Why this matters for business:
// - Load time and perceived speed directly affect conversion.
// - A loading spinner that never resolves loses a customer.
// - Clear error states keep users from abandoning entirely.

// products.routes.js — a real backend API endpoint
// Every business needs APIs behind its frontend.

import express from "express";
import { z } from "zod";
import { products } from "../db/index.js";

const router = express.Router();

const querySchema = z.object({
  category: z.string().optional(),
  page: z.coerce.number().min(1).default(1),
  limit: z.coerce.number().min(1).max(50).default(20),
});

router.get("/", async (req, res) => {
  try {
    const { category, page, limit } = querySchema.parse(req.query);

    const query = {};
    if (category) query.categoryId = category;

    const offset = (page - 1) * limit;

    const [items, total] = await Promise.all([
      products.findMany(query, { skip: offset, take: limit }),
      products.count(query),
    ]);

    res.json({
      items,
      page,
      limit,
      total,
      totalPages: Math.ceil(total / limit),
    });
  } catch (err) {
    if (err instanceof z.ZodError) {
      return res.status(400).json({ error: "Invalid query", details: err.issues });
    }
    console.error(err);
    res.status(500).json({ error: "Internal server error" });
  }
});

router.get("/:id", async (req, res) => {
  const product = await products.findById(req.params.id);
  if (!product) return res.status(404).json({ error: "Not found" });
  res.json(product);
});

export default router;

// What a hiring manager looks for:
// - Input validation with a schema (Zod) — prevents bad requests
// - Pagination — critical for scale, often forgotten by freshers
// - Structured error responses — the frontend can display them
// - Separation of routing from DB logic
// - Async error handling
//
// Why this matters for business:
// - Well-built APIs mean the frontend can ship faster.
// - Validation prevents security issues and data corruption.
// - Pagination keeps performance predictable under load.

# performance_audit.py — a script that measures real business KPIs
# This is the kind of evidence a web performance role produces.

import subprocess
import json
import statistics

URLS = [
    "https://example.com/",
    "https://example.com/products",
    "https://example.com/checkout",
]

def run_lighthouse(url: str) -> dict:
    result = subprocess.run(
        [
            "lighthouse", url,
            "--chrome-flags=--headless",
            "--output=json",
            "--quiet",
        ],
        capture_output=True,
        text=True,
    )
    return json.loads(result.stdout)

def extract_metrics(report: dict) -> dict:
    audits = report["audits"]
    return {
        "LCP_ms": audits["largest-contentful-paint"]["numericValue"],
        "TBT_ms": audits["total-blocking-time"]["numericValue"],
        "CLS":    audits["cumulative-layout-shift"]["numericValue"],
        "perf_score": report["categories"]["performance"]["score"] * 100,
    }

print(f"{'URL':<40} {'LCP':>8} {'TBT':>8} {'CLS':>6} {'Score':>6}")
print("-" * 72)

for url in URLS:
    report = run_lighthouse(url)
    m = extract_metrics(report)
    print(f"{url:<40} {m['LCP_ms']:>6.0f}ms {m['TBT_ms']:>6.0f}ms "
          f"{m['CLS']:>6.2f} {m['perf_score']:>5.0f}")

# What a hiring manager looks for:
# - You measure before you optimise
# - You understand Core Web Vitals (LCP, TBT, CLS)
# - You track performance across multiple pages, not just the homepage
#
# Why this matters for business:
# - A 1s delay in LCP on mobile can reduce conversions by 7–20%.
# - Core Web Vitals are a ranking signal in Google search.
# - Every 100ms of load time has measurable revenue impact for
#   e-commerce and SaaS businesses.
#
# A fresher who can run this audit and explain the numbers
# instantly sounds senior in a technical interview.