Build the complete "Favorites" feature from scratch in 90 minutes:
| Requirement | Skills Tested |
|---|---|
| Star button on each gallery image | Components, props, events |
| Favorites filter in gallery | State, filtering, derived data |
| Persist favorites in localStorage | useLocalStorage hook |
| Animated star toggle | CSS transitions, Tailwind |
| Error boundary around feature | ErrorBoundary, resilience |
"Which data structure for each scenario and why?"
| Scenario | Answer | Why |
|---|---|---|
| Undo/redo system | Stack | LIFO — last action undone first |
| Layer management + reorder | Linked List | O(1) insert/remove at known position |
| Recent colors lookup | Hash Map | O(1) key→value lookup |
| Batch processing queue | Queue | FIFO — first in, first out |
| Component render tree | Tree | Hierarchical parent-child structure |
Review a peer's React component. Evaluate:
| Criterion | Questions to Ask |
|---|---|
| State management | Is state in the right place? Lifted correctly? |
| Performance | Unnecessary re-renders? Missing memo/useMemo? |
| Error handling | What happens if data is null/undefined? |
| Accessibility | Labels? Keyboard navigation? ARIA attributes? |
Whiteboard PixelCraft's current architecture:
| Layer | What to Present |
|---|---|
| Component tree | App → Layout → Pages → Panels → Components |
| State flow | useReducer → Context → dispatch → re-render |
| Context providers | ThemeContext, EditorContext, AuthContext |
| Data structures | Stack (undo), LinkedList (layers), Map (cache) |
| Routing | /gallery, /editor/:id, /settings |
Welcome to Mid Developer!
You now get backend access. Next: servers, databases, APIs — the other half of web development.
Level 02 complete.
You've mastered the frontend. Now build everything else.