FixReact - Interactive React Learning Platform

An interactive web application designed to teach real-world React problem-solving through hands-on coding challenges. Master React by fixing bugs, understanding patterns, and leveling up your skills through 108+ carefully crafted problems.

Project Overview

FixReact is an educational platform that helps developers learn React through practical problem-solving. Users progress through categorized challenges, write code in an interactive editor, validate their solutions in real-time, and receive detailed explanations of React concepts.

Core Philosophy

• Learning by Doing: Fix real bugs instead of reading documentation
• Instant Feedback: Validate solutions immediately with built-in test cases
• Deep Understanding: Each problem includes comprehensive explanations of why bugs happen and how to fix them
• Progressive Difficulty: Problems range from beginner to advanced levels

Key Features

1. Interactive Problem Browser

• 108+ React Problems: Covering hooks, lifecycle, performance, state management, rendering, and async patterns
• Smart Filtering: Filter problems by category (hooks, lifecycle, performance, state, rendering, async)
• Progress Tracking: Visual progress bar showing completed vs. total problems
• Difficulty Badges: Problems labeled as beginner, intermediate, or advanced
• Solved Status: Checkmarks indicate completed challenges with persistent state

2. Code Playground

• Live Code Editor: Full-featured CodeMirror editor with syntax highlighting
• Starter Code: Each problem provides broken code to fix
• Real-time Validation: Submit solutions and get instant test results
• Expected Solution: View the correct implementation after solving
• Reset Functionality: Start over with original broken code anytime

3. Educational Content

• Problem Descriptions: Clear explanation of what's broken
• Test Cases: Automated validation ensures correct solutions
• Detailed Explanations: Four-part breakdown for each problem:
  • The Problem: What's wrong with the code
  • Why It Happens: Root cause analysis
  • The Fix: Step-by-step solution
  • Alternatives: Other approaches to solve the same issue

4. Persistent Progress

• Local Storage: Solved problems persist across sessions
• Progress Metrics: Track completion percentage
• Per-User Data: State management via Zustand with localStorage

5. Modern UI/UX

• Dark Theme: Professional slate-950 background with emerald/cyan accents
• Smooth Animations: GSAP-powered entrance animations
• Responsive Design: Mobile-first approach works on all devices
• Code Splitting: Lazy-loaded pages for optimal performance

How the Project Works

Application Architecture

User Flow:
HomePage → Browse Problems → Click Problem → PlaygroundPage → Solve → Validate → View Explanation

1. Entry Point (src/main.tsx)

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

2. Routing Layer (src/App.tsx)

// Implements code splitting with lazy loading
const HomePage = lazy(() => import('./pages/HomePage'));
const PlaygroundPage = lazy(() => import('./pages/PlaygroundPage'));

// Two main routes:
// "/" - Problem browser
// "/problem/:problemId" - Interactive playground

3. State Management (src/store/problemStore.ts)

// Zustand store with localStorage persistence
interface ProblemState {
  solvedProblems: Set<string>;      // Tracks completed problems
  solveProblem: (id: string) => void;  // Marks problem as solved
  isSolved: (id: string) => boolean;   // Checks solve status
  getTotalSolved: () => number;        // Progress metrics
}

4. Data Layer (src/data/problems.ts)

// Problem interface defines structure
export interface Problem {
  id: string;
  title: string;
  category: 'hooks' | 'lifecycle' | 'performance' | 'state' | 'rendering' | 'async';
  difficulty: 'beginner' | 'intermediate' | 'advanced';
  description: string;
  starterCode: string;      // Broken code
  solution: string;         // Correct implementation
  testCases: TestCase[];    // Validation logic
  explanation: {            // Educational content
    problem: string;
    why: string;
    solution: string;
    alternatives: string[];
  };
}

Feature Implementation Details

Problem Filtering

// HomePage.tsx
const [selectedCategory, setSelectedCategory] = useState('all');

const filteredProblems = selectedCategory === 'all'
  ? allProblems
  : allProblems.filter((p) => p.category === selectedCategory);

Code Validation

// PlaygroundPage.tsx
const handleSubmit = () => {
  const failedTests: string[] = [];
  
  problem.testCases.forEach((test) => {
    if (!test.validate(userCode)) {
      failedTests.push(test.description);
    }
  });

  const passed = failedTests.length === 0;
  if (passed) {
    solveProblem(problem.id);  // Persist to store
    setShowExplanation(true);   // Reveal educational content
  }
};

Progress Calculation

// ProgressBar.tsx
const totalSolved = useProblemStore(state => state.getTotalSolved());
const totalProblems = allProblems.length;
const percentage = (totalSolved / totalProblems) * 100;

Code Editor Integration

// CodeEditor.tsx using @uiw/react-codemirror
<CodeMirror
  value={code}
  height="400px"
  theme={oneDark}
  extensions={[javascript({ jsx: true, typescript: true })]}
  onChange={handleChange}
  readOnly={readOnly}
/>

How Problems Work

Problem Definition Example

{
  id: 'infinite-useeffect',
  title: 'Infinite Loop in useEffect',
  category: 'hooks',
  difficulty: 'beginner',
  description: 'Fix the infinite rendering caused by missing dependency array',
  
  starterCode: `function Counter() {
    const [count, setCount] = useState(0);
    useEffect(() => {
      setCount(count + 1);
    }); // BUG: Missing dependency array
    return <div>Count: {count}</div>;
  }`,
  
  solution: `function Counter() {
    const [count, setCount] = useState(0);
    useEffect(() => {
      setCount(count + 1);
    }, []); // FIX: Empty array runs only once
    return <div>Count: {count}</div>;
  }`,
  
  testCases: [
    {
      description: 'useEffect has dependency array',
      validate: (code) => /useEffect\([^)]+\),\s*\[/.test(code)
    }
  ],
  
  explanation: {
    problem: 'Missing dependency array causes useEffect to run after every render',
    why: 'Without a dependency array, useEffect runs after every render...',
    solution: 'Add an empty dependency array [] to run the effect only once',
    alternatives: [
      'Use dependencies array with specific values: [someValue]',
      'Use useCallback for function dependencies'
    ]
  }
}

Validation Flow

1. User edits code in CodeMirror editor
2. Clicks "Submit Solution"
3. System runs all testCases[].validate(userCode)
4. Collects failed test descriptions
5. Shows success/failure UI with specific failures
6. On success: marks problem solved + reveals explanation

🔧 Tech Stack Details

Core Framework

• React 18.3.1: Declarative UI with concurrent features
• TypeScript 5.8.3: Type-safe development
• Vite 7.0.0: Fast build tool with HMR

UI Libraries

• Tailwind CSS 3.4.17: Utility-first styling
• @uiw/react-codemirror 4.23.9: Code editor component
• @codemirror/lang-javascript: JSX/TS syntax support
• @codemirror/theme-one-dark: Editor dark theme
• Lucide React: Icon library (CheckCircle, XCircle, etc.)

State & Routing

• Zustand 4.4.7: Lightweight state management
• React Router DOM 6.30.1: Client-side routing

Animations

• GSAP 3.13.0: Professional animations via AnimatedContent
• Tailwind Animation Utilities: Fade-in, slide-up, scale-in

Build Optimization

• Code Splitting: React.lazy() for HomePage and PlaygroundPage
• Tree Shaking: Vite removes unused code
• Asset Optimization: Automatic minification and compression

Development Patterns

Adding a New Problem

1. Add problem object to src/data/problems.ts
2. Define starterCode, solution, testCases, and explanation
3. Test validation logic ensures correctness
4. Problem automatically appears on HomePage

Extending Categories

1. Update category type in Problem interface
2. Add category color mapping in ProblemCard.tsx
3. Add filter option in CategoryFilter.tsx

Customizing Theme

1. Modify tailwind.config.js for color palette changes
2. Update global styles in src/index.css
3. Adjust component-specific styles in respective files

Learning Outcomes

By completing FixReact challenges, developers will master:

• React Hooks: useEffect, useState, useCallback, useMemo, useRef
• Performance: Memoization, code splitting, render optimization
• State Management: Lifting state, derived state, complex updates
• Async Patterns: Data fetching, race conditions, loading states
• Component Lifecycle: Mount, update, unmount behaviors
• Common Pitfalls: Stale closures, infinite loops, memory leaks

Troubleshooting

Build Failures

# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install
npm run build

State Not Persisting

• Check localStorage in browser DevTools
• Verify problemStore.ts storage configuration
• Clear localStorage: localStorage.clear()

Editor Not Loading

• Verify @uiw/react-codemirror installation
• Check console for CodeMirror errors
• Ensure JavaScript/TypeScript extensions loaded

License

This project is an educational tool built with modern React best practices. Feel free to use, modify, and learn from the codebase.

---

Built with love for React developers who learn by doing.