{"owner":"sudheerj","repo":"reactjs-interview-questions","hasSkills":true,"totalSkillsCount":1,"totalTokensCount":1823,"categories":["project-spec"],"hasMcp":false,"mcpConfig":null,"found":["coding-exercise/ARCHITECTURE.md"],"skills":{"coding-exercise/ARCHITECTURE.md":"# Architecture Overview\n\n## 📊 Visual Structure\n\n```\ncoding-exercise/\n│\n├── 📄 STRUCTURE.md          # Detailed documentation\n├── 📄 QUICK_START.md        # Quick guide for adding exercises\n├── 📄 ARCHITECTURE.md       # This file - architecture overview\n│\n└── src/\n    ├── 📱 App.js            # Main app with routing\n    │   └── Uses: HomePage, NavigationButton, exercises registry\n    │\n    ├── 🧩 components/       # Reusable UI components\n    │   ├── HomePage.js      # Landing page\n    │   ├── ExerciseCard.js  # Exercise card component\n    │   └── NavigationButton.js  # Back button\n    │\n    └── 📚 exercises/        # All exercises\n        ├── index.js         # ⭐ EXERCISE REGISTRY (add new exercises here)\n        │\n        ├── __template__/    # Template for new exercises\n        │   ├── Problem.js\n        │   ├── Solution.js\n        │   ├── index.js\n        │   └── README.md\n        │\n        ├── exercise-01-state-batching/\n        │   ├── Problem.js\n        │   ├── Solution.js\n        │   └── index.js\n        │\n        └── exercise-02-useeffect-dependencies/\n            ├── Problem.js\n            ├── Solution.js\n            └── index.js\n```\n\n## 🔄 Data Flow\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                          App.js                              │\n│  - Manages currentView state                                 │\n│  - Routes between home and exercise views                    │\n└─────────────────────────────────────────────────────────────┘\n                              │\n                              ├─── home ────────────────────┐\n                              │                              │\n                              │                              ▼\n                              │                    ┌──────────────────┐\n                              │                    │   HomePage.js    │\n                              │                    │  - Lists all     │\n                              │                    │    exercises     │\n                              │                    │  - Uses          │\n                              │                    │    ExerciseCard  │\n                              │                    └──────────────────┘\n                              │                              │\n                              │                              │ reads from\n                              │                              ▼\n                              │                    ┌──────────────────┐\n                              │                    │ exercises/       │\n                              │                    │   index.js       │\n                              │                    │ (Registry)       │\n                              │                    └──────────────────┘\n                              │\n                              └─── exercise-XX-problem ─────┐\n                              └─── exercise-XX-solution ────┤\n                                                             │\n                                                             ▼\n                                              ┌──────────────────────────┐\n                                              │  Dynamically loads       │\n                                              │  Problem or Solution     │\n                                              │  component from registry │\n                                              └──────────────────────────┘\n```\n\n## 🏗️ Component Hierarchy\n\n```\nApp\n├── NavigationButton (when not on home)\n└── Current View\n    ├── HomePage\n    │   └── ExerciseCard (for each exercise)\n    │       ├── View Problem button\n    │       └── View Solution button\n    │\n    └── Exercise Component (Problem or Solution)\n        └── Interactive React components\n```\n\n## 🎯 Key Design Decisions\n\n### 1. **Centralized Registry Pattern**\n- **File**: `exercises/index.js`\n- **Why**: Single source of truth for all exercises\n- **Benefit**: Add exercises without touching App.js\n\n### 2. **Folder-per-Exercise Structure**\n- **Pattern**: `exercise-XX-topic-name/`\n- **Why**: Self-contained, easy to find and maintain\n- **Benefit**: Clear organization as project scales\n\n### 3. **Component Reusability**\n- **Location**: `components/`\n- **Why**: Shared UI components\n- **Benefit**: Consistent styling and behavior\n\n### 4. **Template-Based Creation**\n- **Location**: `exercises/__template__/`\n- **Why**: Standardized structure\n- **Benefit**: Fast exercise creation, consistent format\n\n### 5. **Dynamic Routing**\n- **Implementation**: String-based view state\n- **Why**: Simple, no external router needed\n- **Benefit**: Lightweight, easy to understand\n\n## 📦 Module Dependencies\n\n```\nApp.js\n  ↓ imports\n  ├── HomePage (from components/)\n  ├── NavigationButton (from components/)\n  └── exercises (from exercises/index.js)\n\nHomePage.js\n  ↓ imports\n  ├── ExerciseCard (from components/)\n  └── exercises (from exercises/index.js)\n\nexercises/index.js\n  ↓ imports\n  ├── exercise-01-state-batching\n  ├── exercise-02-useeffect-dependencies\n  └── ... (more exercises)\n\nEach exercise folder\n  ↓ exports via index.js\n  ├── Problem component\n  └── Solution component\n```\n\n## 🔑 Key Files\n\n| File | Purpose | When to Edit |\n|------|---------|--------------|\n| `exercises/index.js` | Exercise registry | **Every time** you add a new exercise |\n| `exercises/__template__/` | Template files | When creating a new exercise (copy it) |\n| `components/ExerciseCard.js` | Exercise card UI | To change how exercises are displayed |\n| `components/HomePage.js` | Home page layout | To change home page structure |\n| `App.js` | Main routing logic | Rarely (architecture is stable) |\n\n## 🚀 Scaling Strategy\n\n### Adding 10 Exercises\n✅ Current structure handles this perfectly\n- Just add folders and register in index.js\n\n### Adding 50 Exercises\n✅ Current structure still works\n- Consider adding categories in registry\n- Group exercises by difficulty or topic\n\n### Adding 100+ Exercises\n⚠️ Consider enhancements:\n- Add search/filter functionality\n- Implement category pages\n- Add pagination\n- Create difficulty-based navigation\n\n## 🎨 Styling Strategy\n\n**Current**: Inline styles\n- ✅ No CSS conflicts\n- ✅ Component-scoped\n- ✅ Easy to copy/paste\n- ✅ Works without build config\n\n**Future**: If needed\n- CSS Modules for shared styles\n- Styled Components for complex styling\n- Tailwind CSS for utility classes\n\n## 🧪 Testing Strategy\n\n### Current Setup\n- Manual testing in browser\n- Visual verification\n\n### Recommended Additions\n```javascript\n// Example test structure\ndescribe('Exercise 01', () => {\n  it('renders problem correctly', () => {\n    // Test problem component\n  });\n  \n  it('renders solution correctly', () => {\n    // Test solution component\n  });\n});\n```\n\n## 📈 Performance Considerations\n\n### Current Optimizations\n- ✅ No unnecessary re-renders (simple state management)\n- ✅ Lazy loading not needed (small bundle size)\n- ✅ Inline styles (no CSS parsing overhead)\n\n### Future Optimizations (if needed)\n- React.lazy() for code splitting\n- useMemo for expensive calculations\n- Virtual scrolling for large exercise lists\n\n## 🔒 Best Practices\n\n1. **One Exercise = One Folder**: Keep exercises self-contained\n2. **Register Immediately**: Add to registry right after creating\n3. **Follow Naming**: Use `exercise-XX-topic-name` format\n4. **Test Before Commit**: Always run `npm start` to verify\n5. **Document Complex Logic**: Add comments for tricky code\n6. **Keep Templates Updated**: Update `__template__` with improvements\n\n## 🎓 Learning Path\n\nFor new contributors:\n1. Read `QUICK_START.md` (5 min)\n2. Browse existing exercises (10 min)\n3. Copy template and create test exercise (15 min)\n4. Read `STRUCTURE.md` for details (10 min)\n5. Review this architecture doc (5 min)\n\nTotal: ~45 minutes to full productivity\n\n## 🤝 Contributing Guidelines\n\n1. **Before adding an exercise**:\n   - Check if topic already exists\n   - Ensure it's interview-relevant\n   - Verify it teaches one clear concept\n\n2. **When adding an exercise**:\n   - Use the template\n   - Follow naming conventions\n   - Test thoroughly\n   - Add clear explanations\n\n3. **After adding an exercise**:\n   - Verify navigation works\n   - Check for console errors\n   - Test on different screen sizes\n   - Update documentation if needed\n\n---\n\n**Questions?** Check the other documentation files or review existing exercises for examples.\n"},"files":{"coding-exercise/ARCHITECTURE.md":"# Architecture Overview\n\n## 📊 Visual Structure\n\n```\ncoding-exercise/\n│\n├── 📄 STRUCTURE.md          # Detailed documentation\n├── 📄 QUICK_START.md        # Quick guide for adding exercises\n├── 📄 ARCHITECTURE.md       # This file - architecture overview\n│\n└── src/\n    ├── 📱 App.js            # Main app with routing\n    │   └── Uses: HomePage, NavigationButton, exercises registry\n    │\n    ├── 🧩 components/       # Reusable UI components\n    │   ├── HomePage.js      # Landing page\n    │   ├── ExerciseCard.js  # Exercise card component\n    │   └── NavigationButton.js  # Back button\n    │\n    └── 📚 exercises/        # All exercises\n        ├── index.js         # ⭐ EXERCISE REGISTRY (add new exercises here)\n        │\n        ├── __template__/    # Template for new exercises\n        │   ├── Problem.js\n        │   ├── Solution.js\n        │   ├── index.js\n        │   └── README.md\n        │\n        ├── exercise-01-state-batching/\n        │   ├── Problem.js\n        │   ├── Solution.js\n        │   └── index.js\n        │\n        └── exercise-02-useeffect-dependencies/\n            ├── Problem.js\n            ├── Solution.js\n            └── index.js\n```\n\n## 🔄 Data Flow\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                          App.js                              │\n│  - Manages currentView state                                 │\n│  - Routes between home and exercise views                    │\n└─────────────────────────────────────────────────────────────┘\n                              │\n                              ├─── home ────────────────────┐\n                              │                              │\n                              │                              ▼\n                              │                    ┌──────────────────┐\n                              │                    │   HomePage.js    │\n                              │                    │  - Lists all     │\n                              │                    │    exercises     │\n                              │                    │  - Uses          │\n                              │                    │    ExerciseCard  │\n                              │                    └──────────────────┘\n                              │                              │\n                              │                              │ reads from\n                              │                              ▼\n                              │                    ┌──────────────────┐\n                              │                    │ exercises/       │\n                              │                    │   index.js       │\n                              │                    │ (Registry)       │\n                              │                    └──────────────────┘\n                              │\n                              └─── exercise-XX-problem ─────┐\n                              └─── exercise-XX-solution ────┤\n                                                             │\n                                                             ▼\n                                              ┌──────────────────────────┐\n                                              │  Dynamically loads       │\n                                              │  Problem or Solution     │\n                                              │  component from registry │\n                                              └──────────────────────────┘\n```\n\n## 🏗️ Component Hierarchy\n\n```\nApp\n├── NavigationButton (when not on home)\n└── Current View\n    ├── HomePage\n    │   └── ExerciseCard (for each exercise)\n    │       ├── View Problem button\n    │       └── View Solution button\n    │\n    └── Exercise Component (Problem or Solution)\n        └── Interactive React components\n```\n\n## 🎯 Key Design Decisions\n\n### 1. **Centralized Registry Pattern**\n- **File**: `exercises/index.js`\n- **Why**: Single source of truth for all exercises\n- **Benefit**: Add exercises without touching App.js\n\n### 2. **Folder-per-Exercise Structure**\n- **Pattern**: `exercise-XX-topic-name/`\n- **Why**: Self-contained, easy to find and maintain\n- **Benefit**: Clear organization as project scales\n\n### 3. **Component Reusability**\n- **Location**: `components/`\n- **Why**: Shared UI components\n- **Benefit**: Consistent styling and behavior\n\n### 4. **Template-Based Creation**\n- **Location**: `exercises/__template__/`\n- **Why**: Standardized structure\n- **Benefit**: Fast exercise creation, consistent format\n\n### 5. **Dynamic Routing**\n- **Implementation**: String-based view state\n- **Why**: Simple, no external router needed\n- **Benefit**: Lightweight, easy to understand\n\n## 📦 Module Dependencies\n\n```\nApp.js\n  ↓ imports\n  ├── HomePage (from components/)\n  ├── NavigationButton (from components/)\n  └── exercises (from exercises/index.js)\n\nHomePage.js\n  ↓ imports\n  ├── ExerciseCard (from components/)\n  └── exercises (from exercises/index.js)\n\nexercises/index.js\n  ↓ imports\n  ├── exercise-01-state-batching\n  ├── exercise-02-useeffect-dependencies\n  └── ... (more exercises)\n\nEach exercise folder\n  ↓ exports via index.js\n  ├── Problem component\n  └── Solution component\n```\n\n## 🔑 Key Files\n\n| File | Purpose | When to Edit |\n|------|---------|--------------|\n| `exercises/index.js` | Exercise registry | **Every time** you add a new exercise |\n| `exercises/__template__/` | Template files | When creating a new exercise (copy it) |\n| `components/ExerciseCard.js` | Exercise card UI | To change how exercises are displayed |\n| `components/HomePage.js` | Home page layout | To change home page structure |\n| `App.js` | Main routing logic | Rarely (architecture is stable) |\n\n## 🚀 Scaling Strategy\n\n### Adding 10 Exercises\n✅ Current structure handles this perfectly\n- Just add folders and register in index.js\n\n### Adding 50 Exercises\n✅ Current structure still works\n- Consider adding categories in registry\n- Group exercises by difficulty or topic\n\n### Adding 100+ Exercises\n⚠️ Consider enhancements:\n- Add search/filter functionality\n- Implement category pages\n- Add pagination\n- Create difficulty-based navigation\n\n## 🎨 Styling Strategy\n\n**Current**: Inline styles\n- ✅ No CSS conflicts\n- ✅ Component-scoped\n- ✅ Easy to copy/paste\n- ✅ Works without build config\n\n**Future**: If needed\n- CSS Modules for shared styles\n- Styled Components for complex styling\n- Tailwind CSS for utility classes\n\n## 🧪 Testing Strategy\n\n### Current Setup\n- Manual testing in browser\n- Visual verification\n\n### Recommended Additions\n```javascript\n// Example test structure\ndescribe('Exercise 01', () => {\n  it('renders problem correctly', () => {\n    // Test problem component\n  });\n  \n  it('renders solution correctly', () => {\n    // Test solution component\n  });\n});\n```\n\n## 📈 Performance Considerations\n\n### Current Optimizations\n- ✅ No unnecessary re-renders (simple state management)\n- ✅ Lazy loading not needed (small bundle size)\n- ✅ Inline styles (no CSS parsing overhead)\n\n### Future Optimizations (if needed)\n- React.lazy() for code splitting\n- useMemo for expensive calculations\n- Virtual scrolling for large exercise lists\n\n## 🔒 Best Practices\n\n1. **One Exercise = One Folder**: Keep exercises self-contained\n2. **Register Immediately**: Add to registry right after creating\n3. **Follow Naming**: Use `exercise-XX-topic-name` format\n4. **Test Before Commit**: Always run `npm start` to verify\n5. **Document Complex Logic**: Add comments for tricky code\n6. **Keep Templates Updated**: Update `__template__` with improvements\n\n## 🎓 Learning Path\n\nFor new contributors:\n1. Read `QUICK_START.md` (5 min)\n2. Browse existing exercises (10 min)\n3. Copy template and create test exercise (15 min)\n4. Read `STRUCTURE.md` for details (10 min)\n5. Review this architecture doc (5 min)\n\nTotal: ~45 minutes to full productivity\n\n## 🤝 Contributing Guidelines\n\n1. **Before adding an exercise**:\n   - Check if topic already exists\n   - Ensure it's interview-relevant\n   - Verify it teaches one clear concept\n\n2. **When adding an exercise**:\n   - Use the template\n   - Follow naming conventions\n   - Test thoroughly\n   - Add clear explanations\n\n3. **After adding an exercise**:\n   - Verify navigation works\n   - Check for console errors\n   - Test on different screen sizes\n   - Update documentation if needed\n\n---\n\n**Questions?** Check the other documentation files or review existing exercises for examples.\n"},"items":[{"name":"ARCHITECTURE.md","path":"coding-exercise/ARCHITECTURE.md","rawUrl":"https://raw.githubusercontent.com/sudheerj/reactjs-interview-questions/HEAD/coding-exercise/ARCHITECTURE.md","title":"coding-exercise - System Architecture & Module Boundaries","category":"project-spec","format":"markdown","content":"# Architecture Overview\n\n## 📊 Visual Structure\n\n```\ncoding-exercise/\n│\n├── 📄 STRUCTURE.md          # Detailed documentation\n├── 📄 QUICK_START.md        # Quick guide for adding exercises\n├── 📄 ARCHITECTURE.md       # This file - architecture overview\n│\n└── src/\n    ├── 📱 App.js            # Main app with routing\n    │   └── Uses: HomePage, NavigationButton, exercises registry\n    │\n    ├── 🧩 components/       # Reusable UI components\n    │   ├── HomePage.js      # Landing page\n    │   ├── ExerciseCard.js  # Exercise card component\n    │   └── NavigationButton.js  # Back button\n    │\n    └── 📚 exercises/        # All exercises\n        ├── index.js         # ⭐ EXERCISE REGISTRY (add new exercises here)\n        │\n        ├── __template__/    # Template for new exercises\n        │   ├── Problem.js\n        │   ├── Solution.js\n        │   ├── index.js\n        │   └── README.md\n        │\n        ├── exercise-01-state-batching/\n        │   ├── Problem.js\n        │   ├── Solution.js\n        │   └── index.js\n        │\n        └── exercise-02-useeffect-dependencies/\n            ├── Problem.js\n            ├── Solution.js\n            └── index.js\n```\n\n## 🔄 Data Flow\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                          App.js                              │\n│  - Manages currentView state                                 │\n│  - Routes between home and exercise views                    │\n└─────────────────────────────────────────────────────────────┘\n                              │\n                              ├─── home ────────────────────┐\n                              │                              │\n                              │                              ▼\n                              │                    ┌──────────────────┐\n                              │                    │   HomePage.js    │\n                              │                    │  - Lists all     │\n                              │                    │    exercises     │\n                              │                    │  - Uses          │\n                              │                    │    ExerciseCard  │\n                              │                    └──────────────────┘\n                              │                              │\n                              │                              │ reads from\n                              │                              ▼\n                              │                    ┌──────────────────┐\n                              │                    │ exercises/       │\n                              │                    │   index.js       │\n                              │                    │ (Registry)       │\n                              │                    └──────────────────┘\n                              │\n                              └─── exercise-XX-problem ─────┐\n                              └─── exercise-XX-solution ────┤\n                                                             │\n                                                             ▼\n                                              ┌──────────────────────────┐\n                                              │  Dynamically loads       │\n                                              │  Problem or Solution     │\n                                              │  component from registry │\n                                              └──────────────────────────┘\n```\n\n## 🏗️ Component Hierarchy\n\n```\nApp\n├── NavigationButton (when not on home)\n└── Current View\n    ├── HomePage\n    │   └── ExerciseCard (for each exercise)\n    │       ├── View Problem button\n    │       └── View Solution button\n    │\n    └── Exercise Component (Problem or Solution)\n        └── Interactive React components\n```\n\n## 🎯 Key Design Decisions\n\n### 1. **Centralized Registry Pattern**\n- **File**: `exercises/index.js`\n- **Why**: Single source of truth for all exercises\n- **Benefit**: Add exercises without touching App.js\n\n### 2. **Folder-per-Exercise Structure**\n- **Pattern**: `exercise-XX-topic-name/`\n- **Why**: Self-contained, easy to find and maintain\n- **Benefit**: Clear organization as project scales\n\n### 3. **Component Reusability**\n- **Location**: `components/`\n- **Why**: Shared UI components\n- **Benefit**: Consistent styling and behavior\n\n### 4. **Template-Based Creation**\n- **Location**: `exercises/__template__/`\n- **Why**: Standardized structure\n- **Benefit**: Fast exercise creation, consistent format\n\n### 5. **Dynamic Routing**\n- **Implementation**: String-based view state\n- **Why**: Simple, no external router needed\n- **Benefit**: Lightweight, easy to understand\n\n## 📦 Module Dependencies\n\n```\nApp.js\n  ↓ imports\n  ├── HomePage (from components/)\n  ├── NavigationButton (from components/)\n  └── exercises (from exercises/index.js)\n\nHomePage.js\n  ↓ imports\n  ├── ExerciseCard (from components/)\n  └── exercises (from exercises/index.js)\n\nexercises/index.js\n  ↓ imports\n  ├── exercise-01-state-batching\n  ├── exercise-02-useeffect-dependencies\n  └── ... (more exercises)\n\nEach exercise folder\n  ↓ exports via index.js\n  ├── Problem component\n  └── Solution component\n```\n\n## 🔑 Key Files\n\n| File | Purpose | When to Edit |\n|------|---------|--------------|\n| `exercises/index.js` | Exercise registry | **Every time** you add a new exercise |\n| `exercises/__template__/` | Template files | When creating a new exercise (copy it) |\n| `components/ExerciseCard.js` | Exercise card UI | To change how exercises are displayed |\n| `components/HomePage.js` | Home page layout | To change home page structure |\n| `App.js` | Main routing logic | Rarely (architecture is stable) |\n\n## 🚀 Scaling Strategy\n\n### Adding 10 Exercises\n✅ Current structure handles this perfectly\n- Just add folders and register in index.js\n\n### Adding 50 Exercises\n✅ Current structure still works\n- Consider adding categories in registry\n- Group exercises by difficulty or topic\n\n### Adding 100+ Exercises\n⚠️ Consider enhancements:\n- Add search/filter functionality\n- Implement category pages\n- Add pagination\n- Create difficulty-based navigation\n\n## 🎨 Styling Strategy\n\n**Current**: Inline styles\n- ✅ No CSS conflicts\n- ✅ Component-scoped\n- ✅ Easy to copy/paste\n- ✅ Works without build config\n\n**Future**: If needed\n- CSS Modules for shared styles\n- Styled Components for complex styling\n- Tailwind CSS for utility classes\n\n## 🧪 Testing Strategy\n\n### Current Setup\n- Manual testing in browser\n- Visual verification\n\n### Recommended Additions\n```javascript\n// Example test structure\ndescribe('Exercise 01', () => {\n  it('renders problem correctly', () => {\n    // Test problem component\n  });\n  \n  it('renders solution correctly', () => {\n    // Test solution component\n  });\n});\n```\n\n## 📈 Performance Considerations\n\n### Current Optimizations\n- ✅ No unnecessary re-renders (simple state management)\n- ✅ Lazy loading not needed (small bundle size)\n- ✅ Inline styles (no CSS parsing overhead)\n\n### Future Optimizations (if needed)\n- React.lazy() for code splitting\n- useMemo for expensive calculations\n- Virtual scrolling for large exercise lists\n\n## 🔒 Best Practices\n\n1. **One Exercise = One Folder**: Keep exercises self-contained\n2. **Register Immediately**: Add to registry right after creating\n3. **Follow Naming**: Use `exercise-XX-topic-name` format\n4. **Test Before Commit**: Always run `npm start` to verify\n5. **Document Complex Logic**: Add comments for tricky code\n6. **Keep Templates Updated**: Update `__template__` with improvements\n\n## 🎓 Learning Path\n\nFor new contributors:\n1. Read `QUICK_START.md` (5 min)\n2. Browse existing exercises (10 min)\n3. Copy template and create test exercise (15 min)\n4. Read `STRUCTURE.md` for details (10 min)\n5. Review this architecture doc (5 min)\n\nTotal: ~45 minutes to full productivity\n\n## 🤝 Contributing Guidelines\n\n1. **Before adding an exercise**:\n   - Check if topic already exists\n   - Ensure it's interview-relevant\n   - Verify it teaches one clear concept\n\n2. **When adding an exercise**:\n   - Use the template\n   - Follow naming conventions\n   - Test thoroughly\n   - Add clear explanations\n\n3. **After adding an exercise**:\n   - Verify navigation works\n   - Check for console errors\n   - Test on different screen sizes\n   - Update documentation if needed\n\n---\n\n**Questions?** Check the other documentation files or review existing exercises for examples.\n","isInternal":false,"tokens":1823,"sizeBytes":9471}],"systemPromptSnippet":"<yakaai_skills repo=\"sudheerj/reactjs-interview-questions\">\n<!-- File: coding-exercise/ARCHITECTURE.md (Tokens: ~1823 | Category: project-spec) -->\n# Architecture Overview\n\n## 📊 Visual Structure\n\n```\ncoding-exercise/\n│\n├── 📄 STRUCTURE.md          # Detailed documentation\n├── 📄 QUICK_START.md        # Quick guide for adding exercises\n├── 📄 ARCHITECTURE.md       # This file - architecture overview\n│\n└── src/\n    ├── 📱 App.js            # Main app with routing\n    │   └── Uses: HomePage, NavigationButton, exercises registry\n    │\n    ├── 🧩 components/       # Reusable UI components\n    │   ├── HomePage.js      # Landing page\n    │   ├── ExerciseCard.js  # Exercise card component\n    │   └── NavigationButton.js  # Back button\n    │\n    └── 📚 exercises/        # All exercises\n        ├── index.js         # ⭐ EXERCISE REGISTRY (add new exercises here)\n        │\n        ├── __template__/    # Template for new exercises\n        │   ├── Problem.js\n        │   ├── Solution.js\n        │   ├── index.js\n        │   └── README.md\n        │\n        ├── exercise-01-state-batching/\n        │   ├── Problem.js\n        │   ├── Solution.js\n        │   └── index.js\n        │\n        └── exercise-02-useeffect-dependencies/\n            ├── Problem.js\n            ├── Solution.js\n            └── index.js\n```\n\n## 🔄 Data Flow\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                          App.js                              │\n│  - Manages currentView state                                 │\n│  - Routes between home and exercise views                    │\n└─────────────────────────────────────────────────────────────┘\n                              │\n                              ├─── home ────────────────────┐\n                              │                              │\n                              │                              ▼\n                              │                    ┌──────────────────┐\n                              │                    │   HomePage.js    │\n                              │                    │  - Lists all     │\n                              │                    │    exercises     │\n                              │                    │  - Uses          │\n                              │                    │    ExerciseCard  │\n                              │                    └──────────────────┘\n                              │                              │\n                              │                              │ reads from\n                              │                              ▼\n                              │                    ┌──────────────────┐\n                              │                    │ exercises/       │\n                              │                    │   index.js       │\n                              │                    │ (Registry)       │\n                              │                    └──────────────────┘\n                              │\n                              └─── exercise-XX-problem ─────┐\n                              └─── exercise-XX-solution ────┤\n                                                             │\n                                                             ▼\n                                              ┌──────────────────────────┐\n                                              │  Dynamically loads       │\n                                              │  Problem or Solution     │\n                                              │  component from registry │\n                                              └──────────────────────────┘\n```\n\n## 🏗️ Component Hierarchy\n\n```\nApp\n├── NavigationButton (when not on home)\n└── Current View\n    ├── HomePage\n    │   └── ExerciseCard (for each exercise)\n    │       ├── View Problem button\n    │       └── View Solution button\n    │\n    └── Exercise Component (Problem or Solution)\n        └── Interactive React components\n```\n\n## 🎯 Key Design Decisions\n\n### 1. **Centralized Registry Pattern**\n- **File**: `exercises/index.js`\n- **Why**: Single source of truth for all exercises\n- **Benefit**: Add exercises without touching App.js\n\n### 2. **Folder-per-Exercise Structure**\n- **Pattern**: `exercise-XX-topic-name/`\n- **Why**: Self-contained, easy to find and maintain\n- **Benefit**: Clear organization as project scales\n\n### 3. **Component Reusability**\n- **Location**: `components/`\n- **Why**: Shared UI components\n- **Benefit**: Consistent styling and behavior\n\n### 4. **Template-Based Creation**\n- **Location**: `exercises/__template__/`\n- **Why**: Standardized structure\n- **Benefit**: Fast exercise creation, consistent format\n\n### 5. **Dynamic Routing**\n- **Implementation**: String-based view state\n- **Why**: Simple, no external router needed\n- **Benefit**: Lightweight, easy to understand\n\n## 📦 Module Dependencies\n\n```\nApp.js\n  ↓ imports\n  ├── HomePage (from components/)\n  ├── NavigationButton (from components/)\n  └── exercises (from exercises/index.js)\n\nHomePage.js\n  ↓ imports\n  ├── ExerciseCard (from components/)\n  └── exercises (from exercises/index.js)\n\nexercises/index.js\n  ↓ imports\n  ├── exercise-01-state-batching\n  ├── exercise-02-useeffect-dependencies\n  └── ... (more exercises)\n\nEach exercise folder\n  ↓ exports via index.js\n  ├── Problem component\n  └── Solution component\n```\n\n## 🔑 Key Files\n\n| File | Purpose | When to Edit |\n|------|---------|--------------|\n| `exercises/index.js` | Exercise registry | **Every time** you add a new exercise |\n| `exercises/__template__/` | Template files | When creating a new exercise (copy it) |\n| `components/ExerciseCard.js` | Exercise card UI | To change how exercises are displayed |\n| `components/HomePage.js` | Home page layout | To change home page structure |\n| `App.js` | Main routing logic | Rarely (architecture is stable) |\n\n## 🚀 Scaling Strategy\n\n### Adding 10 Exercises\n✅ Current structure handles this perfectly\n- Just add folders and register in index.js\n\n### Adding 50 Exercises\n✅ Current structure still works\n- Consider adding categories in registry\n- Group exercises by difficulty or topic\n\n### Adding 100+ Exercises\n⚠️ Consider enhancements:\n- Add search/filter functionality\n- Implement category pages\n- Add pagination\n- Create difficulty-based navigation\n\n## 🎨 Styling Strategy\n\n**Current**: Inline styles\n- ✅ No CSS conflicts\n- ✅ Component-scoped\n- ✅ Easy to copy/paste\n- ✅ Works without build config\n\n**Future**: If needed\n- CSS Modules for shared styles\n- Styled Components for complex styling\n- Tailwind CSS for utility classes\n\n## 🧪 Testing Strategy\n\n### Current Setup\n- Manual testing in browser\n- Visual verification\n\n### Recommended Additions\n```javascript\n// Example test structure\ndescribe('Exercise 01', () => {\n  it('renders problem correctly', () => {\n    // Test problem component\n  });\n  \n  it('renders solution correctly', () => {\n    // Test solution component\n  });\n});\n```\n\n## 📈 Performance Considerations\n\n### Current Optimizations\n- ✅ No unnecessary re-renders (simple state management)\n- ✅ Lazy loading not needed (small bundle size)\n- ✅ Inline styles (no CSS parsing overhead)\n\n### Future Optimizations (if needed)\n- React.lazy() for code splitting\n- useMemo for expensive calculations\n- Virtual scrolling for large exercise lists\n\n## 🔒 Best Practices\n\n1. **One Exercise = One Folder**: Keep exercises self-contained\n2. **Register Immediately**: Add to registry right after creating\n3. **Follow Naming**: Use `exercise-XX-topic-name` format\n4. **Test Before Commit**: Always run `npm start` to verify\n5. **Document Complex Logic**: Add comments for tricky code\n6. **Keep Templates Updated**: Update `__template__` with improvements\n\n## 🎓 Learning Path\n\nFor new contributors:\n1. Read `QUICK_START.md` (5 min)\n2. Browse existing exercises (10 min)\n3. Copy template and create test exercise (15 min)\n4. Read `STRUCTURE.md` for details (10 min)\n5. Review this architecture doc (5 min)\n\nTotal: ~45 minutes to full productivity\n\n## 🤝 Contributing Guidelines\n\n1. **Before adding an exercise**:\n   - Check if topic already exists\n   - Ensure it's interview-relevant\n   - Verify it teaches one clear concept\n\n2. **When adding an exercise**:\n   - Use the template\n   - Follow naming conventions\n   - Test thoroughly\n   - Add clear explanations\n\n3. **After adding an exercise**:\n   - Verify navigation works\n   - Check for console errors\n   - Test on different screen sizes\n   - Update documentation if needed\n\n---\n\n**Questions?** Check the other documentation files or review existing exercises for examples.\n</yakaai_skills>"}