Frontend Code Review

Frontend Code Review

Systematically review frontend code to identify issues, ensure quality, and provide actionable improvement recommendations across code quality, performance, accessibility, and security dimensions.

Review Workflow

1. Initial Assessment

Gather context about the project and identify review scope:

Project Context:

• Framework and version (React, Vue, Angular, vanilla JS)
• Build tools and dependencies
• Target browsers/devices
• Accessibility requirements (WCAG level)
• Performance targets (Core Web Vitals)

Review Scope:

• New features vs. refactoring vs. bug fixes
• Component complexity level
• Critical user paths
• Security-sensitive areas

2. Code Quality Analysis

Evaluate component structure, code patterns, and maintainability:

Key Areas:

• Component architecture (single responsibility, composition patterns)
• JavaScript/TypeScript quality (type safety, naming, complexity)
• State management decisions (local vs. global, immutability)
• Error handling and edge cases
• Code duplication and DRY violations

Load references/code-quality-checklist.md for detailed quality criteria, common issues, and fixes with code examples

3. Performance Review

Assess rendering efficiency, resource loading, and Core Web Vitals:

Focus Areas:

• Rendering optimization (React.memo, useMemo, useCallback, keys)
• Resource loading (images, fonts, scripts, lazy loading)
• Bundle size and code splitting
• Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1
• Memory leaks and cleanup

Load references/performance-checklist.md for detailed optimization techniques and Web Vitals guidelines with code examples

4. Accessibility Assessment

Evaluate WCAG 2.1 compliance and inclusive design:

Key Areas:

• Semantic HTML (proper headings, landmarks, lists)
• ARIA implementation (labels, roles, live regions)
• Keyboard navigation and focus management
• Screen reader support (alt text, labels, announcements)
• Color contrast ratios

Load references/accessibility-checklist.md for WCAG 2.1 AA/AAA compliance criteria with detailed examples

5. Security Review

Identify vulnerabilities and security best practices:

Common Vulnerabilities:

• XSS (input sanitization, safe HTML rendering)
• CSRF protection
• Authentication token handling
• Sensitive data exposure
• Dependency vulnerabilities

Security Controls:

• Content Security Policy (CSP)
• HTTPS enforcement
• Secure cookies
• Input validation and output encoding

Load references/security-checklist.md for comprehensive frontend security guidelines and vulnerability prevention

6. CSS/Styling Review

Assess architecture, responsiveness, and maintainability:

Key Areas:

• CSS methodology (BEM, OOCSS, CSS-in-JS, Tailwind)
• Responsive design (mobile-first, breakpoints, flexible layouts)
• Design tokens and variables
• Specificity management
• Unused CSS detection

7. Testing Coverage

Evaluate test completeness and quality:

Test Types:

• Unit tests (component logic, utilities, edge cases)
• Integration tests (component interaction, API integration, state flows)
• E2E tests (critical user journeys, cross-browser compatibility)
• Accessibility automated tests

8. Generate Review Report

Create structured report with findings and recommendations:

Report Structure:

• Executive Summary (quality rating, critical issues, recommendation)
• Detailed Findings (by category with severity: Critical/Major/Minor)
• Action Items (prioritized with file/line references and specific fixes)

Load references/report-templates.md for full review report formats and examples

Review Process Guidelines

Review Timing:

• Pre-Commit: Automated linting and formatting
• Pre-PR: Self-review using this workflow
• PR Review: Peer review with comprehensive analysis
• Pre-Deployment: Final quality gate

Severity Definitions:

• Critical: Blocks deployment (security issues, breaking bugs, accessibility blockers)
• Major: Should fix before merge (performance issues, poor patterns, maintainability concerns)
• Minor: Nice to improve (style suggestions, micro-optimizations, documentation)

Common Anti-Patterns

React/Component Patterns:

• Prop drilling through multiple levels
• God components doing too much
• Missing error boundaries
• Mutating state directly
• Inline functions causing unnecessary re-renders

JavaScript/TypeScript:

• Using any type in TypeScript
• Console.log in production code
• Deeply nested callbacks
• Global variables
• Unhandled promises

CSS/Styling:

• !important overuse
• Inline styles instead of classes
• Fixed pixels instead of relative units
• High specificity wars

Performance:

• Synchronous expensive operations in render
• Large unoptimized bundles (>500KB)
• Missing code splitting and lazy loading
• Unoptimized images

Accessibility:

• Non-semantic div/span buttons
• Missing alt attributes
• Color-only information
• Keyboard traps
• Missing focus management in modals

Key Review Checkpoints

Code Quality:

• [ ] Components follow single responsibility
• [ ] Functions < 50 lines, complexity < 10
• [ ] TypeScript strict mode enabled
• [ ] Meaningful naming conventions
• [ ] Error handling present

Performance:

• [ ] Appropriate use of React.memo/useMemo/useCallback
• [ ] Images optimized (WebP/AVIF)
• [ ] Code splitting implemented
• [ ] Core Web Vitals within targets

Accessibility:

• [ ] Semantic HTML used
• [ ] All images have alt text
• [ ] Keyboard navigable
• [ ] Color contrast compliant (≥4.5:1)

Security:

• [ ] User input sanitized
• [ ] XSS prevention in place
• [ ] No sensitive data in localStorage
• [ ] Dependencies up to date

Reference Files

Load these files when detailed guidance is needed:

• references/code-quality-checklist.md: Component patterns, code smells, fixes with examples (693 lines)
• references/performance-checklist.md: Web Vitals optimization, rendering performance (891 lines)
• references/accessibility-checklist.md: WCAG 2.1 compliance with detailed examples (1045 lines)
• references/security-checklist.md: XSS, CSRF, authentication, CSP guidelines (969 lines)
• references/report-templates.md: Review report formats and examples (1203 lines)

Accessibility Checklist

Comprehensive guidelines for WCAG 2.1 AA/AAA compliance and inclusive design.

Table of Contents

• Semantic HTML
• ARIA Best Practices
• Keyboard Navigation
• Focus Management
• Screen Reader Support
• Color and Contrast
• Forms and Validation
• Media Accessibility
• Testing Tools

Semantic HTML

Proper Document Structure

Problem:

<!-- ❌ Div soup with no semantic meaning -->
<div class="header">
  <div class="logo">Logo</div>
  <div class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
  </div>
</div>

<div class="content">
  <div class="article">
    <div class="title">Article Title</div>
    <div class="text">Article content...</div>
  </div>
</div>

<div class="footer">
  <div>© 2024</div>
</div>

Solution:

<!-- ✅ Semantic HTML5 elements -->
<header>
  <img src="logo.png" alt="Company Name Logo">
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content...</p>
  </article>
</main>

<footer>
  <p>© 2024 Company Name</p>
</footer>

Heading Hierarchy

Problem:

<!-- ❌ Skipping heading levels, multiple h1 -->
<h1>Page Title</h1>
<h3>Section</h3> <!-- Skipped h2 -->
<h1>Another Section</h1> <!-- Multiple h1 -->
<h4>Subsection</h4> <!-- Skipped h3 -->

Solution:

<!-- ✅ Logical heading hierarchy -->
<h1>Page Title</h1>

<section>
  <h2>Main Section</h2>
  <p>Content...</p>
  
  <h3>Subsection</h3>
  <p>Content...</p>
  
  <h4>Sub-subsection</h4>
  <p>Content...</p>
</section>

<section>
  <h2>Another Main Section</h2>
  <p>Content...</p>
</section>

Lists

Problem:

<!-- ❌ Not using list elements for lists -->
<div>
  <div>• Item 1</div>
  <div>• Item 2</div>
  <div>• Item 3</div>
</div>

Solution:

<!-- ✅ Proper list markup -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- For navigation -->
<nav aria-label="Site navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

ARIA Best Practices

First Rule of ARIA

No ARIA is better than bad ARIA.

Use semantic HTML first, ARIA only when necessary.

Problem:

<!-- ❌ Unnecessary ARIA on semantic elements -->
<button role="button" aria-label="Submit">Submit</button>
<nav role="navigation">...</nav>
<header role="banner">...</header>

Solution:

<!-- ✅ Semantic HTML without redundant ARIA -->
<button>Submit</button>
<nav>...</nav>
<header>...</header>

ARIA Labels and Descriptions

Problem:

// ❌ Icon buttons without labels
<button onClick={handleDelete}>
  <TrashIcon />
</button>

// ❌ Vague labels
<button aria-label="Click here">
  <DownloadIcon />
</button>

Solution:

// ✅ Descriptive aria-label
<button onClick={handleDelete} aria-label="Delete item">
  <TrashIcon aria-hidden="true" />
</button>

// ✅ Specific and contextual
<button 
  onClick={handleDownload}
  aria-label="Download user manual PDF"
>
  <DownloadIcon aria-hidden="true" />
</button>

// ✅ Using aria-labelledby for complex labels
<div>
  <h3 id="section-title">Important Document</h3>
  <button 
    aria-labelledby="section-title download-label"
    onClick={handleDownload}
  >
    <span id="download-label">Download</span>
    <DownloadIcon aria-hidden="true" />
  </button>
</div>

Live Regions

Problem:

// ❌ No announcement for dynamic updates
function Notifications() {
  const [message, setMessage] = useState('');
  
  useEffect(() => {
    const unsubscribe = subscribeToNotifications((msg) => {
      setMessage(msg);
    });
    return unsubscribe;
  }, []);
  
  return <div>{message}</div>;
}

Solution:

// ✅ Using aria-live for announcements
function Notifications() {
  const [message, setMessage] = useState('');
  
  useEffect(() => {
    const unsubscribe = subscribeToNotifications((msg) => {
      setMessage(msg);
    });
    return unsubscribe;
  }, []);
  
  return (
    <div 
      role="status" 
      aria-live="polite"
      aria-atomic="true"
    >
      {message}
    </div>
  );
}

// ✅ For urgent messages
function ErrorAlert({ error }) {
  return (
    <div 
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
    >
      {error}
    </div>
  );
}

ARIA States

Problem:

// ❌ Visual state not conveyed to AT
<button onClick={toggleMenu}>
  Menu {isOpen ? '▼' : '▶'}
</button>
<div style={{ display: isOpen ? 'block' : 'none' }}>
  {/* Menu items */}
</div>

Solution:

// ✅ Proper ARIA states
<button 
  onClick={toggleMenu}
  aria-expanded={isOpen}
  aria-controls="menu-content"
>
  Menu
</button>
<div 
  id="menu-content"
  hidden={!isOpen}
>
  {/* Menu items */}
</div>

// ✅ Toggle button
<button
  onClick={toggleMute}
  aria-pressed={isMuted}
  aria-label={isMuted ? 'Unmute audio' : 'Mute audio'}
>
  {isMuted ? <MutedIcon /> : <UnmutedIcon />}
</button>

Keyboard Navigation

Keyboard Accessibility Basics

All interactive elements must be keyboard accessible:

Focus Order

Problem:

// ❌ Incorrect tab order with tabindex
<div>
  <button tabIndex={3}>First</button>
  <button tabIndex={1}>Second</button>
  <button tabIndex={2}>Third</button>
</div>

Solution:

// ✅ Natural DOM order (no positive tabindex)
<div>
  <button>First</button>
  <button>Second</button>
  <button>Third</button>
</div>

// ✅ Only use tabindex="-1" to remove from tab order
<div tabIndex={-1} onClick={handleClick}>
  Not keyboard focusable
</div>

// ✅ Use tabindex="0" to add non-interactive elements to tab order
<div 
  tabIndex={0}
  role="button"
  onClick={handleClick}
  onKeyDown={handleKeyDown}
>
  Custom interactive element
</div>

Keyboard Event Handlers

Problem:

// ❌ Only mouse events
<div onClick={handleClick}>
  Click me
</div>

// ❌ Missing Enter key support
<div 
  tabIndex={0}
  onKeyDown={(e) => {
    if (e.key === ' ') handleClick();
  }}
>
  Press Space
</div>

Solution:

// ✅ Use button for interactive elements
<button onClick={handleClick}>
  Click me
</button>

// ✅ If custom element is necessary, support both Space and Enter
function CustomButton({ onClick, children }) {
  const handleKeyDown = (e) => {
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault();
      onClick();
    }
  };
  
  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onClick}
      onKeyDown={handleKeyDown}
    >
      {children}
    </div>
  );
}

// ✅ Reusable hook for keyboard activation
function useKeyboardActivation(callback) {
  return {
    onClick: callback,
    onKeyDown: (e) => {
      if (e.key === ' ' || e.key === 'Enter') {
        e.preventDefault();
        callback();
      }
    },
    role: 'button',
    tabIndex: 0,
  };
}

Skip Links

Problem:

// ❌ No way to skip repetitive navigation
<div>
  <header>
    <nav>{/* 20+ navigation links */}</nav>
  </header>
  <main>{/* Content */}</main>
</div>

Solution:

// ✅ Skip link for keyboard users
<div>
  <a href="#main-content" className="skip-link">
    Skip to main content
  </a>
  
  <header>
    <nav>{/* 20+ navigation links */}</nav>
  </header>
  
  <main id="main-content" tabIndex={-1}>
    {/* Content */}
  </main>
</div>

/* Skip link styles */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

Complex Widgets

Dropdown Menu

// ✅ Accessible dropdown with keyboard support
function Dropdown({ trigger, items }) {
  const [isOpen, setIsOpen] = useState(false);
  const [focusedIndex, setFocusedIndex] = useState(-1);
  const triggerRef = useRef(null);
  const menuRef = useRef(null);
  
  const handleTriggerKeyDown = (e) => {
    switch (e.key) {
      case 'Enter':
      case ' ':
      case 'ArrowDown':
        e.preventDefault();
        setIsOpen(true);
        setFocusedIndex(0);
        break;
      case 'Escape':
        setIsOpen(false);
        triggerRef.current?.focus();
        break;
    }
  };
  
  const handleMenuKeyDown = (e) => {
    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        setFocusedIndex((prev) => 
          prev < items.length - 1 ? prev + 1 : 0
        );
        break;
      case 'ArrowUp':
        e.preventDefault();
        setFocusedIndex((prev) => 
          prev > 0 ? prev - 1 : items.length - 1
        );
        break;
      case 'Home':
        e.preventDefault();
        setFocusedIndex(0);
        break;
      case 'End':
        e.preventDefault();
        setFocusedIndex(items.length - 1);
        break;
      case 'Escape':
        e.preventDefault();
        setIsOpen(false);
        triggerRef.current?.focus();
        break;
      case 'Enter':
      case ' ':
        e.preventDefault();
        items[focusedIndex]?.onClick();
        setIsOpen(false);
        break;
    }
  };
  
  return (
    <div>
      <button
        ref={triggerRef}
        aria-haspopup="true"
        aria-expanded={isOpen}
        onClick={() => setIsOpen(!isOpen)}
        onKeyDown={handleTriggerKeyDown}
      >
        {trigger}
      </button>
      
      {isOpen && (
        <ul
          ref={menuRef}
          role="menu"
          onKeyDown={handleMenuKeyDown}
        >
          {items.map((item, index) => (
            <li
              key={index}
              role="menuitem"
              tabIndex={focusedIndex === index ? 0 : -1}
              onClick={item.onClick}
            >
              {item.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Modal Dialog

// ✅ Accessible modal with focus trap
function Modal({ isOpen, onClose, title, children }) {
  const modalRef = useRef(null);
  const previousFocusRef = useRef(null);
  
  useEffect(() => {
    if (isOpen) {
      previousFocusRef.current = document.activeElement;
      
      // Focus first focusable element in modal
      const focusableElements = modalRef.current?.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      focusableElements?.[0]?.focus();
      
      // Trap focus
      const handleTabKey = (e) => {
        if (e.key !== 'Tab') return;
        
        const firstElement = focusableElements[0];
        const lastElement = focusableElements[focusableElements.length - 1];
        
        if (e.shiftKey && document.activeElement === firstElement) {
          e.preventDefault();
          lastElement.focus();
        } else if (!e.shiftKey && document.activeElement === lastElement) {
          e.preventDefault();
          firstElement.focus();
        }
      };
      
      document.addEventListener('keydown', handleTabKey);
      return () => document.removeEventListener('keydown', handleTabKey);
    } else {
      // Restore focus on close
      previousFocusRef.current?.focus();
    }
  }, [isOpen]);
  
  const handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      onClose();
    }
  };
  
  if (!isOpen) return null;
  
  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      ref={modalRef}
      onKeyDown={handleKeyDown}
    >
      <h2 id="modal-title">{title}</h2>
      <div>{children}</div>
      <button onClick={onClose}>Close</button>
    </div>
  );
}

Focus Management

Focus Indicators

Problem:

/* ❌ Removing focus outline */
*:focus {
  outline: none;
}

Solution:

/* ✅ Custom focus styles that meet contrast requirements */
*:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* ✅ Different styles for keyboard vs mouse (using :focus-visible) */
*:focus {
  outline: none; /* Remove default */
}

*:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* ✅ High contrast focus for better visibility */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }
}

Programmatic Focus

Problem:

// ❌ Not managing focus after actions
function DeleteButton({ itemId, onDelete }) {
  return (
    <button onClick={() => onDelete(itemId)}>
      Delete
    </button>
  );
}

// After deletion, focus is lost

Solution:

// ✅ Restore focus after deletion
function ItemList({ items }) {
  const listRef = useRef(null);
  
  const handleDelete = (itemId, index) => {
    deleteItem(itemId);
    
    // Focus next item, or previous, or container
    const focusTarget = 
      listRef.current?.querySelector(`[data-index="${index}"]`) ||
      listRef.current?.querySelector(`[data-index="${index - 1}"]`) ||
      listRef.current;
    
    focusTarget?.focus();
  };
  
  return (
    <ul ref={listRef} tabIndex={-1}>
      {items.map((item, index) => (
        <li key={item.id} data-index={index}>
          {item.name}
          <button onClick={() => handleDelete(item.id, index)}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

Screen Reader Support

Accessible Names

Problem:

// ❌ Empty links and buttons
<a href="/next">
  <img src="arrow.png" />
</a>

<button>
  <SearchIcon />
</button>

Solution:

// ✅ Accessible names via multiple methods
<a href="/next" aria-label="Next page">
  <img src="arrow.png" alt="" aria-hidden="true" />
</a>

<button aria-label="Search">
  <SearchIcon aria-hidden="true" />
</button>

// ✅ Visually hidden text
<button>
  <SearchIcon aria-hidden="true" />
  <span className="sr-only">Search</span>
</button>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Status Messages

// ✅ Announce status changes
function SaveButton({ onSave }) {
  const [status, setStatus] = useState('idle');
  
  const handleSave = async () => {
    setStatus('saving');
    try {
      await onSave();
      setStatus('saved');
      setTimeout(() => setStatus('idle'), 3000);
    } catch (error) {
      setStatus('error');
    }
  };
  
  return (
    <>
      <button onClick={handleSave} disabled={status === 'saving'}>
        Save
      </button>
      
      <div role="status" aria-live="polite" aria-atomic="true">
        {status === 'saving' && 'Saving...'}
        {status === 'saved' && 'Saved successfully'}
        {status === 'error' && 'Error saving'}
      </div>
    </>
  );
}

Color and Contrast

WCAG Contrast Requirements

Levels:

• AA (Minimum): 4.5:1 for normal text, 3:1 for large text
• AAA (Enhanced): 7:1 for normal text, 4.5:1 for large text

Problem:

/* ❌ Insufficient contrast */
.text {
  color: #999; /* 2.8:1 on white background */
  background: #fff;
}

.button {
  color: #0066cc;
  background: #4da6ff; /* 2.1:1 - fails */
}

Solution:

/* ✅ Meets WCAG AA contrast */
.text {
  color: #595959; /* 7:1 on white background */
  background: #fff;
}

.button {
  color: #fff;
  background: #0066cc; /* 4.5:1 with white text */
}

/* ✅ High contrast mode support */
@media (prefers-contrast: high) {
  .button {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

Color-Independent Information

Problem:

// ❌ Color as only indicator
<input type="text" style={{ borderColor: isValid ? 'green' : 'red' }} />
<p style={{ color: isValid ? 'green' : 'red' }}>
  {isValid ? 'Valid' : 'Invalid'}
</p>

Solution:

// ✅ Multiple indicators (color + icon + text)
<div>
  <input
    type="text"
    aria-invalid={!isValid}
    aria-describedby="validation-message"
    style={{ borderColor: isValid ? 'green' : 'red' }}
  />
  <div id="validation-message" role="alert">
    {!isValid && (
      <>
        <ErrorIcon aria-hidden="true" />
        <span>Invalid input. Please enter a valid email.</span>
      </>
    )}
    {isValid && (
      <>
        <SuccessIcon aria-hidden="true" />
        <span>Valid</span>
      </>
    )}
  </div>
</div>

Forms and Validation

Form Labels

Problem:

// ❌ Placeholder as label
<input type="text" placeholder="Email" />

// ❌ Missing label association
<label>Email</label>
<input type="email" />

Solution:

// ✅ Proper label association
<label htmlFor="email">Email</label>
<input type="email" id="email" />

// ✅ Using aria-labelledby
<div>
  <h3 id="email-label">Email Address</h3>
  <input 
    type="email"
    aria-labelledby="email-label"
    aria-describedby="email-hint"
  />
  <p id="email-hint">We'll never share your email</p>
</div>

Error Messages

Problem:

// ❌ Errors not associated with inputs
<input type="email" />
{error && <p>{error}</p>}

Solution:

// ✅ Accessible error messages
<div>
  <label htmlFor="email">Email</label>
  <input
    type="email"
    id="email"
    aria-invalid={!!error}
    aria-describedby={error ? 'email-error' : undefined}
  />
  {error && (
    <p id="email-error" role="alert">
      {error}
    </p>
  )}
</div>

Media Accessibility

Images

Problem:

// ❌ Missing or poor alt text
<img src="photo.jpg" alt="Photo" />
<img src="logo.png" />

Solution:

// ✅ Descriptive alt text
<img src="photo.jpg" alt="Golden retriever playing fetch in a park" />

// ✅ Empty alt for decorative images
<img src="decorative-line.png" alt="" />

// ✅ Complex images with longer descriptions
<figure>
  <img 
    src="chart.png"
    alt="Bar chart showing sales growth"
    aria-describedby="chart-description"
  />
  <figcaption id="chart-description">
    Sales increased from $10M in Q1 to $15M in Q2, with a peak of $18M in Q3.
  </figcaption>
</figure>

Videos

Problem:

// ❌ Video without captions or transcript
<video src="presentation.mp4" controls />

Solution:

// ✅ Accessible video
<video controls>
  <source src="presentation.mp4" type="video/mp4" />
  <track
    kind="captions"
    src="captions-en.vtt"
    srclang="en"
    label="English"
    default
  />
  <track
    kind="descriptions"
    src="descriptions-en.vtt"
    srclang="en"
    label="English"
  />
</video>

<details>
  <summary>Transcript</summary>
  <p>Full video transcript here...</p>
</details>

Testing Tools

Automated Testing

# Lighthouse CI
npm install -g @lhci/cli
lhci autorun --collect.url=http://localhost:3000

# axe-core
npm install --save-dev @axe-core/react

// React integration
import React from 'react';
import ReactDOM from 'react-dom';

if (process.env.NODE_ENV !== 'production') {
  const axe = require('@axe-core/react');
  axe(React, ReactDOM, 1000);
}

Manual Testing Checklist

1. Keyboard Navigation

• Can you navigate the entire site using only Tab, Shift+Tab, Enter, Space, and Arrow keys?
• Is the focus indicator always visible?
• Can you access all interactive elements?

2. Screen Reader Testing

• Test with NVDA (Windows), JAWS (Windows), or VoiceOver (Mac/iOS)
• Are all elements properly announced?
• Do ARIA labels make sense in context?

3. Zoom and Text Resize

• Test at 200% zoom (WCAG AA requirement)
• Does content remain readable and functional?
• No horizontal scrolling required?

4. Color Contrast

• Use browser dev tools or online checkers
• Verify all text meets minimum contrast ratios
• Test in high contrast mode

5. Forms

• Are all form fields properly labeled?
• Do error messages announce to screen readers?
• Can you complete forms using only keyboard?

Code Quality Checklist

Comprehensive criteria for assessing frontend code quality.

Table of Contents

• Component Structure
• JavaScript/TypeScript Quality
• State Management
• Common Issues and Fixes
• Code Smells

Component Structure

React Components

Single Responsibility Principle

Good:

// ✅ Each component has one clear purpose
function UserAvatar({ user }) {
  return <img src={user.avatar} alt={user.name} />;
}

function UserName({ user }) {
  return <span>{user.name}</span>;
}

function UserProfile({ user }) {
  return (
    <div>
      <UserAvatar user={user} />
      <UserName user={user} />
    </div>
  );
}

Bad:

// ❌ Component doing too much
function UserProfile({ user }) {
  const [posts, setPosts] = useState([]);
  const [comments, setComments] = useState([]);
  const [settings, setSettings] = useState({});
  
  // Fetching data, rendering UI, handling forms, etc.
  // 300+ lines of mixed concerns
}

Component Composition

Good:

// ✅ Composition over inheritance
function Card({ children, className }) {
  return <div className={`card ${className}`}>{children}</div>;
}

function ProductCard({ product }) {
  return (
    <Card className="product-card">
      <CardHeader>{product.name}</CardHeader>
      <CardBody>{product.description}</CardBody>
      <CardFooter>{product.price}</CardFooter>
    </Card>
  );
}

Bad:

// ❌ Trying to use inheritance
class BaseCard extends React.Component { /* ... */ }
class ProductCard extends BaseCard { /* ... */ }
class UserCard extends BaseCard { /* ... */ }

Props Design

Good:

// ✅ Well-typed, specific props
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'danger';
  size: 'small' | 'medium' | 'large';
  onClick: () => void;
  disabled?: boolean;
  children: React.ReactNode;
}

function Button({ variant, size, onClick, disabled, children }: ButtonProps) {
  return (
    <button 
      className={`btn btn-${variant} btn-${size}`}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

Bad:

// ❌ Generic, untyped props
function Button(props) {
  return <button {...props} />;
}

Vue Components

Component Organization

Good:

<script setup lang="ts">
// ✅ Clear organization: imports → types → props → composables → computed → methods
import { ref, computed } from 'vue'
import type { User } from '@/types'

interface Props {
  user: User
}

const props = defineProps<Props>()
const isEditing = ref(false)

const displayName = computed(() => 
  `${props.user.firstName} ${props.user.lastName}`
)

function toggleEdit() {
  isEditing.value = !isEditing.value
}
</script>

<template>
  <div class="user-profile">
    <span>{{ displayName }}</span>
    <button @click="toggleEdit">Edit</button>
  </div>
</template>

Bad:

<script>
// ❌ Mixed concerns, no types, unclear organization
export default {
  data() {
    return {
      user: null,
      editing: false,
      loading: false,
      error: null,
      // 50+ data properties
    }
  },
  // Methods, computed, watch all mixed
}
</script>

Angular Components

Good:

// ✅ OnPush strategy, typed, clear separation
@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true
})
export class UserProfileComponent {
  @Input() user!: User;
  @Output() userUpdated = new EventEmitter<User>();
  
  protected isEditing = signal(false);
  
  protected toggleEdit(): void {
    this.isEditing.update(v => !v);
  }
}

Bad:

// ❌ Default change detection, any types, mixed concerns
@Component({
  selector: 'app-user-profile',
  template: `...` // Inline template for complex component
})
export class UserProfileComponent {
  user: any;
  data: any;
  state: any;
  
  // 50+ methods handling everything
}

JavaScript/TypeScript Quality

Type Safety (TypeScript)

Good:

// ✅ Strict types, no any
interface User {
  id: string;
  name: string;
  email: string;
  age: number;
  roles: Role[];
}

type Role = 'admin' | 'user' | 'guest';

function getUserRole(user: User): Role {
  return user.roles[0] ?? 'guest';
}

// Discriminated unions for state
type RequestState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: Error };

Bad:

// ❌ Using any, loose types
function getUserRole(user: any): any {
  return user.roles[0];
}

// No discriminated unions
interface RequestState {
  status: string;
  data?: any;
  error?: any;
}

Function Complexity

Good:

// ✅ Small, focused functions (< 50 lines, cyclomatic complexity < 10)
function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function validateUser(user) {
  const errors = [];
  
  if (!validateEmail(user.email)) {
    errors.push('Invalid email');
  }
  
  if (user.age < 18) {
    errors.push('Must be 18 or older');
  }
  
  return errors.length === 0 ? null : errors;
}

Bad:

// ❌ Large, complex function (100+ lines, high cyclomatic complexity)
function validateAndProcessUser(user) {
  // Validation
  if (!user.email || !user.email.includes('@')) {
    // Email validation
    if (user.email.split('@').length !== 2) {
      if (!user.email.split('@')[1].includes('.')) {
        // Nested conditions continue...
        // 100+ lines of nested logic
      }
    }
  }
  
  // Processing
  // More nested logic
  
  // Saving
  // Even more nested logic
}

Error Handling

Good:

// ✅ Proper error handling with types
async function fetchUser(id: string): Promise<User> {
  try {
    const response = await fetch(`/api/users/${id}`);
    
    if (!response.ok) {
      throw new Error(`Failed to fetch user: ${response.statusText}`);
    }
    
    return await response.json();
  } catch (error) {
    if (error instanceof Error) {
      console.error('Error fetching user:', error.message);
    }
    throw error;
  }
}

// Usage with error boundary
function UserProfile({ userId }: { userId: string }) {
  const { data, error, isLoading } = useQuery(['user', userId], () => fetchUser(userId));
  
  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  if (!data) return <NotFound />;
  
  return <UserDetails user={data} />;
}

Bad:

// ❌ No error handling, ignoring promises
async function fetchUser(id) {
  const response = fetch(`/api/users/${id}`); // Not awaited!
  return response.json(); // Will fail
}

function UserProfile({ userId }) {
  const [user, setUser] = useState();
  
  fetchUser(userId).then(setUser); // No error handling
  
  return <UserDetails user={user} />; // Will crash if user is undefined
}

Code Duplication (DRY)

Good:

// ✅ DRY - extracted common logic
function useFormField<T>(initialValue: T) {
  const [value, setValue] = useState<T>(initialValue);
  const [error, setError] = useState<string | null>(null);
  
  const validate = (validator: (val: T) => string | null) => {
    const validationError = validator(value);
    setError(validationError);
    return !validationError;
  };
  
  return { value, setValue, error, validate };
}

// Reused across multiple forms
function LoginForm() {
  const email = useFormField('');
  const password = useFormField('');
  
  const handleSubmit = () => {
    const isValid = 
      email.validate(validateEmail) &&
      password.validate(validatePassword);
      
    if (isValid) {
      // Submit
    }
  };
  
  return (/* ... */);
}

Bad:

// ❌ Repeated code across components
function LoginForm() {
  const [email, setEmail] = useState('');
  const [emailError, setEmailError] = useState(null);
  const [password, setPassword] = useState('');
  const [passwordError, setPasswordError] = useState(null);
  
  // Validation logic repeated
  const validateEmail = () => { /* ... */ };
  const validatePassword = () => { /* ... */ };
}

function SignupForm() {
  const [email, setEmail] = useState('');
  const [emailError, setEmailError] = useState(null);
  const [password, setPassword] = useState('');
  const [passwordError, setPasswordError] = useState(null);
  
  // Same validation logic repeated
  const validateEmail = () => { /* ... */ };
  const validatePassword = () => { /* ... */ };
}

State Management

Local vs Global State

Good:

// ✅ Local state for UI, global for shared data
// Component-specific UI state
function Accordion() {
  const [isOpen, setIsOpen] = useState(false); // Local
  
  return (/* ... */);
}

// Shared data in global store
const useAuthStore = create<AuthStore>((set) => ({
  user: null,
  isAuthenticated: false,
  login: async (credentials) => {
    const user = await authApi.login(credentials);
    set({ user, isAuthenticated: true });
  },
  logout: () => set({ user: null, isAuthenticated: false }),
}));

Bad:

// ❌ Everything in global store, including UI state
const useStore = create((set) => ({
  accordionOpen: false, // Should be local!
  modalOpen: false, // Should be local!
  tooltipVisible: false, // Should be local!
  user: null,
  // 100+ state properties
}));

Immutability

Good:

// ✅ Immutable updates
function todosReducer(state: Todo[], action: Action): Todo[] {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.payload
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.payload);
    
    default:
      return state;
  }
}

Bad:

// ❌ Mutating state directly
function todosReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      state.push(action.payload); // Mutation!
      return state;
    
    case 'TOGGLE_TODO':
      const todo = state.find(t => t.id === action.payload);
      todo.completed = !todo.completed; // Mutation!
      return state;
    
    default:
      return state;
  }
}

Common Issues and Fixes

Issue 1: Unnecessary Re-renders

Problem:

// ❌ Creating new objects/arrays in render
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem 
          key={todo.id}
          todo={todo}
          onUpdate={() => updateTodo(todo)} // New function every render!
        />
      ))}
    </ul>
  );
}

Solution:

// ✅ Memoize callbacks, use React.memo
const TodoItem = React.memo(({ todo, onUpdate }) => {
  return <li onClick={onUpdate}>{todo.text}</li>;
});

function TodoList({ todos }) {
  const handleUpdate = useCallback((todo) => {
    updateTodo(todo);
  }, []);
  
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem 
          key={todo.id}
          todo={todo}
          onUpdate={() => handleUpdate(todo)}
        />
      ))}
    </ul>
  );
}

Issue 2: Missing Cleanup

Problem:

// ❌ No cleanup for subscriptions/timers
function Timer() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    // Missing cleanup!
  }, []);
  
  return <div>{count}</div>;
}

Solution:

// ✅ Proper cleanup
function Timer() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    
    return () => clearInterval(interval); // Cleanup
  }, []);
  
  return <div>{count}</div>;
}

Issue 3: Prop Drilling

Problem:

// ❌ Passing props through many levels
function App() {
  const [user, setUser] = useState(null);
  return <Layout user={user} setUser={setUser} />;
}

function Layout({ user, setUser }) {
  return <Sidebar user={user} setUser={setUser} />;
}

function Sidebar({ user, setUser }) {
  return <UserMenu user={user} setUser={setUser} />;
}

function UserMenu({ user, setUser }) {
  // Finally using the props here
}

Solution:

// ✅ Use Context or state management
const UserContext = createContext();

function App() {
  const [user, setUser] = useState(null);
  
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Layout />
    </UserContext.Provider>
  );
}

function Layout() {
  return <Sidebar />;
}

function Sidebar() {
  return <UserMenu />;
}

function UserMenu() {
  const { user, setUser } = useContext(UserContext);
  // Use directly
}

Code Smells

Smell 1: God Component

Indicator: Component with 300+ lines, handling multiple concerns

Fix: Split into smaller, focused components using composition

Smell 2: Deep Nesting

Indicator: More than 4 levels of nested JSX or logic

Fix: Extract nested sections into separate components

Smell 3: Magic Numbers

Indicator: Hardcoded numbers without explanation

Fix: Extract to named constants with clear meaning

// ❌ Magic numbers
setTimeout(() => { /* ... */ }, 300);
if (items.length > 50) { /* ... */ }

// ✅ Named constants
const DEBOUNCE_DELAY = 300;
const MAX_ITEMS_PER_PAGE = 50;

setTimeout(() => { /* ... */ }, DEBOUNCE_DELAY);
if (items.length > MAX_ITEMS_PER_PAGE) { /* ... */ }

Smell 4: Boolean Parameters

Indicator: Multiple boolean parameters making calls unclear

Fix: Use configuration objects or discriminated unions

// ❌ Unclear boolean parameters
renderButton(true, false, true);

// ✅ Clear configuration object
renderButton({
  primary: true,
  disabled: false,
  loading: true
});

Smell 5: Inconsistent Naming

Indicator: Mixed conventions (camelCase, snake_case, PascalCase)

Fix: Follow consistent conventions:

• Components: PascalCase (UserProfile)
• Variables/functions: camelCase (getUserProfile)
• Constants: UPPER_SNAKE_CASE (API_BASE_URL)
• CSS classes: kebab-case (user-profile)

Performance Checklist

Comprehensive guidelines for frontend performance optimization and Web Vitals.

Table of Contents

• Core Web Vitals
• Rendering Performance
• Resource Loading
• Bundle Optimization
• Memory Management
• Network Optimization
• Performance Monitoring

Core Web Vitals

Largest Contentful Paint (LCP)

Target: < 2.5 seconds

Common Issues and Fixes:

Issue 1: Large Images

Problem:

// ❌ Large unoptimized image
<img src="/hero-image.jpg" alt="Hero" />

Solution:

// ✅ Optimized with modern formats, lazy loading, responsive images
<picture>
  <source 
    srcSet="/hero-image.avif 1x, /hero-image-2x.avif 2x" 
    type="image/avif"
  />
  <source 
    srcSet="/hero-image.webp 1x, /hero-image-2x.webp 2x" 
    type="image/webp"
  />
  <img
    src="/hero-image.jpg"
    srcSet="/hero-image.jpg 1x, /hero-image-2x.jpg 2x"
    alt="Hero"
    loading="eager"
    fetchpriority="high"
    width={1200}
    height={600}
  />
</picture>

Issue 2: Blocking Resources

Problem:

<!-- ❌ Blocking CSS and scripts -->
<head>
  <link rel="stylesheet" href="/styles.css">
  <script src="/analytics.js"></script>
</head>

Solution:

<!-- ✅ Non-blocking resources -->
<head>
  <!-- Critical CSS inline -->
  <style>
    /* Critical above-the-fold styles */
  </style>
  
  <!-- Non-critical CSS with media query -->
  <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">
  
  <!-- Defer non-critical scripts -->
  <script defer src="/analytics.js"></script>
</head>

Issue 3: Slow Server Response

Problem:

// ❌ No caching, slow data fetching
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data');
  return { props: { data } };
}

Solution:

// ✅ Static generation with revalidation
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  
  return {
    props: { data },
    revalidate: 60 // ISR - revalidate every 60 seconds
  };
}

// Or use CDN caching
export async function GET() {
  const data = await fetchData();
  
  return Response.json(data, {
    headers: {
      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120'
    }
  });
}

First Input Delay (FID) / Interaction to Next Paint (INP)

Target: FID < 100ms, INP < 200ms

Issue 1: Long Tasks Blocking Main Thread

Problem:

// ❌ Synchronous processing blocking UI
function processLargeDataset(data) {
  // Processing 10,000 items synchronously
  const results = data.map(item => {
    // Heavy computation
    return heavyTransformation(item);
  });
  
  updateUI(results);
}

Solution:

// ✅ Break into chunks using scheduler
function processLargeDataset(data) {
  const chunkSize = 100;
  const results = [];
  let index = 0;
  
  function processChunk() {
    const chunk = data.slice(index, index + chunkSize);
    
    for (const item of chunk) {
      results.push(heavyTransformation(item));
    }
    
    index += chunkSize;
    
    if (index < data.length) {
      // Use scheduler API or setTimeout
      if ('scheduler' in window) {
        scheduler.postTask(processChunk, { priority: 'background' });
      } else {
        setTimeout(processChunk, 0);
      }
    } else {
      updateUI(results);
    }
  }
  
  processChunk();
}

// ✅ Or use Web Worker for heavy computation
// worker.js
self.onmessage = (e) => {
  const results = e.data.map(item => heavyTransformation(item));
  self.postMessage(results);
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => updateUI(e.data);

Issue 2: Expensive Event Handlers

Problem:

// ❌ No debouncing on expensive operations
input.addEventListener('input', (e) => {
  // Expensive operation on every keystroke
  searchDatabase(e.target.value);
  updateSuggestions(e.target.value);
  logAnalytics(e.target.value);
});

Solution:

// ✅ Debounce expensive operations
function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

input.addEventListener('input', debounce((e) => {
  searchDatabase(e.target.value);
  updateSuggestions(e.target.value);
  logAnalytics(e.target.value);
}, 300));

// ✅ React version with useTransition
function SearchInput() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  
  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value); // Update immediately
    
    // Mark expensive updates as transitions
    startTransition(() => {
      searchDatabase(value);
      updateSuggestions(value);
    });
  };
  
  return (
    <input 
      value={query}
      onChange={handleChange}
      aria-busy={isPending}
    />
  );
}

Cumulative Layout Shift (CLS)

Target: < 0.1

Issue 1: Images Without Dimensions

Problem:

// ❌ No dimensions specified
<img src="/image.jpg" alt="Content" />

Solution:

// ✅ Always specify dimensions
<img 
  src="/image.jpg" 
  alt="Content"
  width={800}
  height={600}
  style={{ aspectRatio: '4/3' }}
/>

// ✅ Or use aspect ratio box
<div style={{ aspectRatio: '16/9', position: 'relative' }}>
  <img 
    src="/image.jpg"
    alt="Content"
    style={{ position: 'absolute', width: '100%', height: '100%', objectFit: 'cover' }}
  />
</div>

Issue 2: Dynamic Content Insertion

Problem:

// ❌ Inserting content without reserved space
function Article() {
  const [ad, setAd] = useState(null);
  
  useEffect(() => {
    loadAd().then(setAd);
  }, []);
  
  return (
    <article>
      <h1>Article Title</h1>
      {ad && <AdBanner ad={ad} />} {/* Causes layout shift! */}
      <p>Article content...</p>
    </article>
  );
}

Solution:

// ✅ Reserve space for dynamic content
function Article() {
  const [ad, setAd] = useState(null);
  
  useEffect(() => {
    loadAd().then(setAd);
  }, []);
  
  return (
    <article>
      <h1>Article Title</h1>
      {/* Reserve space with min-height */}
      <div style={{ minHeight: '250px' }}>
        {ad ? <AdBanner ad={ad} /> : <AdPlaceholder />}
      </div>
      <p>Article content...</p>
    </article>
  );
}

Issue 3: Web Fonts Causing FOIT/FOUT

Problem:

/* ❌ No font loading strategy */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2');
}

body {
  font-family: 'CustomFont', sans-serif;
}

Solution:

/* ✅ Use font-display for better loading */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-display: swap; /* or optional */
}

/* ✅ Preload critical fonts */

<link 
  rel="preload" 
  href="/fonts/custom-font.woff2" 
  as="font" 
  type="font/woff2"
  crossorigin
>

Rendering Performance

React Rendering Optimization

Issue 1: Unnecessary Re-renders

Problem:

// ❌ Child re-renders on every parent update
function Parent() {
  const [count, setCount] = useState(0);
  
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ExpensiveChild /> {/* Re-renders unnecessarily */}
    </>
  );
}

Solution:

// ✅ Memoize to prevent unnecessary re-renders
const ExpensiveChild = React.memo(function ExpensiveChild({ data }) {
  // Expensive rendering logic
  return <div>{/* ... */}</div>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const data = useMemo(() => computeData(), []);
  
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ExpensiveChild data={data} />
    </>
  );
}

Issue 2: Large Lists Without Virtualization

Problem:

// ❌ Rendering 10,000 items
function LargeList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Solution:

// ✅ Virtual scrolling with react-window
import { FixedSizeList } from 'react-window';

function LargeList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );
  
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={35}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

CSS Performance

Issue 1: Expensive CSS Selectors

Problem:

/* ❌ Universal selectors, deep descendant selectors */
* {
  box-sizing: border-box;
}

.container div div div p {
  color: blue;
}

[data-attr*="value"] {
  /* Attribute selectors with wildcards */
}

Solution:

/* ✅ Specific, shallow selectors */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

.paragraph-text {
  color: blue;
}

/* Use classes instead of complex selectors */
.specific-element {
  /* ... */
}

Issue 2: Layout Thrashing

Problem:

// ❌ Interleaving reads and writes
elements.forEach(el => {
  const height = el.offsetHeight; // Read (forces layout)
  el.style.height = height + 10 + 'px'; // Write
  const width = el.offsetWidth; // Read (forces layout again)
  el.style.width = width + 10 + 'px'; // Write
});

Solution:

// ✅ Batch reads, then batch writes
const measurements = elements.map(el => ({
  height: el.offsetHeight,
  width: el.offsetWidth
}));

elements.forEach((el, i) => {
  el.style.height = measurements[i].height + 10 + 'px';
  el.style.width = measurements[i].width + 10 + 'px';
});

Resource Loading

Code Splitting

Problem:

// ❌ Single large bundle
import Dashboard from './Dashboard';
import Analytics from './Analytics';
import Settings from './Settings';

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/analytics" element={<Analytics />} />
      <Route path="/settings" element={<Settings />} />
    </Routes>
  );
}

Solution:

// ✅ Route-based code splitting
const Dashboard = lazy(() => import('./Dashboard'));
const Analytics = lazy(() => import('./Analytics'));
const Settings = lazy(() => import('./Settings'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/analytics" element={<Analytics />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

// ✅ Component-based code splitting
function UserProfile({ userId }) {
  const [showSettings, setShowSettings] = useState(false);
  
  const UserSettings = lazy(() => import('./UserSettings'));
  
  return (
    <div>
      <UserInfo userId={userId} />
      <button onClick={() => setShowSettings(true)}>Settings</button>
      
      {showSettings && (
        <Suspense fallback={<Spinner />}>
          <UserSettings userId={userId} />
        </Suspense>
      )}
    </div>
  );
}

Preloading and Prefetching

// ✅ Strategic resource hints
function App() {
  useEffect(() => {
    // Preload critical resources
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'script';
    link.href = '/critical-script.js';
    document.head.appendChild(link);
    
    // Prefetch likely next navigation
    const prefetchLink = document.createElement('link');
    prefetchLink.rel = 'prefetch';
    prefetchLink.href = '/next-page-bundle.js';
    document.head.appendChild(prefetchLink);
  }, []);
  
  return (/* ... */);
}

// ✅ Next.js Link with prefetch
<Link href="/dashboard" prefetch={true}>
  Dashboard
</Link>

Bundle Optimization

Tree Shaking

Problem:

// ❌ Importing entire library
import _ from 'lodash';
import * as dateFns from 'date-fns';

const result = _.debounce(fn, 300);
const formatted = dateFns.format(date, 'yyyy-MM-dd');

Solution:

// ✅ Import only what you need
import debounce from 'lodash/debounce';
import { format } from 'date-fns';

const result = debounce(fn, 300);
const formatted = format(date, 'yyyy-MM-dd');

Dependency Analysis

Check bundle size regularly:

# Analyze bundle
npm run build -- --analyze

# Check individual package sizes
npx bundlephobia lodash
npx bundlephobia date-fns

# Find duplicate dependencies
npx duplicate-package-checker-webpack-plugin

Common heavy dependencies to watch:

• moment.js (replace with date-fns or dayjs)
• lodash (import individual functions)
• material-ui (use individual imports)

Memory Management

Memory Leaks

Common Causes:

1. Event Listeners Not Removed

Problem:

// ❌ Event listener not cleaned up
useEffect(() => {
  window.addEventListener('resize', handleResize);
  // Missing cleanup!
}, []);

Solution:

// ✅ Proper cleanup
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

2. Timers Not Cleared

Problem:

// ❌ Timer continues after unmount
useEffect(() => {
  setInterval(() => {
    updateData();
  }, 1000);
}, []);

Solution:

// ✅ Clear timer on cleanup
useEffect(() => {
  const intervalId = setInterval(() => {
    updateData();
  }, 1000);
  
  return () => clearInterval(intervalId);
}, []);

3. Closures Holding References

Problem:

// ❌ Closure holding reference to large object
function useDataCache() {
  const cache = useRef(new Map());
  
  const addToCache = (key, value) => {
    cache.current.set(key, value);
    // Cache never cleared, grows indefinitely
  };
  
  return { addToCache };
}

Solution:

// ✅ Implement cache eviction
function useDataCache(maxSize = 100) {
  const cache = useRef(new Map());
  
  const addToCache = (key, value) => {
    if (cache.current.size >= maxSize) {
      // Remove oldest entry (FIFO)
      const firstKey = cache.current.keys().next().value;
      cache.current.delete(firstKey);
    }
    cache.current.set(key, value);
  };
  
  useEffect(() => {
    return () => cache.current.clear();
  }, []);
  
  return { addToCache };
}

Network Optimization

API Request Optimization

Problem:

// ❌ Multiple sequential requests
async function loadUserData(userId) {
  const user = await fetch(`/api/users/${userId}`);
  const posts = await fetch(`/api/users/${userId}/posts`);
  const comments = await fetch(`/api/users/${userId}/comments`);
  
  return { user, posts, comments };
}

Solution:

// ✅ Parallel requests
async function loadUserData(userId) {
  const [user, posts, comments] = await Promise.all([
    fetch(`/api/users/${userId}`),
    fetch(`/api/users/${userId}/posts`),
    fetch(`/api/users/${userId}/comments`)
  ]);
  
  return { user, posts, comments };
}

// ✅ Or use GraphQL to fetch in single request
const query = gql`
  query GetUserData($userId: ID!) {
    user(id: $userId) {
      id
      name
      posts {
        id
        title
      }
      comments {
        id
        text
      }
    }
  }
`;

Request Deduplication

// ✅ Deduplicate identical requests
const requestCache = new Map<string, Promise<any>>();

async function fetchWithDedup<T>(url: string): Promise<T> {
  if (requestCache.has(url)) {
    return requestCache.get(url)!;
  }
  
  const promise = fetch(url).then(r => r.json());
  requestCache.set(url, promise);
  
  // Clear after completion
  promise.finally(() => {
    setTimeout(() => requestCache.delete(url), 1000);
  });
  
  return promise;
}

Performance Monitoring

Performance Metrics Collection

// ✅ Collect real user metrics
function reportWebVitals(metric: Metric) {
  // Send to analytics
  analytics.track('web-vital', {
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
  });
}

// Next.js
export function reportWebVitals(metric: NextWebVitalsMetric) {
  console.log(metric);
}

// React with web-vitals library
import { onCLS, onFID, onLCP, onFCP, onTTFB } from 'web-vitals';

onCLS(reportWebVitals);
onFID(reportWebVitals);
onLCP(reportWebVitals);
onFCP(reportWebVitals);
onTTFB(reportWebVitals);

Performance Budget

// webpack.config.js
module.exports = {
  performance: {
    maxAssetSize: 244000, // 244 KB
    maxEntrypointSize: 244000,
    hints: 'error'
  }
};

// lighthouse-budget.json
{
  "resourceSizes": [
    {
      "resourceType": "script",
      "budget": 300
    },
    {
      "resourceType": "stylesheet",
      "budget": 50
    }
  ],
  "timings": [
    {
      "metric": "interactive",
      "budget": 3000
    },
    {
      "metric": "first-contentful-paint",
      "budget": 1500
    }
  ]
}

Performance Testing

// ✅ Automated performance testing
describe('Performance', () => {
  it('should load homepage within budget', async () => {
    const metrics = await measurePageLoad('/');
    
    expect(metrics.LCP).toBeLessThan(2500);
    expect(metrics.FID).toBeLessThan(100);
    expect(metrics.CLS).toBeLessThan(0.1);
    expect(metrics.FCP).toBeLessThan(1800);
    expect(metrics.TTFB).toBeLessThan(600);
  });
  
  it('should maintain 60fps during scroll', async () => {
    const fps = await measureScrollPerformance();
    expect(fps).toBeGreaterThanOrEqual(60);
  });
});

Review Report Templates

Templates and examples for frontend code review reports.

Table of Contents

• Executive Summary Template
• Detailed Review Report
• Quick Checklist Report
• Issue Report Template
• Pull Request Review Template
• Security Audit Report
• Performance Audit Report
• Accessibility Audit Report

---

Executive Summary Template

# Frontend Code Review - Executive Summary

**Project:** [Project Name]
**Review Date:** [Date]
**Reviewer:** [Name]
**Review Scope:** [Description of what was reviewed]

## Overall Assessment

**Rating:** ⭐⭐⭐⭐☆ (4/5)

## Summary
[2-3 sentence high-level summary of code quality and main findings]

### Key Findings

#### ✅ Strengths
- [Strength 1]
- [Strength 2]
- [Strength 3]

#### ⚠️ Areas for Improvement
- [Issue 1 - Priority: High/Medium/Low]
- [Issue 2 - Priority: High/Medium/Low]
- [Issue 3 - Priority: High/Medium/Low]

#### 🚨 Critical Issues
- [Critical issue 1]
- [Critical issue 2]

## Scores by Category

| Category | Score | Notes |
| ---------- | ------- |-------|
| Code Quality | 8/10 | [Brief note] |
| Performance | 7/10 | [Brief note] |
| Accessibility | 6/10 | [Brief note] |
| Security | 9/10 | [Brief note] |
| Testing | 7/10 | [Brief note] |
| Documentation | 8/10 | [Brief note] |

## Recommendations

### Immediate Actions (Must Fix)
1. [Action 1]
2. [Action 2]

### Short-term Improvements (Should Fix)
1. [Action 1]
2. [Action 2]

### Long-term Enhancements (Nice to Have)
1. [Action 1]
2. [Action 2]

## Next Steps
[Description of recommended next steps and timeline]

---

Detailed Review Report

# Frontend Code Review - Detailed Report

**Project:** [Project Name]
**Codebase:** [Repository/Branch]
**Review Period:** [Start Date] - [End Date]
**Reviewer(s):** [Names]

---

## Table of Contents
1. [Code Quality](#code-quality)
2. [Performance](#performance)
3. [Accessibility](#accessibility)
4. [Security](#security)
5. [CSS/Styling](#cssstyling)
6. [Testing](#testing)
7. [Documentation](#documentation)
8. [Recommendations](#recommendations)

---

## 1. Code Quality

### Overview
[General assessment of code quality]

### Component Structure

#### ✅ Good Practices Observed
- **Single Responsibility:** Components like `UserAvatar`, `UserProfile` follow SRP well
- **Composition:** Good use of composition in `Card` component family
- **Props Design:** Type-safe props with clear interfaces

**Example:**

// Good example found at: src/components/UserProfile.tsx interface UserProfileProps { user: User; onUpdate: (user: User) => void; }

### ⚠️ Issues Found

**Issue 1: God Component**

- **Location:** `src/components/Dashboard.tsx` (lines 45-350)
- **Severity:** High
- **Description:** Dashboard component handles too many responsibilities
- **Impact:** Hard to maintain, test, and reuse
- **Recommendation:**

// Split into smaller components:

• DashboardHeader
• DashboardStats
• DashboardChart
• DashboardActivity

**Issue 2: Prop Drilling**

- **Location:** `src/components/Layout.tsx` → `Sidebar.tsx` → `UserMenu.tsx`
- **Severity:** Medium
- **Description:** User state passed through 3 levels unnecessarily
- **Recommendation:** Use Context or state management library

### TypeScript Usage

#### ✅ Good Practices

- Strict mode enabled
- No use of `any` in core business logic
- Good use of discriminated unions

#### ⚠️ Issues

- 12 instances of `any` type in `src/utils/` directory
- Missing return types on several functions
- Inconsistent use of interfaces vs types

**Recommendations:**

// Fix: Add explicit return types function calculateTotal(items: Item[]): number { return items.reduce((sum, item) => sum + item.price, 0); }

// Fix: Replace any with proper types // Before: function processData(data: any) { ... }

// After: interface ApiResponse { data: Array<{ id: string; value: number }>; metadata: { timestamp: string }; } function processData(data: ApiResponse) { ... }

### State Management

#### Analysis

- Using Redux Toolkit (good choice)
- Selectors properly memoized
- Actions well-typed

#### Issues

- Too much state in global store (UI state should be local)
- Some components accessing store directly instead of props

---

## 2. Performance

### Overview

**Current Performance:**

- LCP: 3.2s (⚠️ Should be < 2.5s)
- FID: 85ms (✅ Good)
- CLS: 0.08 (✅ Good)

### Bundle Size Analysis

Main bundle: 342 KB (gzipped: 98 KB) Vendor bundle: 512 KB (gzipped: 156 KB) ⚠️ Too large

Largest dependencies:

• moment.js: 72 KB (recommended: replace with date-fns)
• lodash: 48 KB (recommended: import individual functions)

### Issues Found

**Issue 1: Large Bundle Size**

- **Severity:** High
- **Impact:** Slow initial load time
- **Files:** webpack.config.js, package.json
- **Recommendations:**
  1. Replace moment.js with date-fns (save ~50 KB)
  2. Use individual lodash imports (save ~30 KB)
  3. Implement code splitting for routes

**Issue 2: Unoptimized Images**

- **Location:** `/public/images/`
- **Severity:** Medium
- **Impact:** Slow LCP, unnecessary bandwidth
- **Recommendations:**
  1. Convert to WebP/AVIF formats
  2. Implement responsive images
  3. Add lazy loading for below-fold images

**Issue 3: No Virtualization for Long Lists**

- **Location:** `src/components/DataTable.tsx`
- **Severity:** Medium
- **Impact:** Poor performance with 1000+ rows
- **Recommendation:** Implement react-window or similar

### Rendering Performance

**Unnecessary Re-renders Found:**

- `ProductCard` re-renders on every parent update (line 45)
- Inline function creation in render (15 instances)

**Recommendations:**

// Use React.memo const ProductCard = React.memo(({ product }) => { return <Card>{product.name}</Card>; });

// Use useCallback for handlers const handleClick = useCallback(() => { updateProduct(product); }, [product]);

---

## 3. Accessibility

### WCAG Compliance Level: **AA (Partial)**

### Automated Testing Results

- axe-core: 23 issues found
- Lighthouse: Accessibility score 78/100

### Critical Issues

**Issue 1: Missing Form Labels**

- **Location:** `src/components/SearchForm.tsx` (lines 34-42)
- **WCAG:** 3.3.2 (Level A)
- **Impact:** Screen readers cannot identify input purpose
- **Recommendation:**

// Add proper labels <label htmlFor="search-input">Search products</label> <input id="search-input" type="search" placeholder="Search..." aria-label="Search products" />

**Issue 2: Insufficient Color Contrast**

- **Location:** `src/styles/theme.css` (lines 23-45)
- **WCAG:** 1.4.3 (Level AA)
- **Contrast Ratio:** 3.2:1 (should be 4.5:1)
- **Recommendation:** Change secondary text color from `#999` to `#666`

**Issue 3: Keyboard Navigation Issues**

- **Location:** `src/components/Dropdown.tsx`
- **WCAG:** 2.1.1 (Level A)
- **Impact:** Cannot navigate dropdown with keyboard
- **Recommendation:** Implement arrow key navigation and Escape to close

### Summary by Category

| Category | Issues | Severity |
| ---------- | -------- |----------|
| Keyboard Navigation | 8 | High |
| Color Contrast | 12 | Medium |
| Form Labels | 5 | High |
| ARIA Usage | 7 | Medium |
| Semantic HTML | 3 | Low |

---

## 4. Security

### Security Audit Level: **Good with some concerns**

### Findings

#### ✅ Good Security Practices

- Using HTTPS exclusively
- HttpOnly cookies for authentication
- Input sanitization with DOMPurify
- CSRF protection implemented

#### 🚨 Critical Security Issues

**Issue 1: XSS Vulnerability**

- **Location:** `src/components/UserComment.tsx` (line 67)
- **Severity:** Critical
- **CWE:** CWE-79 (Cross-site Scripting)
- **Description:**

// Vulnerable code: <div dangerouslySetInnerHTML={{ __html: comment }} />

- **Recommendation:**

// Sanitize before rendering: import DOMPurify from 'dompurify';

<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(comment, { ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'] }) }} />

**Issue 2: Insecure Direct Object Reference**

- **Location:** `src/api/users.ts` (line 34)
- **Severity:** High
- **Description:** User ID from URL used directly without authorization check
- **Recommendation:** Add authorization check on server, validate on client

#### ⚠️ Medium Priority Issues

**Issue 3: Sensitive Data in Console Logs**

- **Location:** Multiple files
- **Severity:** Medium
- **Found in:**
  - `src/hooks/useAuth.ts` (line 45) - logs password
  - `src/utils/api.ts` (line 122) - logs API tokens
- **Recommendation:** Remove all console.logs with sensitive data, use proper logging library

### Dependency Vulnerabilities

npm audit results:

• 2 high severity vulnerabilities
• 5 moderate severity vulnerabilities

High severity: 1. Regular Expression Denial of Service in validator@13.5.2 Fix: npm install validator@13.9.0

2. Prototype Pollution in lodash@4.17.20 Fix: npm install lodash@4.17.21

---

## 5. CSS/Styling

### Overview

- Using CSS Modules (good choice)
- Responsive design implemented
- Some inconsistencies in approach

### Issues Found

**Issue 1: Inconsistent Styling Approach**

- **Severity:** Medium
- **Description:** Mix of inline styles, CSS Modules, and styled-components
- **Recommendation:** Standardize on one approach (CSS Modules preferred)

**Issue 2: Unused CSS**

- **Impact:** 45 KB of unused CSS in bundle
- **Files:** `global.css`, `legacy.css`
- **Recommendation:** Use PurgeCSS or remove unused files

**Issue 3: No Design System**

- **Impact:** Inconsistent spacing, colors, typography
- **Recommendation:** Create design tokens file

/ design-tokens.css / :root { / Colors / --color-primary: #0066cc; --color-secondary: #6c757d;

/ Spacing / --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem;

/ Typography / --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; }

---

## 6. Testing

### Test Coverage

Overall coverage: 68%

By category:

• Components: 72%
• Utils: 81%
• Hooks: 65%
• API clients: 45% ⚠️ Low

### Issues Found

**Issue 1: Low API Client Coverage**

- **Files:** `src/api/*.ts`
- **Current:** 45%
- **Target:** 80%+
- **Recommendation:** Add integration tests for API clients

**Issue 2: Missing E2E Tests**

- **Severity:** Medium
- **Impact:** Critical user flows not tested
- **Recommendation:** Add Playwright/Cypress tests for:
  1. Login flow
  2. Checkout flow
  3. User registration

**Issue 3: Incomplete Unit Tests**

- Several components have tests only for happy path
- Error cases not tested
- Edge cases missing

**Example:**

// Add error case tests describe('UserProfile', () => { it('should render user data', () => { ... }); // ✅ Exists

it('should handle loading state', () => { ... }); // ❌ Missing it('should handle error state', () => { ... }); // ❌ Missing it('should handle missing user data', () => { ... }); // ❌ Missing });

---

## 7. Documentation

### Code Documentation

#### ✅ Good Practices

- JSDoc comments on utility functions
- README with setup instructions
- Component props documented with TypeScript

#### ⚠️ Areas for Improvement

**Issue 1: Missing Complex Logic Documentation**

- `src/utils/calculations.ts` - complex algorithms not explained
- `src/hooks/useDataSync.ts` - intricate state management not documented

**Recommendation:**

/**

• Calculates the weighted average of product ratings based on
• recency and user reputation.

*

• Algorithm:
• 1. Newer ratings (< 30 days) get 1.5x weight
• 2. Ratings from verified users get 1.2x weight
• 3. Final score normalized to 0-5 range

*

• @param ratings - Array of rating objects
• @returns Weighted average score (0-5)
• @example
• calculateWeightedRating([
• { score: 5, date: '2024-01-01', verified: true },
• { score: 3, date: '2023-06-01', verified: false }
• ]) // Returns 4.2

*/ export function calculateWeightedRating(ratings: Rating[]): number { // Implementation }

**Issue 2: No Architecture Documentation**

- Recommendation: Add `ARCHITECTURE.md` explaining:
  - Directory structure
  - State management approach
  - Data flow
  - Component patterns used

**Issue 3: Missing API Documentation**

- Recommendation: Document API client usage, error handling, authentication

---

## 8. Recommendations

### Immediate Actions (1-2 weeks)

#### Priority 1: Critical Security Issues

1. **Fix XSS vulnerability in UserComment component**
   - Estimated effort: 2 hours
   - Files: `src/components/UserComment.tsx`
   - Add DOMPurify sanitization

2. **Update vulnerable dependencies**
   - Estimated effort: 4 hours
   - Run `npm audit fix`
   - Test for breaking changes
   - Update lodash and validator

3. **Fix accessibility issues preventing keyboard navigation**
   - Estimated effort: 8 hours
   - Files: Dropdown, Modal, Form components
   - Implement proper keyboard event handlers

#### Priority 2: Performance Improvements

1. **Optimize bundle size**
   - Estimated effort: 1 day
   - Replace moment.js with date-fns
   - Use individual lodash imports
   - Implement code splitting

2. **Optimize images**
   - Estimated effort: 4 hours
   - Convert to WebP
   - Add responsive images
   - Implement lazy loading

### Short-term Improvements (1-2 months)

1. **Refactor Dashboard component**
   - Break into smaller components
   - Improve maintainability

2. **Increase test coverage to 80%+**
   - Add missing unit tests
   - Implement E2E tests for critical flows

3. **Create design system**
   - Define design tokens
   - Create component library documentation

4. **Improve accessibility to WCAG AA compliance**
   - Fix all color contrast issues
   - Add proper ARIA labels
   - Ensure all interactive elements are keyboard accessible

### Long-term Enhancements (3-6 months)

1. **Migrate to TypeScript strict mode**
2. **Implement automated accessibility testing in CI/CD**
3. **Set up performance monitoring**
4. **Create comprehensive component documentation**

---

## Appendix

### Files Reviewed

Total files reviewed: 127

• Components: 45 files
• Hooks: 12 files
• Utils: 18 files
• API clients: 8 files
• Styles: 32 files
• Tests: 12 files

### Review Methodology

- Manual code review
- Automated testing (ESLint, axe-core, Lighthouse)
- Performance profiling
- Security scanning
- Dependency audit

### Tools Used

- ESLint
- Prettier
- axe DevTools
- Chrome Lighthouse
- React DevTools Profiler
- npm audit
- Snyk

### Reviewer Notes

[Any additional context or notes for the development team]

---

Quick Checklist Report

# Frontend Code Review Checklist

**Project:** [Name]
**Date:** [Date]
**Reviewer:** [Name]

## Code Quality
- [ ] Components follow single responsibility principle
- [ ] No code duplication (DRY)
- [ ] TypeScript types properly defined (no `any`)
- [ ] Proper error handling implemented
- [ ] Code is readable and well-formatted
- [ ] No console.logs in production code

## Performance
- [ ] Bundle size optimized (< 250 KB)
- [ ] Images optimized (WebP, lazy loading)
- [ ] Code splitting implemented
- [ ] No unnecessary re-renders
- [ ] Large lists use virtualization
- [ ] LCP < 2.5s
- [ ] FID < 100ms
- [ ] CLS < 0.1

## Accessibility
- [ ] All interactive elements keyboard accessible
- [ ] Proper heading hierarchy
- [ ] Form labels present and associated
- [ ] ARIA attributes used correctly
- [ ] Color contrast meets WCAG AA (4.5:1)
- [ ] Alt text on images
- [ ] Focus indicators visible
- [ ] Screen reader tested

## Security
- [ ] No XSS vulnerabilities
- [ ] Input sanitized
- [ ] CSRF protection implemented
- [ ] No sensitive data in localStorage
- [ ] Dependencies up to date
- [ ] No SQL injection risks
- [ ] HTTPS enforced
- [ ] CSP headers configured

## Testing
- [ ] Unit tests present (coverage > 80%)
- [ ] Integration tests for critical flows
- [ ] E2E tests for main user journeys
- [ ] Edge cases tested
- [ ] Error cases tested

## Documentation
- [ ] README with setup instructions
- [ ] Complex logic documented
- [ ] API client usage documented
- [ ] Component props documented

## Overall Assessment
**Pass / Fail / Pass with Conditions**

**Critical Issues:** [Number]
**High Priority Issues:** [Number]
**Medium Priority Issues:** [Number]
**Low Priority Issues:** [Number]

**Notes:**
[Additional comments]

---

Issue Report Template

# Issue Report

**Issue ID:** FR-001
**Date Reported:** 2024-01-15
**Severity:** High
**Status:** Open

## Summary
[One-line description of the issue]

## Location
- **File:** `src/components/UserProfile.tsx`
- **Lines:** 45-67
- **Function/Component:** `UserProfile`

## Category
- [ ] Code Quality
- [x] Performance
- [ ] Accessibility
- [ ] Security
- [ ] Testing
- [ ] Documentation

## Description
[Detailed description of the issue]

## Current Behavior

// Current problematic code function UserProfile({ userId }) { const [user, setUser] = useState(null);

useEffect(() => { fetch(/api/users/${userId}) .then(res => res.json()) .then(setUser); }, []); // Missing userId dependency!

return <div>{user?.name}</div>; }

## Expected Behavior

[Description of what should happen instead]

## Impact

- **User Impact:** High - Profile may show wrong user data
- **Performance Impact:** None
- **Security Impact:** Medium - Can access wrong user data
- **Accessibility Impact:** None

## Recommendation

// Fixed code function UserProfile({ userId }) { const [user, setUser] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false);

useEffect(() => { let cancelled = false;

async function fetchUser() { setLoading(true); try { const response = await fetch(/api/users/${userId}); if (!response.ok) throw new Error('Failed to fetch'); const data = await response.json();

if (!cancelled) { setUser(data); } } catch (err) { if (!cancelled) { setError(err.message); } } finally { if (!cancelled) { setLoading(false); } } }

fetchUser();

return () => { cancelled = true; }; }, [userId]); // Correct dependency

if (loading) return <Spinner />; if (error) return <Error message={error} />; if (!user) return null;

return <div>{user.name}</div>; }

## Estimated Effort

**Time:** 2 hours
**Complexity:** Medium

## Related Issues

- FR-002: Similar issue in UserSettings component
- FR-015: General patterns for data fetching

## Notes

[Any additional context or information]

---

Pull Request Review Template

# Pull Request Review

**PR:** #123 - Add user authentication
**Author:** @developer
**Reviewer:** @reviewer
**Date:** 2024-01-15

## Summary
[Brief description of what this PR does]

## Review Checklist

### Code Quality
- [x] Code follows project style guide
- [x] No unnecessary code duplication
- [ ] ⚠️ TypeScript types could be more specific
- [x] Error handling is appropriate
- [x] Code is self-documenting

### Functionality
- [x] Feature works as described
- [x] No regressions in existing features
- [x] Edge cases handled
- [ ] ⚠️ Error states need improvement

### Testing
- [x] Unit tests added
- [x] Tests cover happy path
- [ ] ❌ Missing tests for error cases
- [ ] ❌ No E2E tests added

### Performance
- [x] No performance regressions
- [x] Bundle size increase acceptable (+12 KB)
- [x] No unnecessary re-renders

### Accessibility
- [x] Keyboard accessible
- [ ] ⚠️ Missing ARIA labels on icon buttons
- [x] Color contrast acceptable

### Security
- [x] No security vulnerabilities introduced
- [x] Input validation present
- [x] Authentication properly implemented

## Feedback

### 🚨 Must Fix (Blocking)

**1. Missing error case tests**
- **Location:** `src/hooks/useAuth.test.ts`
- **Issue:** Only happy path tested
- **Action:** Add tests for network errors, invalid credentials, expired tokens

**2. Missing ARIA labels**
- **Location:** `src/components/LoginForm.tsx` (lines 34, 56)
- **Issue:** Icon buttons not labeled for screen readers

// Change this: <button onClick={handleTogglePassword}> <EyeIcon /> </button>

// To this: <button onClick={handleTogglePassword} aria-label="Toggle password visibility" > <EyeIcon aria-hidden="true" /> </button>

### ⚠️ Should Fix (Important)

**1. Type definitions too loose**

- **Location:** `src/types/auth.ts`
- **Current:**

interface User { id: string; data: any; // Too loose! }

- **Suggested:**

interface User { id: string; email: string; name: string; role: 'admin' | 'user'; createdAt: string; }

**2. Error messages not user-friendly**

// Current: catch (error) { setError(error.message); // Technical error shown to user }

// Suggested: catch (error) { const userMessage = error.code === 'auth/wrong-password' ? 'Invalid email or password' : 'An error occurred. Please try again.'; setError(userMessage); }

### 💡 Nice to Have (Optional)

**1. Consider extracting validation logic**

// Current: Validation inline in component // Suggested: Extract to separate validator functions export const validators = { email: (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value), password: (value: string) => value.length >= 8 };

**2. Add JSDoc comments for public APIs**

### ✅ Excellent Work

- Clean component structure
- Good use of TypeScript
- Proper error boundaries
- Well-organized file structure

## Decision

**Status:** ⏸️ Changes Requested

**Summary:**
Good implementation overall, but needs fixes for:

1. Missing error case tests (blocking)
2. Accessibility improvements (blocking)
3. Tighter TypeScript types (important)

Please address the "Must Fix" items and we can merge.

## Additional Comments

[Any other feedback or discussion points]

---

Security Audit Report

# Security Audit Report

**Project:** [Name]
**Audit Date:** 2024-01-15
**Auditor:** [Name]
**Scope:** Frontend application security review

## Executive Summary

**Overall Security Rating:** 🟡 Medium Risk

**Critical Issues:** 2
**High Priority:** 5
**Medium Priority:** 8
**Low Priority:** 3

## Findings by Category

### 1. Cross-Site Scripting (XSS)

#### 🚨 Critical: Unescaped User Content
- **CWE:** CWE-79
- **Location:** `src/components/UserComment.tsx:67`
- **Risk:** Attackers can inject malicious scripts
- **Proof of Concept:**

// Malicious input: const comment = '<img src=x onerror="alert(document.cookie)">';

- **Remediation:** Add DOMPurify sanitization

### 2. Authentication & Session Management

#### ⚠️ High: Token Storage in localStorage

- **Location:** `src/utils/auth.ts:23`
- **Risk:** Tokens accessible via XSS
- **Recommendation:** Use HttpOnly cookies

### 3. Data Exposure

#### ⚠️ Medium: Sensitive Data in Redux DevTools

- **Risk:** User data visible in browser tools
- **Recommendation:** Disable Redux DevTools in production

### 4. Dependencies

**Vulnerable Dependencies Found:** 7

| Package | Version | Severity | Fix Available |
| --------- | --------- |----------|---------------|
| lodash | 4.17.20 | High | 4.17.21 |
| validator | 13.5.2 | High | 13.9.0 |
| axios | 0.21.1 | Medium | 1.6.0 |

## Remediation Plan

### Immediate (24-48 hours)

1. Fix XSS vulnerabilities
2. Update vulnerable dependencies
3. Move tokens to HttpOnly cookies

### Short-term (1-2 weeks)

1. Implement CSP headers
2. Add rate limiting for API calls
3. Security headers audit

### Long-term (1-3 months)

1. Implement automated security scanning in CI/CD
2. Regular dependency audits
3. Security awareness training for team

---

Performance Audit Report

# Performance Audit Report

**Project:** [Name]
**Audit Date:** 2024-01-15
**Auditor:** [Name]

## Core Web Vitals

| Metric | Current | Target | Status |
| -------- | --------- |--------|--------|
| LCP | 3.2s | < 2.5s | ❌ Fail |
| FID | 85ms | < 100ms | ✅ Pass |
| CLS | 0.08 | < 0.1 | ✅ Pass |
| FCP | 1.9s | < 1.8s | ⚠️ Almost |
| TTFB | 420ms | < 600ms | ✅ Pass |

## Detailed Analysis

### LCP Issues (3.2s → Target: 2.5s)

**Root Causes:**
1. Large hero image (1.2 MB) - Add 800ms
2. Blocking JavaScript - Add 400ms
3. Slow server response - Add 200ms

**Recommendations:**
1. Optimize hero image (WebP, responsive)
2. Defer non-critical JavaScript
3. Implement CDN

**Expected Impact:** 3.2s → 2.1s

### Bundle Size Analysis

Current: 512 KB (gzipped: 156 KB) Target: < 300 KB (gzipped: < 100 KB)

Breakdown:

• moment.js: 72 KB → Replace with date-fns (15 KB) - Save 57 KB
• lodash: 48 KB → Individual imports - Save 30 KB
• Unused code: 35 KB → Tree shaking - Save 35 KB

Total potential savings: 122 KB (23% reduction)

## Action Plan

### Priority 1: LCP Improvements
- [ ] Optimize images
- [ ] Implement code splitting
- [ ] Add CDN

**Expected Impact:** 🟢 LCP: 3.2s → 2.1s

### Priority 2: Bundle Size
- [ ] Replace moment.js
- [ ] Use individual lodash imports
- [ ] Enable tree shaking

**Expected Impact:** 🟢 Bundle: 512 KB → 390 KB

---

Accessibility Audit Report

# Accessibility Audit Report

**Project:** [Name]
**Audit Date:** 2024-01-15
**Auditor:** [Name]
**WCAG Version:** 2.1
**Target Level:** AA

## Compliance Summary

**Current Compliance:** 67% (AA Level)

| Success Criterion | Level | Status |
| ------------------- | ------- |--------|
| 1.1.1 Non-text Content | A | ⚠️ Partial |
| 1.3.1 Info and Relationships | A | ✅ Pass |
| 1.4.3 Contrast (Minimum) | AA | ❌ Fail |
| 2.1.1 Keyboard | A | ⚠️ Partial |
| 2.4.3 Focus Order | A | ✅ Pass |
| 3.3.2 Labels or Instructions | A | ❌ Fail |
| 4.1.2 Name, Role, Value | A | ⚠️ Partial |

## Critical Issues

### 1. Insufficient Color Contrast (1.4.3)
**Impact:** 12 instances
**Severity:** High

| Element | Location | Current | Required | Fix |
| --------- | ---------- |---------|----------|-----|
| Secondary text | theme.css:23 | 3.2:1 | 4.5:1 | #999 → #666 |
| Button text | Button.tsx:45 | 2.8:1 | 4.5:1 | Adjust colors |

### 2. Missing Form Labels (3.3.2)
**Impact:** 5 forms
**Severity:** Critical

**Files:**
- SearchForm.tsx
- LoginForm.tsx
- ContactForm.tsx

### 3. Keyboard Navigation Issues (2.1.1)
**Impact:** 8 components
**Severity:** High

**Components:**
- Dropdown menu
- Modal dialog
- Tabs component

## Remediation Roadmap

### Phase 1: Critical Issues (Week 1-2)
- Fix color contrast
- Add form labels
- Implement keyboard navigation

**Expected:** 67% → 85% compliance

### Phase 2: Enhancement (Week 3-4)
- Add ARIA landmarks
- Improve screen reader support
- Add skip links

**Expected:** 85% → 95% compliance

### Phase 3: Polish (Month 2)
- User testing with assistive technology
- Documentation
- Automated testing in CI/CD

**Expected:** 95% → 100% AA compliance

---

Notes

These templates can be customized based on:

• Project size and complexity
• Team preferences
• Stakeholder requirements
• Review frequency
• Specific focus areas

Remember to:

1. Be specific with locations and line numbers 2. Provide code examples for issues and fixes 3. Include severity and impact assessments 4. Give actionable recommendations 5. Set realistic timelines 6. Follow up on previous reviews

Security Checklist

Comprehensive guidelines for frontend security best practices.

Table of Contents

• Cross-Site Scripting (XSS)
• Cross-Site Request Forgery (CSRF)
• Authentication and Authorization
• Content Security Policy (CSP)
• Secure Communication
• Input Validation
• Dependency Security
• Data Protection
• Common Vulnerabilities

Cross-Site Scripting (XSS)

Types of XSS

1. Stored XSS: Malicious script stored in database 2. Reflected XSS: Malicious script in URL parameters 3. DOM-based XSS: Malicious script manipulates DOM

XSS Prevention

React (Built-in Protection)

Problem:

// ❌ Dangerous: Direct HTML injection
function UserComment({ comment }) {
  return <div dangerouslySetInnerHTML={{ __html: comment }} />;
}

// ❌ Dangerous: Inline event handlers from user input
function SearchResults({ query }) {
  return <div onClick={eval(query)}>Click me</div>;
}

// ❌ Dangerous: href with javascript:
function Link({ url }) {
  return <a href={url}>Click here</a>; // User provides "javascript:alert('XSS')"
}

Solution:

// ✅ React automatically escapes by default
function UserComment({ comment }) {
  return <div>{comment}</div>; // Safe - React escapes HTML
}

// ✅ If HTML is necessary, sanitize first
import DOMPurify from 'dompurify';

function UserComment({ comment }) {
  const sanitized = DOMPurify.sanitize(comment, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
    ALLOWED_ATTR: ['href']
  });
  
  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
}

// ✅ Validate and sanitize URLs
function Link({ url }) {
  const isSafe = /^https?:\/\//.test(url); // Only http/https
  
  if (!isSafe) {
    return null;
  }
  
  return <a href={url} rel="noopener noreferrer">Click here</a>;
}

// ✅ Better: Use allowlist
const ALLOWED_DOMAINS = ['example.com', 'trusted.com'];

function Link({ url }) {
  try {
    const urlObj = new URL(url);
    const isAllowed = ALLOWED_DOMAINS.some(domain => 
      urlObj.hostname === domain || urlObj.hostname.endsWith(`.${domain}`)
    );
    
    if (!isAllowed) {
      return null;
    }
    
    return <a href={url} rel="noopener noreferrer">Click here</a>;
  } catch {
    return null;
  }
}

Vue (Built-in Protection)

Problem:

<!-- ❌ Dangerous: v-html with user input -->
<template>
  <div v-html="userComment"></div>
</template>

<!-- ❌ Dangerous: Dynamic event handlers -->
<template>
  <div @click="eval(userInput)">Click me</div>
</template>

Solution:

<!-- ✅ Vue automatically escapes by default -->
<template>
  <div>{{ userComment }}</div>
</template>

<!-- ✅ If HTML is necessary, sanitize first -->
<template>
  <div v-html="sanitizedComment"></div>
</template>

<script setup>
import DOMPurify from 'dompurify';
import { computed } from 'vue';

const props = defineProps<{ userComment: string }>();

const sanitizedComment = computed(() => 
  DOMPurify.sanitize(props.userComment, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
    ALLOWED_ATTR: ['href']
  })
);
</script>

Angular (Built-in Protection)

Problem:

// ❌ Dangerous: Bypassing sanitization
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  template: `<div [innerHTML]="unsafeHtml"></div>`
})
export class UnsafeComponent {
  constructor(private sanitizer: DomSanitizer) {}
  
  unsafeHtml = this.sanitizer.bypassSecurityTrustHtml(userInput);
}

Solution:

// ✅ Angular automatically sanitizes
@Component({
  template: `<div [innerHTML]="userInput"></div>` // Safe - Angular sanitizes
})
export class SafeComponent {
  userInput = '<script>alert("XSS")</script>'; // Will be sanitized
}

// ✅ If you need to bypass, use DOMPurify first
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import DOMPurify from 'dompurify';

@Component({
  template: `<div [innerHTML]="sanitizedHtml"></div>`
})
export class SaferComponent {
  sanitizedHtml: SafeHtml;
  
  constructor(private sanitizer: DomSanitizer) {
    const purified = DOMPurify.sanitize(userInput);
    this.sanitizedHtml = this.sanitizer.bypassSecurityTrustHtml(purified);
  }
}

Content Sanitization

// ✅ Comprehensive sanitization utility
import DOMPurify from 'dompurify';

interface SanitizeOptions {
  allowedTags?: string[];
  allowedAttributes?: Record<string, string[]>;
  allowDataAttributes?: boolean;
}

function sanitizeHTML(
  dirty: string,
  options: SanitizeOptions = {}
): string {
  const config = {
    ALLOWED_TAGS: options.allowedTags || [
      'p', 'br', 'strong', 'em', 'u', 'h1', 'h2', 'h3',
      'ul', 'ol', 'li', 'a', 'blockquote', 'code'
    ],
    ALLOWED_ATTR: options.allowedAttributes || {
      'a': ['href', 'title', 'target'],
      '*': options.allowDataAttributes ? ['data-*'] : []
    },
    ALLOW_DATA_ATTR: options.allowDataAttributes || false,
    ALLOW_UNKNOWN_PROTOCOLS: false,
    SAFE_FOR_TEMPLATES: true,
  };
  
  return DOMPurify.sanitize(dirty, config);
}

// Usage
const userInput = '<script>alert("XSS")</script><p>Hello</p>';
const safe = sanitizeHTML(userInput); // Returns: '<p>Hello</p>'

Cross-Site Request Forgery (CSRF)

CSRF Prevention

Problem:

// ❌ No CSRF protection
async function deleteAccount() {
  await fetch('/api/account/delete', {
    method: 'POST',
    credentials: 'include' // Sends cookies automatically
  });
}

Solution:

// ✅ CSRF token in headers
async function deleteAccount() {
  const csrfToken = getCsrfToken(); // From meta tag or cookie
  
  await fetch('/api/account/delete', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'X-CSRF-Token': csrfToken,
      'Content-Type': 'application/json'
    }
  });
}

// ✅ Get CSRF token from meta tag
function getCsrfToken(): string {
  const meta = document.querySelector('meta[name="csrf-token"]');
  return meta?.getAttribute('content') || '';
}

// ✅ Or from cookie
function getCsrfTokenFromCookie(): string {
  const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
  return match ? decodeURIComponent(match[1]) : '';
}

// ✅ Axios automatically handles XSRF-TOKEN cookie
import axios from 'axios';

const api = axios.create({
  baseURL: '/api',
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN'
});

SameSite Cookies

// ✅ Server should set SameSite attribute (client can verify)
// Server-side cookie setting:
// Set-Cookie: sessionId=xyz; SameSite=Strict; Secure; HttpOnly

// Client-side verification (for debugging)
function checkCookieSecurity() {
  // Note: Can't read HttpOnly cookies in JS (that's good!)
  const cookies = document.cookie.split(';');
  
  console.warn('Visible cookies (should be minimal):', cookies);
  
  // Check if secure context
  if (!window.isSecureContext) {
    console.error('Not in secure context - cookies may not be protected');
  }
}

Authentication and Authorization

Token Storage

Problem:

// ❌ Storing tokens in localStorage (vulnerable to XSS)
function login(credentials) {
  const response = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify(credentials)
  });
  
  const { token } = await response.json();
  localStorage.setItem('token', token); // Vulnerable to XSS!
}

Solution:

// ✅ Option 1: HttpOnly cookies (preferred)
// Server sets: Set-Cookie: token=xyz; HttpOnly; Secure; SameSite=Strict
async function login(credentials) {
  await fetch('/api/login', {
    method: 'POST',
    credentials: 'include', // Include cookies
    body: JSON.stringify(credentials)
  });
  // Token is in HttpOnly cookie - not accessible to JS
}

// ✅ Option 2: In-memory storage (for SPAs)
class AuthService {
  private token: string | null = null;
  
  async login(credentials: Credentials) {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials)
    });
    
    const { token } = await response.json();
    this.token = token; // Stored in memory only
  }
  
  getToken(): string | null {
    return this.token;
  }
  
  logout() {
    this.token = null;
  }
}

// ✅ Option 3: sessionStorage (better than localStorage, but still vulnerable to XSS)
// Only use if you must store in storage
function login(credentials) {
  const response = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify(credentials)
  });
  
  const { token } = await response.json();
  sessionStorage.setItem('token', token); // Cleared on tab close
}

JWT Best Practices

Problem:

// ❌ Storing sensitive data in JWT
const token = {
  userId: 123,
  password: 'secret123', // Never!
  creditCard: '1234-5678', // Never!
  role: 'admin'
};

// ❌ No expiration
const token = jwt.sign({ userId: 123 }, secret);

// ❌ Not verifying token expiration
function isAuthenticated() {
  const token = getToken();
  return !!token; // Not checking expiration!
}

Solution:

// ✅ Only store non-sensitive data with expiration
// Server-side JWT creation:
const token = jwt.sign(
  {
    userId: 123,
    role: 'admin',
    exp: Math.floor(Date.now() / 1000) + (60 * 60) // 1 hour
  },
  secret,
  { algorithm: 'HS256' }
);

// ✅ Client-side token validation
import jwtDecode from 'jwt-decode';

interface TokenPayload {
  userId: number;
  role: string;
  exp: number;
}

function isTokenValid(token: string): boolean {
  try {
    const decoded = jwtDecode<TokenPayload>(token);
    const currentTime = Date.now() / 1000;
    
    return decoded.exp > currentTime;
  } catch {
    return false;
  }
}

// ✅ Automatic token refresh
class AuthService {
  private token: string | null = null;
  private refreshTimer: number | null = null;
  
  async login(credentials: Credentials) {
    const { token, refreshToken } = await fetchToken(credentials);
    this.setToken(token);
    this.scheduleRefresh(token);
  }
  
  private scheduleRefresh(token: string) {
    const decoded = jwtDecode<TokenPayload>(token);
    const expiresIn = (decoded.exp * 1000) - Date.now();
    const refreshAt = expiresIn - (5 * 60 * 1000); // 5 min before expiration
    
    this.refreshTimer = window.setTimeout(() => {
      this.refreshToken();
    }, refreshAt);
  }
  
  private async refreshToken() {
    const { token } = await fetch('/api/refresh', {
      method: 'POST',
      credentials: 'include'
    }).then(r => r.json());
    
    this.setToken(token);
    this.scheduleRefresh(token);
  }
}

Role-Based Access Control (RBAC)

// ✅ Secure permission checking
interface User {
  id: number;
  role: 'admin' | 'user' | 'guest';
  permissions: string[];
}

function hasPermission(user: User, permission: string): boolean {
  return user.permissions.includes(permission);
}

// ✅ React protected route
function ProtectedRoute({ 
  children, 
  requiredPermission 
}: { 
  children: React.ReactNode;
  requiredPermission: string;
}) {
  const user = useUser();
  
  if (!user) {
    return <Navigate to="/login" />;
  }
  
  if (!hasPermission(user, requiredPermission)) {
    return <Navigate to="/unauthorized" />;
  }
  
  return <>{children}</>;
}

// Usage
<Route path="/admin" element={
  <ProtectedRoute requiredPermission="admin.access">
    <AdminPanel />
  </ProtectedRoute>
} />

// ⚠️ Important: Always verify permissions on the server!
// Client-side checks are for UX only, not security

Content Security Policy (CSP)

CSP Headers

Problem:

<!-- ❌ No CSP -->
<html>
  <head>
    <script src="https://random-cdn.com/script.js"></script>
  </head>
</html>

Solution:

<!-- ✅ Strict CSP -->
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="
      default-src 'self';
      script-src 'self' 'nonce-{random}' https://trusted-cdn.com;
      style-src 'self' 'nonce-{random}';
      img-src 'self' data: https:;
      font-src 'self' https://fonts.gstatic.com;
      connect-src 'self' https://api.example.com;
      frame-ancestors 'none';
      base-uri 'self';
      form-action 'self';
      upgrade-insecure-requests;
    ">
  </head>
</html>

Using Nonces with CSP

// ✅ Next.js with CSP nonces
// middleware.ts
import { NextResponse } from 'next/server';
import { v4 as uuidv4 } from 'uuid';

export function middleware(request) {
  const nonce = uuidv4();
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' blob: data:;
    font-src 'self';
    connect-src 'self';
    frame-ancestors 'none';
  `;
  
  const response = NextResponse.next();
  response.headers.set('Content-Security-Policy', cspHeader);
  response.headers.set('X-Nonce', nonce);
  
  return response;
}

// ✅ Use nonce in components
function Page() {
  const nonce = headers().get('X-Nonce');
  
  return (
    <html>
      <head>
        <script nonce={nonce} src="/script.js" />
      </head>
    </html>
  );
}

Secure Communication

HTTPS Only

Problem:

// ❌ Mixed content (HTTPS page loading HTTP resources)
function loadData() {
  fetch('http://api.example.com/data'); // Insecure!
}

// ❌ No validation of HTTPS
<img src={userProvidedUrl} />

Solution:

// ✅ Always use HTTPS
function loadData() {
  fetch('https://api.example.com/data');
}

// ✅ Validate HTTPS URLs
function isSecureUrl(url: string): boolean {
  try {
    const urlObj = new URL(url);
    return urlObj.protocol === 'https:';
  } catch {
    return false;
  }
}

function SecureImage({ src }: { src: string }) {
  if (!isSecureUrl(src)) {
    return <div>Invalid image URL</div>;
  }
  
  return <img src={src} />;
}

// ✅ Upgrade insecure requests with CSP
// Content-Security-Policy: upgrade-insecure-requests

API Security

// ✅ Secure API client
class SecureApiClient {
  private baseURL = 'https://api.example.com';
  private timeout = 10000;
  
  async request<T>(
    endpoint: string,
    options: RequestInit = {}
  ): Promise<T> {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), this.timeout);
    
    try {
      const response = await fetch(`${this.baseURL}${endpoint}`, {
        ...options,
        signal: controller.signal,
        credentials: 'include', // Send cookies
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': this.getCsrfToken(),
          ...options.headers,
        },
      });
      
      clearTimeout(timeoutId);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      
      return response.json();
    } catch (error) {
      if (error.name === 'AbortError') {
        throw new Error('Request timeout');
      }
      throw error;
    }
  }
  
  private getCsrfToken(): string {
    return document
      .querySelector('meta[name="csrf-token"]')
      ?.getAttribute('content') || '';
  }
}

Input Validation

Client-Side Validation

Remember: Client-side validation is for UX, not security. Always validate on server!

// ✅ Comprehensive input validation
interface ValidationRule {
  pattern?: RegExp;
  minLength?: number;
  maxLength?: number;
  custom?: (value: string) => boolean;
  message: string;
}

function validateInput(
  value: string,
  rules: ValidationRule[]
): string | null {
  for (const rule of rules) {
    if (rule.minLength && value.length < rule.minLength) {
      return rule.message;
    }
    
    if (rule.maxLength && value.length > rule.maxLength) {
      return rule.message;
    }
    
    if (rule.pattern && !rule.pattern.test(value)) {
      return rule.message;
    }
    
    if (rule.custom && !rule.custom(value)) {
      return rule.message;
    }
  }
  
  return null;
}

// Usage
const emailRules: ValidationRule[] = [
  {
    pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    message: 'Invalid email format'
  },
  {
    maxLength: 254,
    message: 'Email too long'
  }
];

const passwordRules: ValidationRule[] = [
  {
    minLength: 12,
    message: 'Password must be at least 12 characters'
  },
  {
    pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])/,
    message: 'Password must contain uppercase, lowercase, number, and special character'
  }
];

function SignupForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState<Record<string, string>>({});
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    const emailError = validateInput(email, emailRules);
    const passwordError = validateInput(password, passwordRules);
    
    if (emailError || passwordError) {
      setErrors({
        email: emailError || '',
        password: passwordError || ''
      });
      return;
    }
    
    // Submit to server (which will validate again!)
    await signup({ email, password });
  };
  
  return (/* form */);
}

Dependency Security

Regular Audits

# Check for vulnerabilities
npm audit

# Fix automatically (if possible)
npm audit fix

# Check for outdated packages
npm outdated

# Use Snyk for continuous monitoring
npm install -g snyk
snyk test
snyk monitor

Secure Dependencies

// package.json
{
  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "audit": "npm audit --audit-level=high"
  },
  "resolutions": {
    "vulnerable-package": "^2.0.0"
  }
}

Data Protection

Sensitive Data Handling

Problem:

// ❌ Logging sensitive data
console.log('User logged in:', { email, password });

// ❌ Exposing sensitive data in client
function UserProfile({ user }) {
  return (
    <div>
      <p>SSN: {user.ssn}</p>
      <p>Credit Card: {user.creditCard}</p>
    </div>
  );
}

Solution:

// ✅ Never log sensitive data
console.log('User logged in:', { email }); // Omit password

// ✅ Never send sensitive data to client
// Server should filter sensitive fields
interface PublicUser {
  id: number;
  email: string;
  name: string;
  // ssn, creditCard, etc. NOT included
}

// ✅ Mask sensitive data if must display
function maskCreditCard(cc: string): string {
  return `****-****-****-${cc.slice(-4)}`;
}

// ✅ Use separate types for client vs server
interface ServerUser {
  id: number;
  email: string;
  passwordHash: string; // Never send to client!
  ssn: string; // Never send to client!
}

interface ClientUser {
  id: number;
  email: string;
  name: string;
}

Common Vulnerabilities

1. Open Redirects

Problem:

// ❌ Unvalidated redirect
function handleRedirect(url: string) {
  window.location.href = url; // Can redirect to evil.com!
}

// Usage: /login?redirect=https://evil.com

Solution:

// ✅ Validate redirect URLs
const ALLOWED_REDIRECT_DOMAINS = ['example.com'];

function isAllowedRedirect(url: string): boolean {
  try {
    const urlObj = new URL(url, window.location.origin);
    
    // Only allow same origin or allowed domains
    if (urlObj.origin === window.location.origin) {
      return true;
    }
    
    return ALLOWED_REDIRECT_DOMAINS.some(domain =>
      urlObj.hostname === domain || urlObj.hostname.endsWith(`.${domain}`)
    );
  } catch {
    return false;
  }
}

function handleRedirect(url: string) {
  if (isAllowedRedirect(url)) {
    window.location.href = url;
  } else {
    window.location.href = '/'; // Default safe redirect
  }
}

2. Clickjacking

Problem:

<!-- ❌ No frame protection -->
<html>
  <body>
    <button>Delete Account</button>
  </body>
</html>

Solution:

<!-- ✅ Prevent framing -->
<html>
  <head>
    <meta http-equiv="X-Frame-Options" content="DENY">
    <!-- Or use CSP -->
    <meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none'">
  </head>
  <body>
    <button>Delete Account</button>
  </body>
</html>

// ✅ JavaScript frame-busting (defense in depth)
if (window.top !== window.self) {
  window.top.location = window.self.location;
}

3. Prototype Pollution

Problem:

// ❌ Dangerous object manipulation
function merge(target: any, source: any) {
  for (const key in source) {
    target[key] = source[key]; // Can pollute prototype!
  }
  return target;
}

// Attack:
merge({}, JSON.parse('{"__proto__": {"isAdmin": true}}'));
// Now ALL objects have isAdmin: true!

Solution:

// ✅ Safe object merging
function safeMerge<T extends object>(target: T, source: Partial<T>): T {
  return Object.assign({}, target, source);
}

// ✅ Or use libraries with protection
import merge from 'lodash/merge'; // Has prototype pollution protection

// ✅ Filter dangerous keys
const DANGEROUS_KEYS = ['__proto__', 'constructor', 'prototype'];

function isValidKey(key: string): boolean {
  return !DANGEROUS_KEYS.includes(key);
}

function safeMerge2(target: any, source: any) {
  for (const key in source) {
    if (isValidKey(key) && Object.hasOwn(source, key)) {
      target[key] = source[key];
    }
  }
  return target;
}