React Practice Katas

Kata 1: Project Setup & "Hello, Kata!"

Kata 2: Reusable Button Component

Prerequisite: Base project from Kata 1

Kata 3: Simple Counter with State

Prerequisite: Button kata

Kata 4: Data Fetch & List Display

Prerequisite: Counter kata

Kata 5: Search & Filter

Prerequisite: List Display kata

Kata 6: Modal Dialog via Portal

Prerequisite: Search kata

Kata 7: Form with Validation

Prerequisite: Modal kata (for showing form in modal)

Kata 8: Dynamic Routing & Data Loading

Prerequisite: Form kata or empty page

Kata 9: Theme Switcher with Context

Prerequisite: Any kata up to here

Kata 10: Complex State with useReducer

Prerequisite: Counter or simple state kata

Kata 11: Performance Optimization

Prerequisite: Any data-heavy kata (e.g. list or todo)

Kata 12: Unit & Integration Testing

Prerequisite: Any component library kata

Kata 13: Mini Project: Persistent Shopping Cart

Prerequisite: Context, useReducer, and form katas

Kata 14: Avatar Uploader

Prerequisite: Form kata

Kata 15: Paginated List

Prerequisite: Data Fetch & List Display kata

Kata 16: Debounced Search

Prerequisite: Search & Filter kata

Kata 17: Infinite Scroll

Prerequisite: Paginated List kata

Kata 18: Sortable Table

Prerequisite: Data Fetch & List Display kata

Kata 19: Drag-and-Drop List

Prerequisite: List Display kata

Kata 20: Animated Accordion

Prerequisite: Modal Dialog kata

Kata 21: Custom Hook: useLocalStorage

Prerequisite: Theme Switcher kata

Kata 22: Image Gallery Lightbox

Prerequisite: Modal Dialog kata

Kata 23: SVG Icon Library

Prerequisite: Button Component kata

Kata 24: Markdown Renderer

Prerequisite: Dynamic Routing kata

Kata 25: WebSocket Chat

Prerequisite: Form with Validation kata

Kata 26: Accessibility Audit Fixes

Prerequisite: Any UI component kata

Kata 27: Multi-Step Form Wizard

Prerequisite: Form with Validation kata

Kata 28: Role-Based Protected Routes

Prerequisite: Theme Switcher with Context kata

Kata 29: Server-Side Rendering with Data Caching

Prerequisite: Dynamic Routing & Data Loading kata

Kata 30: GraphQL Client Integration

Prerequisite: Data Fetch & List Display kata

Kata 31: Internationalization (i18n)

Prerequisite: Theme Switcher with Context kata

Kata 32: SVG Charts with Recharts

Prerequisite: Data Fetch & List Display kata

Kata 33: Drag-and-Drop File Uploader

Prerequisite: Avatar Uploader kata

Kata 34: Service Worker & Offline Support

Prerequisite: Dynamic Routing & Data Loading kata

Kata 35: Real-Time Collaborative Editing

Prerequisite: WebSocket Chat kata

Kata 36: Dynamic Form Generator

Prerequisite: Form with Validation kata

Kata 37: Custom ESLint/Prettier Plugin Setup

Prerequisite: Project Setup kata

Kata 38: Analytics & A/B Testing

Prerequisite: Theme Switcher with Context kata

Kata 39: End-to-End Testing with Playwright

Prerequisite: Unit & Integration Testing kata