React Implementation

Day 1: State Management Fundamentals

Question 1: Dynamic Form Builder

Topic Focus: useState with complex state updates Scenario: Build a survey form where users can dynamically add/remove questions. Each question should have a text input and a type selector (text/number/email). Display a live preview of all questions below the form. Hidden Test: Managing arrays in state, proper immutability patterns

Question 2: Shopping Cart Counter

Topic Focus: useState with derived state Scenario: Create a product card with increment/decrement buttons. Show the quantity, unit price ($29.99), and calculated total. Add a "bulk discount" that applies 10% off when quantity >= 5. The discount banner should appear/disappear based on quantity. Hidden Test: Avoiding unnecessary state, computing values on render

Day 2: Effect Hook Mastery

Question 1: Auto-save Notes

Topic Focus: useEffect cleanup and debouncing Scenario: Build a textarea where users write notes. Show a "Saving..." indicator that appears while typing and changes to "Saved ✓" 2 seconds after the user stops typing. Log save events to console. Hidden Test: Cleanup function to cancel pending saves, dependency array management

Question 2: Window Resize Tracker

Topic Focus: useEffect with event listeners Scenario: Display the current window dimensions (width x height) on screen. Show different messages: "Mobile" (<768px), "Tablet" (768-1024px), "Desktop" (>1024px). Update in real-time as window resizes. Hidden Test: Proper event listener cleanup to prevent memory leaks

Day 3: Controlled Components & Forms

Question 1: Password Strength Validator

Topic Focus: Controlled inputs with validation Scenario: Create a password input that shows real-time strength indicators: length (min 8), has uppercase, has number, has special character. Each criterion shows ✓ or ✗. The input border should be red/yellow/green based on criteria met (0-1/2-3/4). Hidden Test: Synchronizing multiple state derivations from single input

Question 2: Multi-step Registration

Topic Focus: Form state across components Scenario: Build a 3-step form (Personal Info → Account Details → Preferences). Show progress indicator. Each step has "Next/Back" buttons. Display all collected data on final step before submit. Form data should persist when going back/forward. Hidden Test: Lifting state up, preventing data loss during navigation