React Practice Projects ⚛️

This repository contains a collection of interactive React mini-projects built to master core concepts like useState, useEffect, API handling, and recursive UI components.

📂 Projects Included

I have implemented the 6 React Frontend projects, each focusing on specific UI/UX patterns:

| # | Project Name | Description | Key Concepts |

| 1 | Accordion | A collapsible content viewer supporting single and multi-selection modes. | State Management, Conditional Rendering |

| 2 | Random Color Generator | Generates random HEX and RGB colors with a background preview. | Math.random, String Manipulation, Inline Styles |

| 3 | Star Rating | A 5-star rating component with hover and click interactions. | onMouseEnter, onMouseLeave, Array Mapping |

| 4 | Image Slider | A functional image carousel with next/prev controls and dot indicators. | API Fetching, Index Tracking, CSS Transitions |

| 5 | Load More Data | Fetches products from an API with a "Load More" button to append data. | Pagination Logic, API Integration, useEffect |

| 6 | Tree View | A recursive navigation menu (file explorer style) for nested data. | Recursion, Components calling themselves |

🛠️ Tech Stack

• Framework: React.js
• Build Tool: Vite
• Styling: CSS
• Icons: React Icons (for Star Rating, etc.)

🚀 How to Run Locally

If you want to check out the code and run it on your machine:

1. Clone the repository

   git clone [https://github.com/betheashvin/react-projects.git](https://github.com/betheashvin/react-projects.git)

2. Navigate to the project folder

   cd react-projects

3. Install dependencies

   npm install

4. Start the development server

   npm run dev

🌐 Deployment

• You can view the live version here: [https://react-projects-betheashvins-projects.vercel.app/]

📚 Acknowledgments

• Tutorial by freeCodeCamp.org (Instructor: Sangam Mukherjee).
• Built for educational purposes to improve React proficiency.