Welcome to my React Learning Journey! This repository, react-journey, documents my 20-day structured challenge where I built different projects, learned core concepts, and documented everything along the way.
This phase focused on building a strong React foundation through project-based learning.
- To build a strong foundation in React.js.
- To create a variety of projects, ranging from simple components to more complex applications.
- To practice project-based learning by taking inspiration from various resources.
- To maintain consistency and accountability by sharing my progress daily.
| Day | Project | What I Learned | Link / Status |
|---|---|---|---|
| 01 | Accordion Component | State management, conditional rendering, array methods, props drilling | Day01-Accordion |
| 02 | Random Color Generator | Dynamic styles, RGB/HEX conversion, Math.random(), padStart(), event handlers | Day02-Random-colorgen |
| 03 | Star Rating & Image Slider | Hover effects, array manipulation, useEffect, axios, API fetching, async/await | Day03-Star-Rating&Image-Slider |
| 04 | Load More Products | Data pagination, functional updates, derived state, button disable logic | Day04-Load-more-items |
| 05 | TreeView Menu | Recursive components, nested data structures, animated transitions, react-icons | Day05-TreeView |
| 06 | QR Code Generator | Third-party libraries (react-qr-code), controlled inputs, conditional rendering | Day06-QR-Generator |
| 07 | Theme Switcher & Scroll Progress | Custom hooks (useLocalStorage), localStorage API, window scroll events, dark mode with Tailwind | Day07-Theme-Switch |
| 08 | Custom Tabs Component | Component composition, prop callbacks (onChange), array mapping, dynamic content rendering | Day08-CustomTabs |
| 09 | Modal Popup | Fixed positioning, overlay backgrounds, conditional rendering, prop callbacks for closing | Day09-Modal-Popup |
| 10 | GitHub Profile Finder | REST API integration with GitHub API, axios, async/await, error handling, loading states | Day10-Github-Profiles |
| 11 | Search Autocomplete | Array filtering, string methods (indexOf), conditional dropdown rendering, click event handling | Day11-Search-Autocomplete |
| 12 | Feature Flag Implementation | Context API, useContext, conditional component rendering | Day12-Feature-Flag |
| 13 | Custom Hooks | Custom hooks (useFetch, useOnClickOutside), useEffect, useRef, event listeners | Day13-Custom-Hooks |
| 14 | Scroll to Top/Bottom & Section | scrollTo, scrollIntoView, useRef for DOM access, smooth scrolling behavior | Day14-ScrollTopBottom |
| 15 | Weather App | OpenWeather API, debouncing, coordinate-based queries, async/await, autocomplete dropdown | Day15-WeatherApp |
| 16/17 | Food Recipe App | Context API (createContext, useContext, Provider), React Router nested routes, useNavigate, debouncing with useEffect cleanup, conditional rendering patterns (early returns), Forkify API integration | Day16/17-Food-Recipe |
| 18 | Shopping Cart with Redux | Redux Toolkit (createSlice, configureStore), useSelector for selecting specific state slices, useDispatch actions, Provider setup | Day18-ShoppingCartRedux |
| 19 | React Theory & Hooks Deep Dive | React rendering mechanism, Virtual DOM, reconciliation, useState, useEffect, useRef, useMemo, useCallback, custom hooks, component lifecycle | Day19-Theory |
| 20 | Performance Optimization Hooks | useMemo for expensive computations, useCallback for function memoization, React.memo for component optimization, reference equality with non-primitive props | Day20-SomeMoreHooks |
✅ Phase 1 Complete! — 20 days of structured React learning finished.
Day 20 marks the completion of this structured React challenge.
I'm now shifting focus to TypeScript and also be diving deeper into advanced Tailwind CSS, Framer Motion, and building full-stack projects that combine everything. React remains an integral part of my stack and I'll continue improving through real projects, just not in this daily format.
I'll be posting daily updates about what I learned and the projects I built.
- Live Demo: react-journy.vercel.app
- Twitter: @ITx_prash for daily updates.
- GitHub: react-journey
This project is open source and available under the MIT License.
Feel free to star ⭐ this repo if you want to follow along!