Master React by Building 25 Projects

Course Overview

• Create 25 React projects from scratch.
• Projects focused on interview preparation for frontend roles.
• Each project associated with specific React concepts.

Project List

1. Accordion

   • Single selection and multi-selection functionality.

2. Random Color Generator

   • Generate random HEX and RGB colors.

3. Star Rating

   • Implementation of star rating system.

4. Image Slider

   • Fetch images from an API and implement slider functionality.

5. Load More Data

   • Load additional data from API on button click.

6. Nested Reviews or Dynamic Menus

   • Render nested reviews or dynamic navigation.

7. QR Code Generator

   • Generate QR codes based on user input.

8. Light and Dark Mode

   • Toggle between theme modes and save to local storage.

9. Scroll Indicator

   • Show user scrolling progress on the page.

10. Custom Tabs

    • Create reusable tab components.

11. Custom Modal Popup

    • Implement modal functionality.

12. GitHub Profile Finder

    • Search and fetch user profiles from GitHub API.

13. Search Autocomplete

    • Implement autocomplete functionality based on user input.

14. Tic Tac Toe Game

    • Build a simple game with X and O.

15. Feature Flags

    • Implementation of feature toggles using an API response.

16. Custom Hooks

    • Create and implement custom hooks:
      • useFetch
      • useClickOutside
      • useWindowResize

17. Weather Application

    • Search and display weather info based on city.

18. Food Recipe Application

    • Search for recipes and view details.

19. Shopping Cart Application

    • Add to cart functionality using Redux toolkit.

20. Basic Blog Application

    • Create a CRUD application with MongoDB and Express.

Key Concepts

• Each project focuses on different concepts in React.
• Emphasis on building reusable components.
• Understanding how to interact with APIs and manage state effectively.
• Usage of libraries like Axios, React Router, Tailwind CSS, and Chakra UI.

Next Steps

• Begin with the first project: Create an Accordion component.
• Follow along with coding examples and explanations.
• Complete all projects for a comprehensive understanding of React.