Skip to content

Commit df7dc6c

Browse files
sudheerjsudheerj
authored
Merge pull request #375 from codomposer/feat/coding_exercise_template
add coding exercise template
2 parents 03ba28d + ff7ef78 commit df7dc6c

File tree

18 files changed

+4703
-1782
lines changed

18 files changed

+4703
-1782
lines changed

‎coding-exercise/ARCHITECTURE.md‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
# Architecture Overview
2+
3+
## 📊 Visual Structure
4+
5+
```
6+
coding-exercise/
7+
│
8+
├── 📄 STRUCTURE.md # Detailed documentation
9+
├── 📄 QUICK_START.md # Quick guide for adding exercises
10+
├── 📄 ARCHITECTURE.md # This file - architecture overview
11+
│
12+
└── src/
13+
├── 📱 App.js # Main app with routing
14+
│ └── Uses: HomePage, NavigationButton, exercises registry
15+
│
16+
├── 🧩 components/ # Reusable UI components
17+
│ ├── HomePage.js # Landing page
18+
│ ├── ExerciseCard.js # Exercise card component
19+
│ └── NavigationButton.js # Back button
20+
│
21+
└── 📚 exercises/ # All exercises
22+
├── index.js # ⭐ EXERCISE REGISTRY (add new exercises here)
23+
│
24+
├── __template__/ # Template for new exercises
25+
│ ├── Problem.js
26+
│ ├── Solution.js
27+
│ ├── index.js
28+
│ └── README.md
29+
│
30+
├── exercise-01-state-batching/
31+
│ ├── Problem.js
32+
│ ├── Solution.js
33+
│ └── index.js
34+
│
35+
└── exercise-02-useeffect-dependencies/
36+
├── Problem.js
37+
├── Solution.js
38+
└── index.js
39+
```
40+
41+
## 🔄 Data Flow
42+
43+
```
44+
┌─────────────────────────────────────────────────────────────┐
45+
│ App.js │
46+
│ - Manages currentView state │
47+
│ - Routes between home and exercise views │
48+
└─────────────────────────────────────────────────────────────┘
49+
│
50+
├─── home ────────────────────┐
51+
│ │
52+
│ ▼
53+
│ ┌──────────────────┐
54+
│ │ HomePage.js │
55+
│ │ - Lists all │
56+
│ │ exercises │
57+
│ │ - Uses │
58+
│ │ ExerciseCard │
59+
│ └──────────────────┘
60+
│ │
61+
│ │ reads from
62+
│ ▼
63+
│ ┌──────────────────┐
64+
│ │ exercises/ │
65+
│ │ index.js │
66+
│ │ (Registry) │
67+
│ └──────────────────┘
68+
│
69+
└─── exercise-XX-problem ─────┐
70+
└─── exercise-XX-solution ────┤
71+
│
72+
▼
73+
┌──────────────────────────┐
74+
│ Dynamically loads │
75+
│ Problem or Solution │
76+
│ component from registry │
77+
└──────────────────────────┘
78+
```
79+
80+
## 🏗️ Component Hierarchy
81+
82+
```
83+
App
84+
├── NavigationButton (when not on home)
85+
└── Current View
86+
├── HomePage
87+
│ └── ExerciseCard (for each exercise)
88+
│ ├── View Problem button
89+
│ └── View Solution button
90+
│
91+
└── Exercise Component (Problem or Solution)
92+
└── Interactive React components
93+
```
94+
95+
## 🎯 Key Design Decisions
96+
97+
### 1. **Centralized Registry Pattern**
98+
- **File**: `exercises/index.js`
99+
- **Why**: Single source of truth for all exercises
100+
- **Benefit**: Add exercises without touching App.js
101+
102+
### 2. **Folder-per-Exercise Structure**
103+
- **Pattern**: `exercise-XX-topic-name/`
104+
- **Why**: Self-contained, easy to find and maintain
105+
- **Benefit**: Clear organization as project scales
106+
107+
### 3. **Component Reusability**
108+
- **Location**: `components/`
109+
- **Why**: Shared UI components
110+
- **Benefit**: Consistent styling and behavior
111+
112+
### 4. **Template-Based Creation**
113+
- **Location**: `exercises/__template__/`
114+
- **Why**: Standardized structure
115+
- **Benefit**: Fast exercise creation, consistent format
116+
117+
### 5. **Dynamic Routing**
118+
- **Implementation**: String-based view state
119+
- **Why**: Simple, no external router needed
120+
- **Benefit**: Lightweight, easy to understand
121+
122+
## 📦 Module Dependencies
123+
124+
```
125+
App.js
126+
↓ imports
127+
├── HomePage (from components/)
128+
├── NavigationButton (from components/)
129+
└── exercises (from exercises/index.js)
130+
131+
HomePage.js
132+
↓ imports
133+
├── ExerciseCard (from components/)
134+
└── exercises (from exercises/index.js)
135+
136+
exercises/index.js
137+
↓ imports
138+
├── exercise-01-state-batching
139+
├── exercise-02-useeffect-dependencies
140+
└── ... (more exercises)
141+
142+
Each exercise folder
143+
↓ exports via index.js
144+
├── Problem component
145+
└── Solution component
146+
```
147+
148+
## 🔑 Key Files
149+
150+
| File | Purpose | When to Edit |
151+
|------|---------|--------------|
152+
| `exercises/index.js` | Exercise registry | **Every time** you add a new exercise |
153+
| `exercises/__template__/` | Template files | When creating a new exercise (copy it) |
154+
| `components/ExerciseCard.js` | Exercise card UI | To change how exercises are displayed |
155+
| `components/HomePage.js` | Home page layout | To change home page structure |
156+
| `App.js` | Main routing logic | Rarely (architecture is stable) |
157+
158+
## 🚀 Scaling Strategy
159+
160+
### Adding 10 Exercises
161+
✅ Current structure handles this perfectly
162+
- Just add folders and register in index.js
163+
164+
### Adding 50 Exercises
165+
✅ Current structure still works
166+
- Consider adding categories in registry
167+
- Group exercises by difficulty or topic
168+
169+
### Adding 100+ Exercises
170+
⚠️ Consider enhancements:
171+
- Add search/filter functionality
172+
- Implement category pages
173+
- Add pagination
174+
- Create difficulty-based navigation
175+
176+
## 🎨 Styling Strategy
177+
178+
**Current**: Inline styles
179+
- ✅ No CSS conflicts
180+
- ✅ Component-scoped
181+
- ✅ Easy to copy/paste
182+
- ✅ Works without build config
183+
184+
**Future**: If needed
185+
- CSS Modules for shared styles
186+
- Styled Components for complex styling
187+
- Tailwind CSS for utility classes
188+
189+
## 🧪 Testing Strategy
190+
191+
### Current Setup
192+
- Manual testing in browser
193+
- Visual verification
194+
195+
### Recommended Additions
196+
```javascript
197+
// Example test structure
198+
describe('Exercise 01', () => {
199+
it('renders problem correctly', () => {
200+
// Test problem component
201+
});
202+
203+
it('renders solution correctly', () => {
204+
// Test solution component
205+
});
206+
});
207+
```
208+
209+
## 📈 Performance Considerations
210+
211+
### Current Optimizations
212+
- ✅ No unnecessary re-renders (simple state management)
213+
- ✅ Lazy loading not needed (small bundle size)
214+
- ✅ Inline styles (no CSS parsing overhead)
215+
216+
### Future Optimizations (if needed)
217+
- React.lazy() for code splitting
218+
- useMemo for expensive calculations
219+
- Virtual scrolling for large exercise lists
220+
221+
## 🔒 Best Practices
222+
223+
1. **One Exercise = One Folder**: Keep exercises self-contained
224+
2. **Register Immediately**: Add to registry right after creating
225+
3. **Follow Naming**: Use `exercise-XX-topic-name` format
226+
4. **Test Before Commit**: Always run `npm start` to verify
227+
5. **Document Complex Logic**: Add comments for tricky code
228+
6. **Keep Templates Updated**: Update `__template__` with improvements
229+
230+
## 🎓 Learning Path
231+
232+
For new contributors:
233+
1. Read `QUICK_START.md` (5 min)
234+
2. Browse existing exercises (10 min)
235+
3. Copy template and create test exercise (15 min)
236+
4. Read `STRUCTURE.md` for details (10 min)
237+
5. Review this architecture doc (5 min)
238+
239+
Total: ~45 minutes to full productivity
240+
241+
## 🤝 Contributing Guidelines
242+
243+
1. **Before adding an exercise**:
244+
- Check if topic already exists
245+
- Ensure it's interview-relevant
246+
- Verify it teaches one clear concept
247+
248+
2. **When adding an exercise**:
249+
- Use the template
250+
- Follow naming conventions
251+
- Test thoroughly
252+
- Add clear explanations
253+
254+
3. **After adding an exercise**:
255+
- Verify navigation works
256+
- Check for console errors
257+
- Test on different screen sizes
258+
- Update documentation if needed
259+
260+
---
261+
262+
**Questions?** Check the other documentation files or review existing exercises for examples.

0 commit comments

Comments
 (0)