A curated set of hands-on React mini projects to master core concepts — from useState and useEffect to Context API, custom hooks, and more. Ideal for learning, revising, and interview preparation.
| Project | Description | Key Concepts |
|---|---|---|
| 🧮 useState Counter App | Basic counter with increment, decrement, and reset functionality. | useState, Event Handling |
| ⏱️ useEffect Timer App | Timer using intervals with cleanup inside useEffect. |
useEffect, Cleanup Functions |
| 🎬 Movie Search (Live Filter) | Real-time search through a movie list. | Controlled Input, Filtering |
| 📝 Form Handling App | Controlled form with multiple input fields and submit logic. | Forms, State Updates |
| 🛒 Simple E-Commerce UI | Product grid fetched from an API with reusable cards. | Props, API Calls, useEffect |
| 🔍 GitHub Profile Finder (Debounced) | Debounced GitHub user search with loading and error handling. | Custom Hook, Debounce, API Integration |
| 🛍️ Cart App (Context API + useReducer) | Add/remove items to a cart using global state via Context + Reducer. | Context API, useReducer, Component Communication |
| 🗺️ GeoTracker (Live Location Map) | Shows your current location on an interactive map using Leaflet. | Geolocation API, Custom Hook, Leaflet.js |
A complete MERN stack CRUD task manager featuring:
- Form validation
- Toast notifications
- REST API backend at
api.impritam.com
Tech Stack: MongoDB, Express, React, Node.js, Tailwind CSS, Toastify
git clone https://github.com/impritam/react-mini-projects.git
cd react-mini-projects
npm install
npm run dev