📝 Core Examples: Building Your SPA from Scratch

📖 Learning Path: We'll build a complete SPA step-by-step, starting with the foundation and adding features progressively. Each example builds on the previous one.

Example 1: Foundation - Advanced Router with Parameters

The router is the brain of your SPA. It decides what to show based on the URL. Let's build a production-ready router with dynamic parameters, query strings, and middleware support.

/**
 * Advanced Router with Dynamic Routes & Middleware
 * Features: Route parameters, query strings, navigation guards, 404 handling
 */
class Router {
    constructor() {
        this.routes = [];
        this.middlewares = [];
        this.currentRoute = null;
        this.beforeHooks = [];
        this.afterHooks = [];

        this.init();
    }

    init() {
        // Handle browser back/forward buttons
        window.addEventListener('popstate', (e) => {
            this.loadRoute(window.location.pathname);
        });

        // Intercept all link clicks for SPA navigation
        document.addEventListener('click', (e) => {
            // Find the closest anchor tag
            const link = e.target.closest('[data-link]');
            if (link) {
                e.preventDefault();
                this.navigate(link.getAttribute('href') || link.href);
            }
        });

        // Prevent default form submissions (handle via JS instead)
        document.addEventListener('submit', (e) => {
            if (e.target.hasAttribute('data-spa-form')) {
                e.preventDefault();
            }
        });
    }

    /**
     * Add a route with pattern matching support
     * @param {string} pattern - Route pattern (e.g., '/users/:id')
     * @param {function} handler - Handler function
     */
    addRoute(pattern, handler) {
        const paramNames = [];

        // Convert route pattern to regex (e.g., /users/:id -> /users/([^/]+))
        const regexPattern = pattern
            .replace(/:[\w]+/g, (match) => {
                paramNames.push(match.substring(1)); // Remove ':'
                return '([^/]+)'; // Match any characters except /
            })
            .replace(/\*/g, '.*'); // Wildcard support

        this.routes.push({
            pattern,
            regex: new RegExp(`^${regexPattern}$`),
            paramNames,
            handler
        });
    }

    /**
     * Add middleware to run before routes
     */
    use(middleware) {
        this.middlewares.push(middleware);
    }

    /**
     * Add a hook to run before navigation
     */
    beforeEach(hook) {
        this.beforeHooks.push(hook);
    }

    /**
     * Add a hook to run after navigation
     */
    afterEach(hook) {
        this.afterHooks.push(hook);
    }

    /**
     * Match current path against registered routes
     */
    matchRoute(path) {
        for (const route of this.routes) {
            const match = path.match(route.regex);
            if (match) {
                // Extract parameters from URL
                const params = {};
                route.paramNames.forEach((name, index) => {
                    params[name] = decodeURIComponent(match[index + 1]);
                });
                return { handler: route.handler, params, pattern: route.pattern };
            }
        }
        return null;
    }

    /**
     * Parse query parameters from URL
     */
    getQueryParams() {
        const params = {};
        const queryString = window.location.search.substring(1);

        if (queryString) {
            queryString.split('&').forEach(pair => {
                const [key, value] = pair.split('=');
                if (key) {
                    params[decodeURIComponent(key)] = decodeURIComponent(value || '');
                }
            });
        }

        return params;
    }

    /**
     * Get hash fragment from URL
     */
    getHash() {
        return window.location.hash.substring(1);
    }

    /**
     * Navigate to a new route
     * @param {string} path - Path to navigate to
     * @param {object} state - State object to pass
     */
    async navigate(path, state = {}) {
        // Run before hooks (can cancel navigation)
        for (const hook of this.beforeHooks) {
            const result = await hook(path, this.currentRoute);
            if (result === false) {
                console.log('Navigation cancelled by beforeEach hook');
                return;
            }
        }

        // Update browser history
        window.history.pushState(state, '', path);

        // Load the route
        await this.loadRoute(path);
    }

    /**
     * Replace current route without adding to history
     */
    async replace(path, state = {}) {
        window.history.replaceState(state, '', path);
        await this.loadRoute(path);
    }

    /**
     * Go back in history
     */
    back() {
        window.history.back();
    }

    /**
     * Go forward in history
     */
    forward() {
        window.history.forward();
    }

    /**
     * Load and execute route handler
     */
    async loadRoute(path) {
        try {
            // Run middleware
            for (const middleware of this.middlewares) {
                await middleware({ path, router: this });
            }

            const match = this.matchRoute(path);
            const query = this.getQueryParams();
            const hash = this.getHash();

            if (match) {
                console.log(`[Router] Navigating to ${match.pattern}`, {
                    params: match.params,
                    query,
                    hash
                });

                const previousRoute = this.currentRoute;
                this.currentRoute = {
                    path,
                    pattern: match.pattern,
                    params: match.params,
                    query,
                    hash
                };

                // Execute route handler
                await match.handler({
                    params: match.params,
                    query,
                    hash,
                    path
                });

                // Run after hooks
                for (const hook of this.afterHooks) {
                    await hook(this.currentRoute, previousRoute);
                }

                // Scroll to hash if present
                if (hash) {
                    const element = document.getElementById(hash);
                    if (element) {
                        element.scrollIntoView({ behavior: 'smooth' });
                    }
                }
            } else {
                // No match found - navigate to 404
                console.warn(`[Router] No route matched for: ${path}`);
                this.navigate('/404');
            }
        } catch (error) {
            console.error('[Router] Error loading route:', error);
            this.handleError(error);
        }
    }

    /**
     * Handle routing errors
     */
    handleError(error) {
        document.getElementById('app').innerHTML = `
            
                ⚠️ Something went wrong
                ${error.message}
                
            
        `;
    }

    /**
     * Start the router
     */
    start() {
        console.log('[Router] Starting...');
        this.loadRoute(window.location.pathname);
    }
}

// ==================
// USAGE EXAMPLE
// ==================

// Create router instance
const router = new Router();

// Add authentication middleware
router.use(async ({ path, router }) => {
    const publicRoutes = ['/', '/login', '/register'];
    const isAuthenticated = localStorage.getItem('token');

    if (!publicRoutes.includes(path) && !isAuthenticated) {
        console.log('[Middleware] Redirecting to login');
        router.replace('/login');
        return false;
    }
});

// Add logging middleware
router.use(async ({ path }) => {
    console.log(`[Analytics] Page view: ${path}`);
    // Send to analytics service
});

// Before navigation hook (can cancel navigation)
router.beforeEach(async (to, from) => {
    // Show loading indicator
    document.getElementById('loader')?.classList.add('active');

    // Check if user wants to leave unsaved changes
    if (window.hasUnsavedChanges) {
        return confirm('You have unsaved changes. Do you want to leave?');
    }

    return true; // Allow navigation
});

// After navigation hook
router.afterEach(async (to, from) => {
    // Hide loading indicator
    document.getElementById('loader')?.classList.remove('active');

    // Update page title
    document.title = `My App - ${to.path}`;

    // Scroll to top
    window.scrollTo(0, 0);
});

// Define routes
router.addRoute('/', async () => {
    document.getElementById('app').innerHTML = `
        
            Welcome Home
            
                View Users
                Popular Posts
                About Us
            
        
    `;
});

router.addRoute('/users', async ({ query }) => {
    const page = query.page || 1;
    const search = query.search || '';

    document.getElementById('app').innerHTML = `
        
            Users (Page ${page})
            
            View User 123
        
    `;
});

router.addRoute('/users/:id', async ({ params, query }) => {
    const userId = params.id;
    const tab = query.tab || 'profile';

    // Fetch user data
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        const user = await response.json();

        document.getElementById('app').innerHTML = `
            
                
                ${user.name}
                ${user.email}
                
                    Profile
                    Posts
                    Settings
                
                
                    Active tab: ${tab}
                
            
        `;
    } catch (error) {
        throw new Error(`Failed to load user ${userId}`);
    }
});

router.addRoute('/posts/:postId/comments/:commentId', async ({ params }) => {
    console.log('Post:', params.postId, 'Comment:', params.commentId);
    // Handle nested routes
});

router.addRoute('/404', async () => {
    document.getElementById('app').innerHTML = `
        
            404 - Page Not Found
            The page you're looking for doesn't exist.
            Go Home
        
    `;
});

// Start the router
router.start();

✅ What This Router Provides

✨ Dynamic Route Parameters: /users/:id extracts ID from URL
🔍 Query String Parsing: ?page=2&filter=popular
🔗 Hash Fragment Support: #section-name for in-page navigation
🛡️ Navigation Guards: beforeEach and afterEach hooks
🔌 Middleware System: Auth checks, logging, analytics
⏪ History Management: Back/forward button support
🚨 Error Handling: Graceful error pages
🎯 404 Fallback: Handles non-existent routes

💡 Pro Tips for Routing

Use Semantic URLs: /users/123/posts better than /page?id=123&type=posts
Validate Parameters: Check if IDs are valid before making API calls
Handle Edge Cases: What happens if user edits URL manually?
Preserve State: Use history.state to pass data between routes
Loading States: Show loading indicators during async operations
Error Boundaries: Catch and display errors gracefully
Breadcrumbs: Help users understand where they are
Canonical URLs: Redirect /users/ to /users for consistency

Example 2: Component System with Lifecycle & State

Components are the building blocks of your UI. Let's create a robust component system with proper lifecycle management, state handling, and event cleanup.

/**
 * Base Component Class with Full Lifecycle
 */
class Component {
    constructor(props = {}) {
        this.props = props;
        this.state = this.getInitialState();
        this.element = null;
        this.children = [];
        this.eventListeners = [];
        this.isMounted = false;
    }

    /**
     * Override this in subclasses to set initial state
     */
    getInitialState() {
        return {};
    }

    /**
     * Update component state (triggers re-render)
     */
    setState(updates, callback) {
        const prevState = { ...this.state };
        this.state = { ...this.state, ...updates };

        // Call lifecycle method
        if (this.isMounted) {
            this.componentDidUpdate(this.props, prevState);
            this.render();
        }

        if (callback) callback();
    }

    /**
     * Update component props (triggers re-render)
     */
    setProps(newProps) {
        const prevProps = { ...this.props };
        this.props = { ...this.props, ...newProps };

        if (this.isMounted) {
            this.componentDidUpdate(prevProps, this.state);
            this.render();
        }
    }

    /**
     * Mount component to DOM
     */
    mount(container) {
        if (this.isMounted) {
            console.warn('Component already mounted');
            return;
        }

        this.element = this.createElement();
        container.appendChild(this.element);
        this.attachEvents();
        this.isMounted = true;

        // Call lifecycle method
        this.componentDidMount();
    }

    /**
     * Re-render component
     */
    render() {
        if (!this.element) return;

        // Store scroll position
        const scrollTop = this.element.scrollTop;

        // Create new element
        const newElement = this.createElement();

        // Replace old with new
        this.element.replaceWith(newElement);
        this.element = newElement;

        // Restore scroll position
        this.element.scrollTop = scrollTop;

        // Re-attach events
        this.cleanupEvents();
        this.attachEvents();
    }

    /**
     * Unmount component from DOM
     */
    unmount() {
        if (!this.isMounted) return;

        // Call lifecycle method
        this.componentWillUnmount();

        // Cleanup
        this.cleanupEvents();
        this.children.forEach(child => child.unmount());

        if (this.element && this.element.parentNode) {
            this.element.parentNode.removeChild(this.element);
        }

        this.element = null;
        this.isMounted = false;
    }

    /**
     * Add event listener (will be auto-cleaned on unmount)
     */
    addEventListener(element, event, handler, options) {
        element.addEventListener(event, handler, options);
        this.eventListeners.push({ element, event, handler, options });
    }

    /**
     * Cleanup all event listeners
     */
    cleanupEvents() {
        this.eventListeners.forEach(({ element, event, handler, options }) => {
            element.removeEventListener(event, handler, options);
        });
        this.eventListeners = [];
    }

    /**
     * Lifecycle methods (override in subclasses)
     */
    componentDidMount() {
        // Called after component is mounted
    }

    componentDidUpdate(prevProps, prevState) {
        // Called after props or state change
    }

    componentWillUnmount() {
        // Called before component is unmounted (cleanup here)
    }

    /**
     * Abstract methods (must override in subclasses)
     */
    createElement() {
        throw new Error('createElement() must be implemented');
    }

    attachEvents() {
        // Override to attach event listeners
    }

    /**
     * Utility: Safely escape HTML
     */
    escapeHtml(str) {
        const div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML;
    }

    /**
     * Utility: Parse HTML template
     */
    html(strings, ...values) {
        const htmlString = strings.reduce((result, str, i) => {
            return result + str + (values[i] || '');
        }, '');

        const template = document.createElement('template');
        template.innerHTML = htmlString.trim();
        return template.content.firstChild;
    }
}

// ==================
// EXAMPLE: Counter Component
// ==================

class Counter extends Component {
    getInitialState() {
        return {
            count: this.props.initialCount || 0,
            history: []
        };
    }

    createElement() {
        const div = document.createElement('div');
        div.className = 'counter';
        div.innerHTML = `
            
                ${this.escapeHtml(this.props.title || 'Counter')}
                
                    ${this.state.count}
                
                
                    
                    
                    
                
                
                    History
                    
                        ${this.state.history.map(item =>
                            `${item.action} at ${new Date(item.timestamp).toLocaleTimeString()}`
                        ).join('')}
                    
                
            
        `;
        return div;
    }

    attachEvents() {
        const incrementBtn = this.element.querySelector('.increment');
        const decrementBtn = this.element.querySelector('.decrement');
        const resetBtn = this.element.querySelector('.reset');

        this.addEventListener(incrementBtn, 'click', () => this.increment());
        this.addEventListener(decrementBtn, 'click', () => this.decrement());
        this.addEventListener(resetBtn, 'click', () => this.reset());
    }

    increment() {
        this.setState({
            count: this.state.count + 1,
            history: [...this.state.history, {
                action: 'Incremented',
                timestamp: Date.now()
            }]
        });

        // Trigger callback if provided
        if (this.props.onChange) {
            this.props.onChange(this.state.count + 1);
        }
    }

    decrement() {
        this.setState({
            count: this.state.count - 1,
            history: [...this.state.history, {
                action: 'Decremented',
                timestamp: Date.now()
            }]
        });

        if (this.props.onChange) {
            this.props.onChange(this.state.count - 1);
        }
    }

    reset() {
        this.setState({
            count: this.props.initialCount || 0,
            history: [...this.state.history, {
                action: 'Reset',
                timestamp: Date.now()
            }]
        });
    }

    componentDidMount() {
        console.log('Counter mounted with count:', this.state.count);

        // Example: Auto-increment every 5 seconds
        if (this.props.autoIncrement) {
            this.intervalId = setInterval(() => this.increment(), 5000);
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.count !== this.state.count) {
            console.log(`Count changed from ${prevState.count} to ${this.state.count}`);
        }
    }

    componentWillUnmount() {
        console.log('Counter unmounting...');

        // Cleanup interval
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    }
}

// ==================
// USAGE
// ==================

const counter = new Counter({
    title: 'My Awesome Counter',
    initialCount: 10,
    autoIncrement: false,
    onChange: (newCount) => {
        console.log('Count changed to:', newCount);
    }
});

counter.mount(document.getElementById('app'));

// Later: update props dynamically
// counter.setProps({ title: 'Updated Counter' });

// Later: cleanup
// counter.unmount();

✅ Component System Features

🔄 Full Lifecycle: Mount, update, and unmount hooks
📦 State Management: Local state with setState()
🎛️ Props System: Pass data from parent to child
🧹 Auto Cleanup: Event listeners removed automatically
♻️ Reusable: Create multiple instances with different props
🔒 Encapsulated: Each component manages its own state
🎨 Flexible Rendering: Custom createElement logic
🐛 Debuggable: Clear lifecycle logging

Example 3: Centralized State Management (Advanced Store)

For larger apps, you need centralized state management. This store implementation includes actions, reducers, middleware, and time-travel debugging!

/**
 * Production-Ready State Store with Middleware & DevTools
 */
class Store {
    constructor(reducer, initialState = {}, enhancers = []) {
        this.reducer = reducer;
        this.state = initialState;
        this.subscribers = [];
        this.middlewares = [];
        this.history = [initialState];
        this.historyIndex = 0;
        this.isDispatching = false;

        // Apply enhancers (e.g., middleware)
        enhancers.forEach(enhancer => enhancer(this));
    }

    /**
     * Get current state (immutable)
     */
    getState() {
        if (this.isDispatching) {
            throw new Error('Cannot get state while dispatching');
        }
        return { ...this.state };
    }

    /**
     * Dispatch an action
     */
    dispatch(action) {
        if (this.isDispatching) {
            throw new Error('Cannot dispatch while dispatching');
        }

        if (!action || typeof action.type !== 'string') {
            throw new Error('Actions must have a type property');
        }

        try {
            this.isDispatching = true;

            // Run through middleware chain
            let dispatch = (act) => {
                const prevState = this.state;
                this.state = this.reducer(this.state, act);

                // Save to history (for time travel)
                this.history = this.history.slice(0, this.historyIndex + 1);
                this.history.push({ ...this.state });
                this.historyIndex = this.history.length - 1;

                // Log action
                console.log('%c[Store] Action Dispatched', 'color: #4CAF50; font-weight: bold');
                console.log('Type:', act.type);
                console.log('Payload:', act.payload);
                console.log('Prev State:', prevState);
                console.log('Next State:', this.state);
                console.log('────────────────────────────────');

                return act;
            };

            // Apply middleware
            this.middlewares.forEach(middleware => {
                const next = dispatch;
                dispatch = (act) => middleware(this)(next)(act);
            });

            dispatch(action);

            // Notify subscribers
            this.notify();
        } finally {
            this.isDispatching = false;
        }

        return action;
    }

    /**
     * Subscribe to state changes
     */
    subscribe(callback) {
        if (typeof callback !== 'function') {
            throw new Error('Subscriber must be a function');
        }

        this.subscribers.push(callback);

        // Return unsubscribe function
        return () => {
            this.subscribers = this.subscribers.filter(sub => sub !== callback);
        };
    }

    /**
     * Add middleware
     */
    use(middleware) {
        this.middlewares.push(middleware);
    }

    /**
     * Notify all subscribers
     */
    notify() {
        const state = this.getState();
        this.subscribers.forEach(callback => {
            try {
                callback(state);
            } catch (error) {
                console.error('Error in subscriber:', error);
            }
        });
    }

    /**
     * Time travel debugging - jump to specific state
     */
    jumpToState(index) {
        if (index >= 0 && index < this.history.length) {
            this.historyIndex = index;
            this.state = { ...this.history[index] };
            this.notify();
            console.log(`Jumped to state #${index}`);
        }
    }

    /**
     * Undo last action
     */
    undo() {
        if (this.historyIndex > 0) {
            this.historyIndex--;
            this.state = { ...this.history[this.historyIndex] };
            this.notify();
            console.log('Undo successful');
        } else {
            console.warn('Nothing to undo');
        }
    }

    /**
     * Redo last undone action
     */
    redo() {
        if (this.historyIndex < this.history.length - 1) {
            this.historyIndex++;
            this.state = { ...this.history[this.historyIndex] };
            this.notify();
            console.log('Redo successful');
        } else {
            console.warn('Nothing to redo');
        }
    }

    /**
     * Clear history (useful for large apps)
     */
    clearHistory() {
        this.history = [{ ...this.state }];
        this.historyIndex = 0;
        console.log('History cleared');
    }
}

// ==================
// MIDDLEWARE EXAMPLES
// ==================

/**
 * Logger Middleware - Logs all actions
 */
const logger = (store) => (next) => (action) => {
    const startTime = performance.now();
    const result = next(action);
    const endTime = performance.now();
    console.log(`Action "${action.type}" took ${(endTime - startTime).toFixed(2)}ms`);
    return result;
};

/**
 * Thunk Middleware - Handle async actions
 */
const thunk = (store) => (next) => (action) => {
    if (typeof action === 'function') {
        return action(store.dispatch.bind(store), store.getState.bind(store));
    }
    return next(action);
};

/**
 * Crash Reporter Middleware
 */
const crashReporter = (store) => (next) => (action) => {
    try {
        return next(action);
    } catch (error) {
        console.error('💥 Caught an exception!', error);
        // Send to error tracking service
        // sendErrorReport(error, action, store.getState());
        throw error;
    }
};

// ==================
// REDUCER EXAMPLE
// ==================

function appReducer(state, action) {
    switch (action.type) {
        case 'SET_USER':
            return {
                ...state,
                user: action.payload,
                isAuthenticated: true
            };

        case 'LOGOUT':
            return {
                ...state,
                user: null,
                isAuthenticated: false
            };

        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, action.payload]
            };

        case 'TOGGLE_TODO':
            return {
                ...state,
                todos: state.todos.map(todo =>
                    todo.id === action.payload
                        ? { ...todo, completed: !todo.completed }
                        : todo
                )
            };

        case 'DELETE_TODO':
            return {
                ...state,
                todos: state.todos.filter(todo => todo.id !== action.payload)
            };

        case 'SET_LOADING':
            return {
                ...state,
                loading: action.payload
            };

        case 'SET_ERROR':
            return {
                ...state,
                error: action.payload,
                loading: false
            };

        default:
            return state;
    }
}

// ==================
// USAGE
// ==================

// Create store with middleware
const store = new Store(appReducer, {
    user: null,
    isAuthenticated: false,
    todos: [],
    loading: false,
    error: null
});

// Add middleware
store.use(logger);
store.use(thunk);
store.use(crashReporter);

// Subscribe to changes
const unsubscribe = store.subscribe((state) => {
    console.log('State updated!', state);
    updateUI(state);
});

// Dispatch actions
store.dispatch({
    type: 'SET_USER',
    payload: { id: 1, name: 'John Doe', email: 'john@example.com' }
});

store.dispatch({
    type: 'ADD_TODO',
    payload: { id: 1, text: 'Learn SPAs', completed: false }
});

// Async action with thunk
function fetchUserData(userId) {
    return async (dispatch, getState) => {
        dispatch({ type: 'SET_LOADING', payload: true });

        try {
            const response = await fetch(`/api/users/${userId}`);
            if (!response.ok) throw new Error('Failed to fetch user');

            const user = await response.json();
            dispatch({ type: 'SET_USER', payload: user });
        } catch (error) {
            dispatch({ type: 'SET_ERROR', payload: error.message });
        } finally {
            dispatch({ type: 'SET_LOADING', payload: false });
        }
    };
}

// Dispatch async action
store.dispatch(fetchUserData(123));

// Time travel debugging
// store.undo();
// store.redo();
// store.jumpToState(0); // Go to initial state

function updateUI(state) {
    // Update your components based on new state
}

✅ Advanced Store Features

🎯 Single Source of Truth: One centralized state
🔄 Immutable Updates: Never mutate state directly
🎬 Action-Based: All changes via actions
🔌 Middleware Support: Extensible with plugins
⚡ Async Actions: Handle promises with thunk middleware
⏰ Time Travel: Undo/redo any action
📊 DevTools: Debug state changes easily
🛡️ Error Handling: Catch and report errors

Example 4: Complete Blog SPA - Putting It All Together

Now let's build a complete, production-ready blog application that combines everything we've learned!

/**
 * COMPLETE BLOG SPA APPLICATION
 * Features: Routing, State Management, API Integration, Components
 */

// ==================
// 1. API SERVICE
// ==================

class ApiService {
    constructor(baseURL) {
        this.baseURL = baseURL;
        this.cache = new Map();
        this.pendingRequests = new Map();
    }

    async request(endpoint, options = {}) {
        const cacheKey = `${options.method || 'GET'}:${endpoint}`;

        // Return cached response if available (for GET requests)
        if (!options.method || options.method === 'GET') {
            if (this.cache.has(cacheKey)) {
                console.log('Returning cached response for:', endpoint);
                return this.cache.get(cacheKey);
            }

            // If request is already pending, wait for it
            if (this.pendingRequests.has(cacheKey)) {
                console.log('Waiting for pending request:', endpoint);
                return this.pendingRequests.get(cacheKey);
            }
        }

        const token = localStorage.getItem('token');
        const headers = {
            'Content-Type': 'application/json',
            ...(token && { 'Authorization': `Bearer ${token}` }),
            ...options.headers
        };

        const requestPromise = fetch(`${this.baseURL}${endpoint}`, {
            ...options,
            headers
        }).then(async (response) => {
            if (!response.ok) {
                const error = await response.json().catch(() => ({}));
                throw new Error(error.message || `HTTP ${response.status}`);
            }
            return response.json();
        }).then((data) => {
            // Cache GET requests
            if (!options.method || options.method === 'GET') {
                this.cache.set(cacheKey, data);
                // Clear cache after 5 minutes
                setTimeout(() => this.cache.delete(cacheKey), 5 * 60 * 1000);
            }
            return data;
        }).finally(() => {
            this.pendingRequests.delete(cacheKey);
        });

        // Track pending request
        if (!options.method || options.method === 'GET') {
            this.pendingRequests.set(cacheKey, requestPromise);
        }

        return requestPromise;
    }

    get(endpoint) {
        return this.request(endpoint);
    }

    post(endpoint, data) {
        return this.request(endpoint, {
            method: 'POST',
            body: JSON.stringify(data)
        });
    }

    put(endpoint, data) {
        return this.request(endpoint, {
            method: 'PUT',
            body: JSON.stringify(data)
        });
    }

    delete(endpoint) {
        return this.request(endpoint, { method: 'DELETE' });
    }

    clearCache() {
        this.cache.clear();
    }
}

// ==================
// 2. MAIN APPLICATION
// ==================

class BlogApp {
    constructor() {
        this.router = new Router();
        this.api = new ApiService('https://jsonplaceholder.typicode.com');
        this.store = new Store(this.reducer.bind(this), {
            posts: [],
            currentPost: null,
            comments: [],
            user: null,
            loading: false,
            error: null
        });

        // Add middleware
        this.store.use(logger);
        this.store.use(thunk);

        this.init();
    }

    reducer(state, action) {
        switch (action.type) {
            case 'SET_POSTS':
                return { ...state, posts: action.payload, loading: false };

            case 'SET_CURRENT_POST':
                return { ...state, currentPost: action.payload, loading: false };

            case 'SET_COMMENTS':
                return { ...state, comments: action.payload };

            case 'SET_LOADING':
                return { ...state, loading: action.payload };

            case 'SET_ERROR':
                return { ...state, error: action.payload, loading: false };

            case 'CLEAR_ERROR':
                return { ...state, error: null };

            default:
                return state;
        }
    }

    async init() {
        // Setup routes
        this.setupRoutes();

        // Subscribe to state changes
        this.store.subscribe((state) => {
            this.render(state);
        });

        // Start router
        this.router.start();
    }

    setupRoutes() {
        this.router.addRoute('/', () => this.renderHome());
        this.router.addRoute('/posts', () => this.renderPostList());
        this.router.addRoute('/posts/:id', ({ params }) => this.renderPost(params.id));
        this.router.addRoute('/about', () => this.renderAbout());
        this.router.addRoute('/404', () => this.render404());
    }

    async renderHome() {
        this.store.dispatch({ type: 'SET_LOADING', payload: true });

        document.getElementById('app').innerHTML = `
            
                
                    Welcome to My Blog
                    Explore amazing articles and stories
                    View All Posts
                
            
        `;

        // Load featured posts
        try {
            const posts = await this.api.get('/posts?_limit=3');
            this.store.dispatch({ type: 'SET_POSTS', payload: posts });
        } catch (error) {
            this.store.dispatch({ type: 'SET_ERROR', payload: error.message });
        }
    }

    async renderPostList() {
        this.store.dispatch({ type: 'SET_LOADING', payload: true });

        document.getElementById('app').innerHTML = `
            
                
                    All Blog Posts
                    ← Back to Home
                
                Loading posts...
            
        `;

        try {
            const posts = await this.api.get('/posts');
            this.store.dispatch({ type: 'SET_POSTS', payload: posts });

            const container = document.getElementById('post-list');
            container.className = 'posts-grid';
            container.innerHTML = posts.map(post => `
                
                    
                        ${this.escapeHtml(post.title)}
                    
                    ${this.escapeHtml(post.body.substring(0, 150))}...
                    Read More →
                
            `).join('');
        } catch (error) {
            this.store.dispatch({ type: 'SET_ERROR', payload: error.message });
        }
    }

    async renderPost(postId) {
        this.store.dispatch({ type: 'SET_LOADING', payload: true });

        document.getElementById('app').innerHTML = `
            
                Loading post...
            
        `;

        try {
            const [post, comments] = await Promise.all([
                this.api.get(`/posts/${postId}`),
                this.api.get(`/posts/${postId}/comments`)
            ]);

            this.store.dispatch({ type: 'SET_CURRENT_POST', payload: post });
            this.store.dispatch({ type: 'SET_COMMENTS', payload: comments });

            document.getElementById('app').innerHTML = `
                
                    ← Back to Posts

                    
                        
                            ${this.escapeHtml(post.title)}
                            
                                By User #${post.userId}
                                •
                                ${comments.length} Comments
                            
                        

                        
                            ${this.escapeHtml(post.body)}
                        
                    

                    
                        Comments (${comments.length})
                        
                            ${comments.map(comment => `
                                
                                    ${this.escapeHtml(comment.name)}
                                    ${this.escapeHtml(comment.body)}
                                    ${this.escapeHtml(comment.email)}
                                
                            `).join('')}
                        
                    
                
            `;
        } catch (error) {
            this.store.dispatch({ type: 'SET_ERROR', payload: error.message });
            document.getElementById('app').innerHTML = `
                
                    Error Loading Post
                    ${this.escapeHtml(error.message)}
                    Back to Posts
                
            `;
        }
    }

    renderAbout() {
        document.getElementById('app').innerHTML = `
            
                About This Blog
                This is a demonstration SPA built with vanilla JavaScript.
                Go Home
            
        `;
    }

    render404() {
        document.getElementById('app').innerHTML = `
            
                404 - Page Not Found
                The page you're looking for doesn't exist.
                Go Home
            
        `;
    }

    render(state) {
        // Handle errors
        if (state.error) {
            this.showToast(state.error, 'error');
            this.store.dispatch({ type: 'CLEAR_ERROR' });
        }
    }

    showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.textContent = message;
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.classList.add('show');
        }, 100);

        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }

    escapeHtml(str) {
        const div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML;
    }
}

// ==================
// START THE APP
// ==================

const app = new BlogApp();

// Make router globally accessible
window.router = app.router;
window.store = app.store;

🎉 Complete SPA Features

✅ Client-side routing with dynamic parameters
✅ Centralized state management
✅ API integration with caching and deduplication
✅ Loading states and error handling
✅ Multiple views (home, list, detail, about, 404)
✅ SEO-friendly URLs
✅ Toast notifications
✅ Responsive design ready
✅ Performance optimizations
✅ Production-ready code structure

Complete JavaScript Mastery: From Zero to Advanced Concepts

JavaScript Fundamentals

Functions & Scope

Advanced JavaScript

Working with Data

Modern JavaScript Patterns

DOM Manipulation

Browser APIs & Tools

Real-World Applications