# 1. Create a fresh React project with Vite
npm create vite@latest my-react-app -- --template react

# 2. Enter the new directory
cd my-react-app

# 3. Install required node dependencies
npm install

# 4. Launch the local dev server
npm run dev

my-react-app/
├── node_modules/         # Installed third-party packages
├── public/               # Static assets (favicon, images, logos)
├── src/                  # Where 99% of your React application code lives
│   ├── assets/           # Images/SVGs imported directly into components
│   ├── App.css           # Styles specific to the root App component
│   ├── App.jsx           # Main root application component
│   ├── index.css         # Global baseline CSS styles
│   └── main.jsx          # Application entry point: mounts React to DOM
├── index.html            # The single HTML page loaded by the browser
├── package.json          # Dependencies, scripts, and project metadata
└── vite.config.js        # Vite build and plugin configurations

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My React App</title>
  </head>
  <body>
    <!-- React will mount inside this empty container -->
    <div id="root"></div>

    <!-- Entry script that boots React -->
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 1. What you write in JSX:
const element = <h1 className="title">Hello React!</h1>;

// 2. What it transpiles to behind the scenes:
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello React!'
);

function UserProfile() {
  const user = {
    name: 'Sophia Chen',
    role: 'Full-Stack Engineer',
    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330',
    reputation: 98.4
  };

  const getGreeting = () => 'Welcome back';

  return (
    <div className="profile-card">
      <img src={user.avatar} alt={user.name} width="64" height="64" />
      <h2>{getGreeting()}, {user.name}!</h2>
      <p>Role: <strong>{user.role.toUpperCase()}</strong></p>
      <p>Score: {user.reputation * 10} / 1000</p>
      <p>Next review: {2026 + 1}</p>
    </div>
  );
}

// ❌ SYNTAX ERROR: Adjacent JSX elements must be wrapped in an enclosing tag
return (
  <h1>Header</h1>
  <p>Description</p>
);

// ✅ SOLUTION: Wrap in a React Fragment (<>...</>) without adding useless divs to the DOM!
return (
  <>
    <h1>Header</h1>
    <p>Description</p>
  </>
);

// Modern Functional Component
export default function Header() {
  return (
    <header className="site-header">
      <div className="logo">CodeTutorium</div>
      <nav>
        <a href="#features">Features</a>
        <a href="#pricing">Pricing</a>
      </nav>
    </header>
  );
}

import Header from './components/Header';
import HeroSection from './components/HeroSection';
import FeatureList from './components/FeatureList';
import Footer from './components/Footer';

export default function App() {
  return (
    <div className="app-shell">
      <Header />
      <main>
        <HeroSection />
        <FeatureList />
      </main>
      <Footer />
    </div>
  );
}

// ❌ IMPURE: Mutating external variables during render causes random bugs
let visitorCount = 0;
function BadCounter() {
  visitorCount = visitorCount + 1; // Modifies external state during render!
  return <p>Visitor: {visitorCount}</p>;
}

// ✅ PURE: Keeps rendering logic isolated and predictable
function GoodCounter({ currentCount }) {
  return <p>Visitor: {currentCount}</p>;
}

src/
├── components/           # Shared generic UI components (Button, Modal, Input)
│   ├── Button/
│   │   ├── Button.jsx
│   │   └── Button.module.css
│   └── Modal/
├── features/             # Domain-specific feature modules
│   ├── auth/             # LoginForm, RegisterModal, authHooks
│   └── products/         # ProductGrid, ProductCard, CartDrawer
├── hooks/                # Reusable custom React hooks
├── utils/                # Helper functions (formatting dates, currency)
├── App.jsx
└── main.jsx

// Child Component receives "props" as its first parameter
export default function CourseCard(props) {
  return (
    <div className="course-card">
      <span className="badge">{props.category}</span>
      <h3>{props.title}</h3>
      <p>Instructor: {props.instructor}</p>
      <p>Duration: {props.durationHours} hours</p>
      <button>Enroll for ${props.price}</button>
    </div>
  );
}

import CourseCard from './CourseCard';

export default function CourseCatalog() {
  return (
    <section className="catalog-grid">
      <CourseCard 
        title="React Mastery" 
        instructor="Sarah Connor" 
        category="Frontend" 
        durationHours={18} 
        price={49.99} 
      />
      <CourseCard 
        title="Node.js Backend Architecture" 
        instructor="David Miller" 
        category="Backend" 
        durationHours={24} 
        price={59.99} 
      />
    </section>
  );
}

// Clean destructuring with default fallback values
export default function Button({ 
  label, 
  variant = 'primary', 
  size = 'medium', 
  disabled = false,
  onClick 
}) {
  return (
    <button 
      className={`btn btn-${variant} btn-${size}`} 
      disabled={disabled}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

export default function Card({ title, children }) {
  return (
    <div className="card">
      <div className="card-header">
        <h3>{title}</h3>
      </div>
      <div className="card-body">
        {/* Anything nested between <Card>...</Card> renders here! */}
        {children}
      </div>
    </div>
  );
}

// Usage in another component:
<Card title="System Notification">
  <p>Your storage is 85% full. Consider upgrading.</p>
  <button className="btn-upgrade">Upgrade Now</button>
</Card>

export default function BrokenCounter() {
  let count = 0;

  function handleClick() {
    count = count + 1;
    console.log('Current count:', count); // Logs 1, 2, 3 in the console...
  }

  // ❌ The screen NEVER updates! It stays stuck at 0!
  return <button onClick={handleClick}>Clicked {count} times</button>;
}

import { useState } from 'react';

export default function WorkingCounter() {
  // Syntax: const [stateValue, setterFunction] = useState(initialValue);
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1); // Updates state and schedules a re-render!
  }

  return (
    <div className="counter-box">
      <h2>Score: {count}</h2>
      <button onClick={handleIncrement}>Add +1</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

// ❌ BUGGY: If called 3 times in a row, it only increments once!
function incrementThreeTimesBroken() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

// ✅ SAFE & PROFESSIONAL: Uses previous state snapshot guarantee
function incrementThreeTimesSafe() {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1); // Correctly increments by +3!
}

const [user, setUser] = useState({ name: 'Alex', age: 25, city: 'London' });
const [items, setItems] = useState(['React', 'Vite']);

// 1. Updating an Object (Spread existing properties, overwrite target):
setUser(prev => ({
  ...prev,
  city: 'Tokyo'
}));

// 2. Adding to an Array (DO NOT use items.push!):
setItems(prev => [...prev, 'TypeScript']);

// 3. Removing an item from an Array (use .filter()):
setItems(prev => prev.filter(item => item !== 'Vite'));

import { useState } from 'react';

export default function EventShowcase() {
  const [text, setText] = useState('');
  const [isHovered, setIsHovered] = useState(false);

  // Input Change Event
  function handleInputChange(e) {
    setText(e.target.value);
  }

  // Key Down Event (e.g. detecting Enter key)
  function handleKeyDown(e) {
    if (e.key === 'Enter') {
      alert(`Submitted: ${text}`);
    }
  }

  return (
    <div className="events-container">
      <input 
        type="text" 
        placeholder="Type and press Enter..." 
        value={text} 
        onChange={handleInputChange} 
        onKeyDown={handleKeyDown} 
      />

      <div 
        className={`hover-box ${isHovered ? 'active' : ''}`}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        {isHovered ? 'Mouse is inside!' : 'Hover over me'}
      </div>
    </div>
  );
}

function SearchForm() {
  function handleSearchSubmit(e) {
    e.preventDefault(); // Stops the browser from reloading the page!
    console.log('Performing smooth AJAX client search...');
  }

  return (
    <form onSubmit={handleSearchSubmit}>
      <input type="search" placeholder="Search docs..." />
      <button type="submit">Search</button>
    </form>
  );
}

export default function AuthBanner({ isLoggedIn, username }) {
  return (
    <div className="auth-bar">
      {isLoggedIn ? (
        <div className="welcome">
          <span>Hello, <strong>{username}</strong>!</span>
          <button className="btn-logout">Log Out</button>
        </div>
      ) : (
        <div className="guest">
          <span>Welcome, Guest. Please sign in.</span>
          <button className="btn-login">Sign In</button>
        </div>
      )}
    </div>
  );
}

function Inbox({ unreadMessages, hasWarning }) {
  return (
    <div className="inbox">
      <h2>Messages</h2>
      
      {/* Only renders the red badge if unreadMessages is greater than 0 */}
      {unreadMessages > 0 && (
        <span className="badge-danger">{unreadMessages} new</span>
      )}

      {hasWarning && <p className="warning-text">Your inbox is almost full!</p>}
    </div>
  );
}

export default function DataView({ isLoading, error, data }) {
  // 1. Guard Clause for Loading
  if (isLoading) {
    return <div className="spinner">Loading your profile...</div>;
  }

  // 2. Guard Clause for Error
  if (error) {
    return <div className="error-box">Failed to load: {error.message}</div>;
  }

  // 3. Main Happy Path Render
  return (
    <article className="content">
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </article>
  );
}

export default function UserDirectory() {
  const developers = [
    { id: 'dev-101', name: 'Sarah Connor', skill: 'React & Next.js' },
    { id: 'dev-102', name: 'Kenji Sato', skill: 'TypeScript & Rust' },
    { id: 'dev-103', name: 'Amara Okafor', skill: 'UI/UX & CSS' }
  ];

  return (
    <div className="directory">
      <h2>Engineering Team</h2>
      <ul>
        {developers.map(dev => (
          <li key={dev.id} className="dev-card">
            <strong>{dev.name}</strong> — <span>{dev.skill}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

import { useState } from 'react';

export default function SearchableProductList({ products }) {
  const [query, setQuery] = useState('');

  // Filter products based on search input
  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <div>
      <input 
        type="search" 
        placeholder="Search products..." 
        value={query}
        onChange={e => setQuery(e.target.value)}
      />

      {filteredProducts.length === 0 ? (
        <p className="empty-msg">No products match your search.</p>
      ) : (
        <div className="grid">
          {filteredProducts.map(p => (
            <div key={p.id} className="item">
              <h4>{p.name}</h4>
              <p>${p.price}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

import { useState } from 'react';

export default function SimpleNameInput() {
  const [name, setName] = useState('');

  return (
    <div>
      <label htmlFor="full-name">Your Name:</label>
      <input 
        id="full-name"
        type="text" 
        value={name} // 1. Push state into input value
        onChange={e => setName(e.target.value)} // 2. Push input edits back into state
      />
      <p>Preview: {name ? name : 'Anonymous'}</p>
    </div>
  );
}

import { useState } from 'react';

export default function RegistrationForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    role: 'student',
    agreeTerms: false
  });

  const [error, setError] = useState('');

  // Single generic change handler for all inputs
  function handleChange(e) {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      // If it's a checkbox, store its boolean checked state, otherwise store value
      [name]: type === 'checkbox' ? checked : value
    }));
  }

  function handleSubmit(e) {
    e.preventDefault();
    if (!formData.agreeTerms) {
      setError('You must agree to the terms to continue.');
      return;
    }
    setError('');
    console.log('Submitted registration data:', formData);
  }

  return (
    <form onSubmit={handleSubmit} className="form-card">
      <h3>Create Free Account</h3>
      {error && <div className="error-alert">{error}</div>}

      <div className="field">
        <label>Email Address</label>
        <input 
          type="email" 
          name="email" 
          value={formData.email} 
          onChange={handleChange} 
          required 
        />
      </div>

      <div className="field">
        <label>Password</label>
        <input 
          type="password" 
          name="password" 
          value={formData.password} 
          onChange={handleChange} 
          required 
        />
      </div>

      <div className="field">
        <label>Learning Track</label>
        <select name="role" value={formData.role} onChange={handleChange}>
          <option value="student">Student / Beginner</option>
          <option value="developer">Professional Developer</option>
          <option value="educator">Teacher / Educator</option>
        </select>
      </div>

      <div className="checkbox-field">
        <input 
          type="checkbox" 
          name="agreeTerms" 
          id="terms" 
          checked={formData.agreeTerms} 
          onChange={handleChange} 
        />
        <label htmlFor="terms">I agree to terms of service</label>
      </div>

      <button type="submit" className="btn-primary">Sign Up</button>
    </form>
  );
}

import { useState } from 'react';

export default function HabitTracker() {
  // 1. Main task list state
  const [tasks, setTasks] = useState([
    { id: 't-1', text: 'Complete React Lecture 10', category: 'Study', completed: true },
    { id: 't-2', text: 'Drink 2L of water', category: 'Health', completed: false },
    { id: 't-3', text: 'Push Git commits to GitHub', category: 'Code', completed: false }
  ]);

  // 2. Input states
  const [inputText, setInputText] = useState('');
  const [category, setCategory] = useState('Study');
  const [filter, setFilter] = useState('all'); // 'all' | 'pending' | 'completed'

  // 3. Add new task
  function handleAddTask(e) {
    e.preventDefault();
    if (!inputText.trim()) return;

    const newTask = {
      id: crypto.randomUUID(),
      text: inputText.trim(),
      category: category,
      completed: false
    };

    setTasks(prev => [newTask, ...prev]);
    setInputText('');
  }

  // 4. Toggle completed flag
  function handleToggle(id) {
    setTasks(prev => prev.map(task => 
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  }

  // 5. Delete task
  function handleDelete(id) {
    setTasks(prev => prev.filter(task => task.id !== id));
  }

  // 6. Filter tasks
  const filteredTasks = tasks.filter(task => {
    if (filter === 'pending') return !task.completed;
    if (filter === 'completed') return task.completed;
    return true;
  });

  // 7. Calculate statistics
  const totalCount = tasks.length;
  const completedCount = tasks.filter(t => t.completed).length;
  const percentage = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;

  return (
    <div className="tracker-app">
      <header className="tracker-header">
        <h1>Daily Habit & Task Tracker</h1>
        <p>Stay consistent. Ship projects.</p>

        <div className="progress-card">
          <div className="progress-stats">
            <span>Progress: {completedCount} of {totalCount} completed</span>
            <strong>{percentage}%</strong>
          </div>
          <div className="progress-track">
            <div className="progress-fill" style={{ width: `${percentage}%` }}></div>
          </div>
        </div>
      </header>

      {/* Add Task Form */}
      <form onSubmit={handleAddTask} className="tracker-form">
        <input 
          type="text" 
          placeholder="What habit do you want to achieve today?" 
          value={inputText} 
          onChange={e => setInputText(e.target.value)} 
          required 
        />
        <select value={category} onChange={e => setCategory(e.target.value)}>
          <option value="Study">Study</option>
          <option value="Code">Code</option>
          <option value="Health">Health</option>
          <option value="Work">Work</option>
        </select>
        <button type="submit">+ Add Habit</button>
      </form>

      {/* Filter Tabs */}
      <div className="filter-tabs">
        <button 
          className={filter === 'all' ? 'active' : ''} 
          onClick={() => setFilter('all')}
        >All ({totalCount})</button>
        <button 
          className={filter === 'pending' ? 'active' : ''} 
          onClick={() => setFilter('pending')}
        >Active ({totalCount - completedCount})</button>
        <button 
          className={filter === 'completed' ? 'active' : ''} 
          onClick={() => setFilter('completed')}
        >Done ({completedCount})</button>
      </div>

      {/* Task List */}
      <ul className="task-list">
        {filteredTasks.length === 0 ? (
          <li className="empty-state">No tasks in this view. Keep up the great work!</li>
        ) : (
          filteredTasks.map(task => (
            <li key={task.id} className={`task-item ${task.completed ? 'done' : ''}`}>
              <label className="checkbox-wrap">
                <input 
                  type="checkbox" 
                  checked={task.completed} 
                  onChange={() => handleToggle(task.id)} 
                />
                <span className="task-label">{task.text}</span>
              </label>
              <span className=`category-badge cat-${task.category.toLowerCase()}`>
                {task.category}
              </span>
              <button 
                onClick={() => handleDelete(task.id)} 
                className="btn-del" 
                title="Delete task"
              >
                ×
              </button>
            </li>
          ))
        )}
      </ul>
    </div>
  );
}

import { useEffect, useState } from 'react';

// Case 1: No Dependency Array (DANGEROUS: Runs after EVERY single render!)
useEffect(() => {
  console.log('Runs after initial mount AND every state/prop update!');
});

// Case 2: Empty Dependency Array [] (Runs ONCE on initial Mount only)
useEffect(() => {
  console.log('Runs exactly ONCE when the component first appears on screen.');
}, []);

// Case 3: With Dependencies [userId] (Runs on Mount + whenever userId changes)
useEffect(() => {
  console.log(`Fetching new data because userId changed to: ${userId}`);
}, [userId]);

import { useState, useEffect } from 'react';

export default function WindowWidthTracker() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    function handleResize() {
      setWindowWidth(window.innerWidth);
    }

    // 1. Set up the event listener on Mount
    window.addEventListener('resize', handleResize);
    console.log('Resize listener attached.');

    // 2. Return cleanup function (Runs on Unmount or before re-running effect)
    return () => {
      window.removeEventListener('resize', handleResize);
      console.log('Listener cleaned up! No memory leaks.');
    };
  }, []); // Empty array ensures listener is only attached once

  return <p>Current Screen Width: <strong>{windowWidth}px</strong></p>;
}

import { useState, useEffect } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // AbortController allows canceling request if component unmounts mid-flight
    const controller = new AbortController();

    async function fetchUsers() {
      try {
        setIsLoading(true);
        setError(null);

        const response = await fetch('https://jsonplaceholder.typicode.com/users', {
          signal: controller.signal
        });

        if (!response.ok) {
          throw new Error(`HTTP Error: ${response.status} ${response.statusText}`);
        }

        const data = await response.json();
        setUsers(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setIsLoading(false);
      }
    }

    fetchUsers();

    return () => controller.abort(); // Cleanup: abort network request on unmount
  }, []);

  // 1. Loading State
  if (isLoading) return <div className="loading-spinner">Fetching developers...</div>;

  // 2. Error State
  if (error) return <div className="error-alert">Error loading data: {error}</div>;

  // 3. Success State
  return (
    <div className="users-container">
      <h2>Active Community Members ({users.length})</h2>
      <div className="user-grid">
        {users.map(user => (
          <div key={user.id} className="user-card">
            <h3>{user.name}</h3>
            <p>📧 {user.email}</p>
            <p>🏢 {user.company.name}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

const [postId, setPostId] = useState(1);
const [post, setPost] = useState(null);

useEffect(() => {
  fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
    .then(res => res.json())
    .then(data => setPost(data));
}, [postId]); // Automatically re-runs whenever postId updates!

import { useRef, useEffect } from 'react';

export default function AutoSearch() {
  // 1. Create a ref container
  const searchInputRef = useRef(null);

  useEffect(() => {
    // 2. Once mounted, searchInputRef.current points directly to the real <input> DOM node!
    searchInputRef.current.focus();
  }, []);

  return (
    <div>
      <input 
        ref={searchInputRef} 
        type="search" 
        placeholder="Cursor starts focused here automatically..." 
      />
    </div>
  );
}

import { useState, useRef } from 'react';

export default function Stopwatch() {
  const [seconds, setSeconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  // Store timer interval ID in a ref so mutating it doesn't cause extra re-renders
  const timerIdRef = useRef(null);

  function handleStart() {
    if (isRunning) return;
    setIsRunning(true);
    timerIdRef.current = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
  }

  function handleStop() {
    clearInterval(timerIdRef.current);
    timerIdRef.current = null;
    setIsRunning(false);
  }

  function handleReset() {
    handleStop();
    setSeconds(0);
  }

  return (
    <div className="stopwatch-box">
      <h1>{seconds}s</h1>
      <button onClick={handleStart} disabled={isRunning}>Start</button>
      <button onClick={handleStop} disabled={!isRunning}>Pause</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

import { useState, useEffect } from 'react';

export function useLocalStorage(key, fallbackValue) {
  // Initialize state from localStorage or fallback
  const [value, setValue] = useState(() => {
    try {
      const saved = localStorage.getItem(key);
      return saved !== null ? JSON.parse(saved) : fallbackValue;
    } catch (e) {
      console.error('Failed to read localStorage:', e);
      return fallbackValue;
    }
  });

  // Automatically sync changes back into localStorage
  useEffect(() => {
    try {
      localStorage.setItem(key, JSON.stringify(value));
    } catch (e) {
      console.error('Failed to write localStorage:', e);
    }
  }, [key, value]);

  return [value, setValue];
}

import { useLocalStorage } from './hooks/useLocalStorage';

export default function ThemeToggle() {
  // Persists user preference across browser restarts automatically!
  const [theme, setTheme] = useLocalStorage('user-theme', 'dark');

  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Current Theme: {theme} (Click to toggle)
    </button>
  );
}

import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true;
    setLoading(true);

    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error(`HTTP Error ${res.status}`);
        return res.json();
      })
      .then(result => {
        if (isMounted) setData(result);
      })
      .catch(err => {
        if (isMounted) setError(err.message);
      })
      .finally(() => {
        if (isMounted) setLoading(false);
      });

    return () => { isMounted = false; };
  }, [url]);

  return { data, loading, error };
}

import { useState, useEffect } from 'react';
import { useLocalStorage } from './hooks/useLocalStorage';

export default function CryptoDashboard() {
  const [coins, setCoins] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [search, setSearch] = useState('');
  
  // Persist pinned coin IDs in localStorage
  const [pinned, setPinned] = useLocalStorage('pinned_coins', ['bitcoin', 'ethereum']);

  async function fetchMarketData() {
    try {
      setLoading(true);
      setError(null);
      const url = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=12&page=1';
      const res = await fetch(url);
      if (!res.ok) throw new Error('Rate limit or API unavailable');
      const data = await res.json();
      setCoins(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    fetchMarketData();
  }, []);

  function togglePin(coinId) {
    setPinned(prev => 
      prev.includes(coinId) ? prev.filter(id => id !== coinId) : [...prev, coinId]
    );
  }

  const filteredCoins = coins.filter(c => 
    c.name.toLowerCase().includes(search.toLowerCase()) ||
    c.symbol.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="dashboard-container">
      <div className="dash-header">
        <h1>Live Market Ticker</h1>
        <button onClick={fetchMarketData} className="btn-refresh">↻ Refresh Prices</button>
      </div>

      <input 
        type="search" 
        placeholder="Filter by coin or symbol (BTC, Solana, ETH)..." 
        value={search} 
        onChange={e => setSearch(e.target.value)} 
        className="dash-search" 
      />

      {loading && <div className="loading-card">Updating live market feeds...</div>}
      {error && <div className="error-card">{error} <button onClick={fetchMarketData}>Retry</button></div>}

      {!loading && !error && (
        <div className="crypto-grid">
          {filteredCoins.map(coin => {
            const isPinned = pinned.includes(coin.id);
            const isPositive = coin.price_change_percentage_24h >= 0;

            return (
              <div key={coin.id} className={`crypto-card ${isPinned ? 'pinned' : ''}`}>
                <div className="coin-top">
                  <img src={coin.image} alt={coin.name} width="32" height="32" />
                  <div>
                    <h3>{coin.name}</h3>
                    <span className="symbol">{coin.symbol.toUpperCase()}</span>
                  </div>
                  <button onClick={() => togglePin(coin.id)} className="pin-btn">
                    {isPinned ? '★' : '☆'}
                  </button>
                </div>

                <div className="price-row">
                  <span className="price">${coin.current_price.toLocaleString()}</span>
                  <span className={`change ${isPositive ? 'up' : 'down'}`}>
                    {isPositive ? '+' : ''}{coin.price_change_percentage_24h?.toFixed(2)}%
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

import { createContext, useContext, useState } from 'react';

// Step 1: Create the Context object
const ThemeContext = createContext();

// Step 2: Create a Custom Provider Component
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('dark');

  function toggleTheme() {
    setTheme(prev => prev === 'dark' ? 'light' : 'dark');
  }

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <div className={`theme-wrapper ${theme}`}>
        {children}
      </div>
    </ThemeContext.Provider>
  );
}

// Step 3: Create a clean custom hook for consumption
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

// 1. Wrap the app tree in main.jsx
<ThemeProvider>
  <App />
</ThemeProvider>

// 2. Consume directly in ANY nested component without props!
import { useTheme } from './context/ThemeContext';

export default function DarkModeButton() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      Current Mode: {theme === 'dark' ? '🌙 Dark' : '☀️ Light'}
    </button>
  );
}

npm install react-router-dom

import { BrowserRouter, Routes, Route, Link, NavLink } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import ProductDetail from './pages/ProductDetail';
import NotFound from './pages/NotFound';

export default function App() {
  return (
    <BrowserRouter>
      <nav className="main-nav">
        {/* NavLink automatically adds an "active" CSS class when matching current URL! */}
        <NavLink to="/" end>Home</NavLink>
        <NavLink to="/about">About</NavLink>
        <NavLink to="/contact">Contact</NavLink>
      </nav>

      <main className="page-container">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          {/* Dynamic route parameter :id */}
          <Route path="/products/:id" element={<ProductDetail />} />
          {/* 404 Catch-All Route */}
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
    </BrowserRouter>
  );
}

import { useParams, useNavigate } from 'react-router-dom';

export default function ProductDetail() {
  const { id } = useParams();
  const navigate = useNavigate();

  return (
    <div className="detail-card">
      <h1>Product ID: #{id}</h1>
      <p>Displaying live specifications for product #{id}...</p>
      
      {/* Programmatic navigation back to home */}
      <button onClick={() => navigate('/')}>
        ← Back to Catalog
      </button>
    </div>
  );
}

import { useState, useMemo } from 'react';

function heavyCalculation(num) {
  console.log('Executing expensive calculation...');
  let total = 0;
  for (let i = 0; i < 50000000; i++) { total += num; }
  return total;
}

export default function ComputeBox() {
  const [number, setNumber] = useState(10);
  const [dark, setDark] = useState(false);

  // useMemo only recalculates when "number" changes, NOT when "dark" toggles!
  const calculationResult = useMemo(() => {
    return heavyCalculation(number);
  }, [number]);

  return (
    <div className={dark ? 'dark' : 'light'}>
      <h3>Result: {calculationResult}</h3>
      <button onClick={() => setNumber(n => n + 1)}>Change Number</button>
      <button onClick={() => setDark(d => !d)}>Toggle Theme (Fast!)</button>
    </div>
  );
}

import React, { useState, useCallback } from 'react';

// Child only re-renders if onItemDelete changes!
const TaskItem = React.memo(({ task, onItemDelete }) => {
  console.log('Rendered TaskItem:', task.text);
  return <li onClick={() => onItemDelete(task.id)}>{task.text}</li>;
});

export default function TaskList() {
  const [tasks, setTasks] = useState([...]);

  // useCallback keeps the exact same function reference between renders
  const handleDelete = useCallback((id) => {
    setTasks(prev => prev.filter(t => t.id !== id));
  }, []);

  return (
    <ul>
      {tasks.map(t => <TaskItem key={t.id} task={t} onItemDelete={handleDelete} />)}
    </ul>
  );
}

import React, { Suspense, lazy } from 'react';

// Components are loaded only when the user actually navigates to them
const AnalyticsDashboard = lazy(() => import('./pages/Analytics'));

function App() {
  return (
    <Suspense fallback={<div className="page-skeleton">Loading page...</div>}>
      <AnalyticsDashboard />
    </Suspense>
  );
}

import { createContext, useContext, useState, useEffect } from 'react';

const CartContext = createContext();

export function CartProvider({ children }) {
  const [cart, setCart] = useState(() => {
    try {
      const saved = localStorage.getItem('cart_items');
      return saved ? JSON.parse(saved) : [];
    } catch (e) { return []; }
  });

  useEffect(() => {
    localStorage.setItem('cart_items', JSON.stringify(cart));
  }, [cart]);

  function addToCart(product) {
    setCart(prev => {
      const existing = prev.find(item => item.id === product.id);
      if (existing) {
        return prev.map(item => 
          item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
        );
      }
      return [...prev, { ...product, quantity: 1 }];
    });
  }

  function removeFromCart(productId) {
    setCart(prev => prev.filter(item => item.id !== productId));
  }

  function updateQuantity(productId, delta) {
    setCart(prev => prev.map(item => {
      if (item.id === productId) {
        const newQty = item.quantity + delta;
        return newQty > 0 ? { ...item, quantity: newQty } : item;
      }
      return item;
    }));
  }

  function clearCart() {
    setCart([]);
  }

  const cartCount = cart.reduce((sum, item) => sum + item.quantity, 0);
  const cartTotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);

  return (
    <CartContext.Provider value={{
      cart,
      addToCart,
      removeFromCart,
      updateQuantity,
      clearCart,
      cartCount,
      cartTotal
    }}>
      {children}
    </CartContext.Provider>
  );
}

export function useCart() {
  return useContext(CartContext);
}

import { useState } from 'react';
import { useCart } from '../context/CartContext';

const PRODUCTS = [
  { id: 'p-1', name: 'Wireless Noise-Canceling Headphones', price: 149.99, category: 'Audio', rating: 4.8 },
  { id: 'p-2', name: 'Mechanical RGB Keyboard (Hot-swap)', price: 99.50, category: 'Peripherals', rating: 4.9 },
  { id: 'p-3', name: 'Ultra-Wide 34-inch 144Hz Monitor', price: 449.00, category: 'Displays', rating: 4.7 },
  { id: 'p-4', name: 'Ergonomic Aluminum Laptop Stand', price: 39.99, category: 'Accessories', rating: 4.6 },
  { id: 'p-5', name: 'Studio Condenser USB Microphone', price: 89.00, category: 'Audio', rating: 4.8 }
];

export default function Catalog() {
  const { addToCart } = useCart();
  const [category, setCategory] = useState('All');
  const [search, setSearch] = useState('');
  const [toast, setToast] = useState('');

  function handleAdd(product) {
    addToCart(product);
    setToast(`Added "${product.name}" to cart!`);
    setTimeout(() => setToast(''), 3000);
  }

  const filtered = PRODUCTS.filter(p => {
    const matchCat = category === 'All' || p.category === category;
    const matchSearch = p.name.toLowerCase().includes(search.toLowerCase());
    return matchCat && matchSearch;
  });

  return (
    <div className="catalog-view">
      {toast && <div className="toast-notification">✓ {toast}</div>}

      <div className="filter-bar">
        <input 
          type="search" 
          placeholder="Search gear..." 
          value={search} 
          onChange={e => setSearch(e.target.value)} 
        />
        <div className="pill-group">
          {['All', 'Audio', 'Peripherals', 'Displays', 'Accessories'].map(cat => (
            <button 
              key={cat} 
              className={category === cat ? 'pill active' : 'pill'} 
              onClick={() => setCategory(cat)}
            >
              {cat}
            </button>
          ))}
        </div>
      </div>

      <div className="product-grid">
        {filtered.map(product => (
          <div key={product.id} className="product-card">
            <div className="tag">{product.category}</div>
            <h3>{product.name}</h3>
            <div className="rating">★ {product.rating} / 5.0</div>
            <div className="card-footer">
              <span className="price">${product.price.toFixed(2)}</span>
              <button onClick={() => handleAdd(product)} className="btn-add">
                + Add to Cart
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

import { useCart } from '../context/CartContext';

export default function CartDrawer({ isOpen, onClose }) {
  const { cart, removeFromCart, updateQuantity, cartTotal, clearCart } = useCart();

  if (!isOpen) return null;

  return (
    <div className="drawer-overlay" onClick={onClose}>
      <div className="drawer-content" onClick={e => e.stopPropagation()}>
        <div className="drawer-head">
          <h2>Your Shopping Cart</h2>
          <button onClick={onClose} className="close-btn">×</button>
        </div>

        <div className="cart-items-scroll">
          {cart.length === 0 ? (
            <div className="cart-empty">Your cart is currently empty.</div>
          ) : (
            cart.map(item => (
              <div key={item.id} className="cart-item-row">
                <div className="item-info">
                  <h4>{item.name}</h4>
                  <span>${item.price.toFixed(2)} each</span>
                </div>

                <div className="qty-controls">
                  <button onClick={() => updateQuantity(item.id, -1)}>-</button>
                  <span>{item.quantity}</span>
                  <button onClick={() => updateQuantity(item.id, 1)}>+</button>
                </div>

                <button onClick={() => removeFromCart(item.id)} className="remove-btn">
                  🗑
                </button>
              </div>
            ))
          )}
        </div>

        {cart.length > 0 && (
          <div className="drawer-foot">
            <div className="total-row">
              <span>Subtotal:</span>
              <strong>${cartTotal.toFixed(2)}</strong>
            </div>
            <button 
              onClick={() => { alert('Order placed successfully! Thank you.'); clearCart(); onClose(); }} 
              className="checkout-btn"
            >
              Proceed to Checkout (${cartTotal.toFixed(2)})
            </button>
          </div>
        )}
      </div>
    </div>
  );
}