Mastering React by Building Projects

Introduction

• Create 25 React projects from scratch
• Guaranteed to help in frontend/browser coding rounds
• Sanum, experienced React developer, will guide through

List of Projects

1. Accordion

• Single and multi-selection accordion
• Learn state management and conditional rendering

2. Random Color Generator

• Generate random HEX and RGB colors
• Use state to manage colors

3. Star Rating Component

• Create a star rating system
• Hover and click events to change star ratings

4. Image Slider

• Fetch images from API
• Implement slider functionality

5. Load More Data

• Load additional data from API on button click
• Ideal for infinite scroll implementation

6. Dynamic Navigation Menu

• Create nested menus and dynamic rendering
• Recursive rendering for complex data structures

7. QR Code Generator

• Generate QR codes based on input
• Uses a third-party library

8. Light/Dark Mode Switch

• Toggle light and dark themes
• Store theme preference in local storage

9. Scroll Indicator

• Display scroll progress indicator
• Use window scroll events

10. Custom Tabs

• Create tabs with dynamic content
• Manage active tab state

11. Custom Modal Popup

• Create a reusable modal component
• Show/hide modal with state management

12. GitHub Profile Finder

• Search for GitHub profiles via API
• Display user profile information dynamically

13. Search Autocomplete

• Implement autocomplete search from API data
• Handle filtering and display suggestions

14. Tic-Tac-Toe Game

• Create a playable Tic-Tac-Toe game
• Manage game state and determine win conditions

15. Feature Flags

• Use feature flags for dynamic UI updates
• Toggle features without changing code

16. Custom Hooks

• Create custom hooks for various functionalities
  • useFetch: Fetch data from API
  • useOutsideClick: Handle outside clicks to hide an element
  • useWindowSize: Get window dimensions and update on resize

17. Scroll to Top/Bottom

• Implement buttons to scroll to top or bottom
• Scroll to specific sections of the page

18. Weather Application

• Search and display weather data from API
• Display detailed weather information

19. Food Recipe Application

• Fetch and display food recipes
• Add recipes to favorites and view detailed info

20. Shopping Cart with Redux Toolkit

• Implement add/remove items from cart
• Calculate total price and manage cart state

21. Expense Tracker

• Track and display expenses and income
• Add new expenses/income and display in a chart

22. Blog Application (MON stack)

• Create, update, delete, and list blog posts
• Full-stack application with MongoDB, Express, React, and Node

Conclusion

• Each project is designed to teach React concepts
• Completing these projects is beneficial for frontend development interviews

Project Breakdown

• Note: Each project comes with detailed steps and instructions on implementing the required features and functionalities