30 Day React Challenge
2026-06-24
The best way to get better at something is to practice. This is a 30 day React challenge that will have you practice daily. Each day you will create a React component from this list.
Daily practice on using React hooks, state management, context, and Next.js pages will help you get better at React
Daily List
| # | App |
|---|---|
| 1 | Counter — show count and button that increments count View Component |
| 2 | Todo List — add, complete, delete, filter by status, persist to localStorage View Component |
| 3 | Full Auth App — register/login/logout, protected routes, JWT or session handling View Component |
| 4 | Weather App — fetch real weather API, 5-day forecast, location search |
| 5 | Notes App — create, edit, delete, search notes, markdown preview |
| 6 | Expense Tracker — add transactions, category breakdown, running balance |
| 7 | Pomodoro Timer — work/break cycles, session counter, sound alerts |
| 8 | Quiz App — multiple choice, score tracking, results summary screen |
| 9 | Recipe Finder — search by ingredient, save favorites, detail page |
| 10 | Habit Tracker — daily check-ins, streak counter, weekly heatmap |
| 11 | Budget Planner — income vs. expenses, category limits, visual chart |
| 12 | Movie Watchlist — search TMDB API, add to list, watched/unwatched toggle |
| 13 | Markdown Editor — split pane live preview, export to file |
| 14 | Flashcard App — flip animation, self-grade, deck management |
| 15 | Job Application Tracker — status columns (applied/interview/offer), notes per job |
| 16 | Password Generator — length slider, character options, copy to clipboard, strength meter |
| 17 | URL Shortener UI — input URL, display shortened link, copy button, history list |
| 18 | E-commerce Product Page — image gallery, size/color picker, cart sidebar, quantity control |
| 19 | Chat UI — message bubbles, timestamps, typing indicator, mock AI replies |
| 20 | Kanban Board — drag-and-drop cards across columns, add/delete cards |
| 21 | Calendar App — monthly view, add/edit events, color-coded categories |
| 22 | Portfolio Site — hero, projects grid, skills section, contact form |
| 23 | Blog with CMS — markdown files or headless CMS, post list, single post page |
| 24 | Music Player — play/pause/skip, progress bar, album art, playlist queue |
| 25 | Drawing Canvas — freehand draw, color picker, brush size, undo, save as image |
| 26 | Real-time Poll — create poll, vote, live result bar chart |
| 27 | GitHub Profile Viewer — search username, show repos, stars, follower stats via API |
| 28 | Stock / Crypto Dashboard — live price ticker, sparkline charts, watchlist |
| 29 | Multi-step Checkout — address → payment → review → confirmation flow |
| 30 | Social Media Feed — posts with likes/comments, infinite scroll, profile page |
| 31 | Storybook — BONUS component, all shadcn components, theme switcher |