🚀 React Projects Portfolio

This repository contains a collection of my React.js projects, built to strengthen my frontend development skills and showcase my work.

The apps are organized into three categories:

---

📦 Mini Projects (Logic-Focused)

Project	Description
01 - Counter App	Basic counter using useState, with increment, decrement, and reset functionality
02 - Theme Toggle App	Toggle between light and dark mode using useState and conditional styling
03 - Simple Form Handler	Basic contact form with state handling, reset functionality, and live data preview
04 - Show/Hide Password	Toggle password visibility using useState and conditional rendering
05 - Live Character Counter	Tracks character count in a textarea with real-time updates
06 - Basic Calculator	Performs basic arithmetic operations and handles input validation
07 - Todo App with LocalStorage	Persistent todo list using useState, useEffect, and localStorage
08 - Quote Generator	Displays random quotes from a local array using useState
09 - Weather App	Live weather info using wttr.in API with loading state and error handling
10 - Image Gallery with Filter	Dynamic image gallery with category-based filtering using local JSON and useState
11 - FAQ Accordion	Toggle questions and answers open/close with accordion-style interaction using useState
12 - Stopwatch Timer	Start, stop, and reset a timer with MM:SS format and interval cleanup using React hooks
13 - Notes App with CRUD	Create, edit, and delete notes with persistent localStorage and responsive UI using useState and useEffect
14 - Expense Tracker	Add income and expenses, calculate total balance, and persist data using localStorage, useState, and useEffect
15 - Multi-Step Form	Step-based form to collect personal and contact info with validation and email regex using useState

---

⚙️ Intermediate Projects

Project	Description
01 - Movie Search App	Search movies using OMDB API with input state, loading/error states, and result display using fetch and useState
02 - Blog Post Editor	Create, edit, and delete blog posts using useState and localStorage with clean form handling and component structure

---

🌟 Major Projects (Scalable)

Project	Description
01 - React Dashboard API	Multi-page dashboard using React Router and JSONPlaceholder APIs. Includes routes for posts, users, comments, todos, and logout with full API integration and clean component structure.

---

🌐 Live Demo Links

#	Project Name	Description	Live Demo
1	Counter App	Increment, decrement, and reset counter using useState	View
2	Theme Toggle	Light/Dark mode toggle using useState and styling	View
3	Simple Form Handler	Contact form with input handling and live preview	View
4	Show/Hide Password	Password visibility toggle using useState	View
5	Character Counter	Live character count display while typing	View
6	Basic Calculator	Simple calculator with arithmetic functions	View
7	Todo App with localStorage	Add, delete, complete todos with persistent storage	View
8	Quote Generator	Display random quotes from local data array	View
9	Weather App (API)	Fetch and show weather info using wttr.in API	View
10	Image Gallery Filter	Filterable image grid by category	View
11	FAQ Accordion	Expand/collapse Q&A accordion interaction	View
12	Stopwatch & Timer	Start, stop, and reset timer with React hooks	View
13	Notes App (CRUD)	Create, edit, delete notes with localStorage	View
14	Expense Tracker	Track income/expenses and calculate balance	View
15	Multi-Step Form	Multi-step input form with validation	View
16	Movie Search App (OMDB)	Search movies using OMDB API	View
17	Blog Post Editor	Blog post CRUD editor with persistent state	View
18	React Dashboard (API)	Multi-page dashboard fetching Posts, Users, etc.	View

---

🧪 Demo Login Credentials (for Dashboard Project)

Project 18: React Dashboard (API)
Use the following credentials to log in:

• Username: admin
• Password: 1234

---

🧠 Tech Stack

• React.js
• JavaScript (ES6+)
• React Hooks (useState, useEffect)
• React Router
• API Integration (JSONPlaceholder, OMDB)
• Git & GitHub

---

🛠️ How to Run Any Project

cd project-folder-name
npm install
npm start

Example:

cd mini-projects/15-multistep-form

---

🎯 Goal

This portfolio is part of my React learning journey to become a professional frontend developer. I am building it project-by-project to demonstrate my hands-on experience in React.