Modern Web Architecture Guide

Architecture Overview

Modern web applications require thoughtful architecture to ensure scalability, maintainability, and performance. This guide covers essential patterns and best practices.

Core Technologies

• Frontend: React/Vue/Angular + TypeScript
• Build Tools: Vite/Webpack/Parcel
• Styling: Tailwind CSS/Styled Components
• Animations: GSAP/Framer Motion
• State Management: Zustand/Redux/Context API
• Deployment: Vercel/Netlify/AWS

Architecture Principles

• Component-Based Design
• Separation of Concerns
• Single Responsibility Principle
• DRY (Don't Repeat Yourself)
• Mobile-First Approach

Project Structure Patterns

Feature-Based Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # Base components (buttons, inputs)
│   ├── forms/          # Form components
│   └── layout/         # Layout components
├── features/           # Feature-specific modules
│   ├── auth/           # Authentication feature
│   ├── dashboard/      # Dashboard feature
│   └── profile/        # User profile feature
├── hooks/              # Custom React hooks
├── services/           # API and external services
├── utils/              # Utility functions
├── types/              # TypeScript definitions
└── styles/             # Global styles

Layer-Based Structure

src/
├── presentation/       # UI components and pages
├── business/           # Business logic and state
├── data/              # Data access and API calls
├── shared/            # Shared utilities and types
└── infrastructure/    # Configuration and setup

Component Architecture

Atomic Design Methodology

Atoms (Basic building blocks)
├── Button
├── Input
├── Icon
└── Text

Molecules (Simple combinations)
├── SearchBox (Input + Button)
├── FormField (Label + Input + Error)
└── NavigationItem (Icon + Text)

Organisms (Complex combinations)
├── Header (Logo + Navigation + UserMenu)
├── ProductCard (Image + Title + Price + Button)
└── ContactForm (Multiple FormFields + Button)

Templates (Page layouts)
├── MainLayout
├── AuthLayout
└── DashboardLayout

Pages (Specific instances)
├── HomePage
├── LoginPage
└── UserDashboard

State Management Architecture

Local vs Global State

// Local State (useState)
const ComponentWithLocalState = () => {
  const [count, setCount] = useState(0);
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
    </div>
  );
};

// Global State (Context API)
const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// Global State (Zustand)
const useStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  clearUser: () => set({ user: null }),
}));

State Management Patterns

1. Server State: React Query/SWR for API data
2. Client State: Zustand/Redux for application state
3. Form State: React Hook Form/Formik
4. URL State: React Router for navigation state

Design System Architecture

Design Tokens

:root {
  / Colors /
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;

  / Typography /
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;

  / Spacing /
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;

  / Shadows /
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

Performance Architecture

Code Splitting Strategies

// Route-based splitting
const HomePage = lazy(() => import('./pages/HomePage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));
const ContactPage = lazy(() => import('./pages/ContactPage'));

// Component-based splitting
const HeavyComponent = lazy(() => import('./components/HeavyComponent'));

// Feature-based splitting
const AdminPanel = lazy(() => import('./features/admin/AdminPanel'));

// Usage with Suspense
<Suspense fallback={<LoadingSpinner />}>
  <Routes>
    <Route path="/" element={<HomePage />} />
    <Route path="/about" element={<AboutPage />} />
    <Route path="/contact" element={<ContactPage />} />
  </Routes>
</Suspense>

Security Best Practices

Input Validation & Sanitization

// Client-side validation
const validateEmail = (email: string): boolean => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
};

const sanitizeInput = (input: string): string => {
  return input
    .replace(/[<>]/g, '') // Remove potential HTML tags
    .trim()
    .slice(0, 1000); // Limit length
};

// Form validation with schema
import { z } from 'zod';

const userSchema = z.object({
  email: z.string().email('Invalid email format'),
  password: z.string().min(8, 'Password must be at least 8 characters'),
  age: z.number().min(18, 'Must be at least 18 years old')
});

const validateUser = (data: unknown) => {
  try {
    return userSchema.parse(data);
  } catch (error) {
    throw new Error('Invalid user data');
  }
};

Responsive Architecture

Breakpoint Management

const breakpoints = {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px'
};

const useBreakpoint = () => {
  const [breakpoint, setBreakpoint] = useState('');

  useEffect(() => {
    const updateBreakpoint = () => {
      const width = window.innerWidth;
      if (width >= 1536) setBreakpoint('2xl');
      else if (width >= 1280) setBreakpoint('xl');
      else if (width >= 1024) setBreakpoint('lg');
      else if (width >= 768) setBreakpoint('md');
      else if (width >= 640) setBreakpoint('sm');
      else setBreakpoint('xs');
    };

    updateBreakpoint();
    window.addEventListener('resize', updateBreakpoint);
    return () => window.removeEventListener('resize', updateBreakpoint);
  }, []);

  return breakpoint;
};

Build & Deployment Architecture

Modern Build Configuration

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
      '@utils': resolve(__dirname, 'src/utils')
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-toast']
        }
      }
    },
    sourcemap: true,
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  },
  server: {
    port: 3000,
    open: true
  }
});

Deployment Strategies

1. Static Site Generation (SSG): Pre-built pages at build time
2. Server-Side Rendering (SSR): Pages rendered on each request
3. Incremental Static Regeneration (ISR): Hybrid approach
4. Client-Side Rendering (CSR): Traditional SPA approach

Monitoring & Analytics

Performance Monitoring

// Core Web Vitals tracking
const trackWebVitals = (metric) => {
  console.log(metric);
  // Send to analytics service
};

// Performance Observer API
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === 'largest-contentful-paint') {
      trackWebVitals({
        name: 'LCP',
        value: entry.startTime,
        id: generateUniqueID()
      });
    }
  });
});

observer.observe({ entryTypes: ['largest-contentful-paint'] });

Error Boundary Implementation

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Log error to monitoring service
    console.error('Error caught by boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-fallback">
          <h2>Something went wrong</h2>
          <button onClick={() => this.setState({ hasError: false, error: null })}>
            Try again
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

---

This architecture guide provides a foundation for building scalable, maintainable, and performant web applications using modern development practices and patterns.