This repository contains a collection of interactive React mini-projects built to master core concepts like useState, useEffect, API handling, and recursive UI components.
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 |
- Framework: React.js
- Build Tool: Vite
- Styling: CSS
- Icons: React Icons (for Star Rating, etc.)
If you want to check out the code and run it on your machine:
-
Clone the repository
git clone [https://github.com/betheashvin/react-projects.git](https://github.com/betheashvin/react-projects.git)
-
Navigate to the project folder
cd react-projects -
Install dependencies
npm install
-
Start the development server
npm run dev
- You can view the live version here: [https://react-projects-betheashvins-projects.vercel.app/]
- Tutorial by freeCodeCamp.org (Instructor: Sangam Mukherjee).
- Built for educational purposes to improve React proficiency.