🚀 100+ React JS Projects for Beginners to Intermediate Developers

Welcome to the 100+ React JS Projects repository — your ultimate resource for mastering React JS through hands-on, real-world projects.

This carefully curated collection helps you learn and practice frontend development using React.js, JSX, CSS, and optional tools like Tailwind CSS, Framer Motion, and Lucide Icons. Whether you're just starting out or leveling up, this is a perfect place to build, learn, and grow.

---

📚 About This Repository

Inside this repo, you’ll find:

✅ 100+ unique React projects, organized by difficulty
✅ Clean, well-structured code in every project
✅ A focus on modern React practices (Hooks, Functional Components)
✅ Real-world use cases with reusable components and logic

Projects cover a wide range of use cases and concepts, including:

• 🧠 State & Props
• 🔁 Lifecycle & useEffect
• 💡 Conditional Rendering
• 🧰 Custom Hooks
• 🎨 UI/UX Enhancements with Tailwind CSS
• ⚡ Animations with Framer Motion
• 🔗 API Fetching with fetch or axios
• 📦 Component Reusability & File Structure Best Practices
• 🗂️ LocalStorage, JSON, SVG, Theme Toggles & More

Each project lives in its own folder with README.md, source files, and full working UI.

---

💡 Why Build React Projects?

Learning React by building projects is the fastest way to get better. Here's why:

• ✅ Strengthens your portfolio for jobs
• ✅ Builds real-world problem-solving skills
• ✅ Makes concepts stick through repetition and variety
• ✅ Boosts confidence by working through UI logic, state handling & more

---

🛠️ How to Use This Repository

Follow these steps to get started:

Step 1: Clone the repository

git clone https://github.com/Vaibhav-kesarwani/100-reactjs-projects.git

Step 2: Navigate into the directory

cd 100-reactjs-projects

Step 3: Open any project folder

cd 100-reactjs-projects/000_Hello-World/

Step 4: Install Dependencies

npm install

Step 5: Start the Development Server

npm run dev

• Open http://localhost:5173 in your browser to view the app.

You can also explore and deploy the live version from the [official website]().

---

📝 Project Preview

#	Project Name	View Code
01	BMI Calculator	GitHub
02	Bank KYC form	GitHub
03	Blob Generator	GitHub
04	Blood Donation	GitHub
05	Christmas Diorama	GitHub
06	Color Pallete Generator	GitHub
...	...	View All Projects »

---

🧰 Tech Stack

Each project in this repository is crafted using modern, lightweight tools and libraries to help you build real-world, production-grade React applications. Here's what powers them:

• ⚛️ React.js (18+) – The heart of every project. We use functional components, hooks (useState, useEffect, etc.), and modern patterns to manage state and UI logic.

• 🛠️ Vite / CRA (Create React App) – Most projects are scaffolded using Vite for lightning-fast development and hot module replacement. Some may use CRA as well.

• 🎨 Tailwind CSS (optional) – Utility-first CSS framework used in many projects for rapid, responsive, and consistent UI styling.

• 🎞 Framer Motion (in UI/UX projects) – For delightful animations and smooth UI transitions without the complexity of traditional CSS keyframes.

• 🧩 Lucide React / Heroicons – Modern, open-source SVG icon libraries used to enhance UI with accessible and scalable icons.

• 🌐 Fetch API / Axios – For making HTTP requests and handling API integration in real-world applications like weather apps, quote generators, etc.

• 💾 LocalStorage / SessionStorage – To persist data across sessions, for apps like to-do lists, settings managers, and form savers.

• 🧠 Custom Hooks – Encapsulating reusable logic like theme toggles, fetch utilities, debounced inputs, clipboard handling, etc.

• 📦 Modular Folder Structure – Each project follows a clean file structure:

• 🧪 ESLint + Prettier (recommended) – For writing consistent, error-free code with enforced code standards.

• 🔍 DevTools & Debugging – We encourage use of React DevTools, browser storage inspectors, and custom logs to better understand app behavior.

---

🔧 Bonus: Many projects are minimal and framework-free to keep the learning curve low, but you'll find several enhanced versions using popular libraries as optional upgrades.

---

🤝 Contributing

Have a cool idea or want to improve an existing project? Contributions are welcome! Here's how to get involved:

Step 1: Fork the repository

Step 2: Create a feature branch

git checkout -b feature/your-feature-name

Step 3: Commit your changes

git commit -m "Add new feature or fix"

Step 4: Push to your branch

git push origin feature/your-feature-name

Step 5: Open a Pull Request

Please follow the Code of Conduct Guidelines for a smooth review process.

---

📄 License

This project is licensed under the MIT License.
Feel free to use, modify, and share it. See the LICENSE file for details.

---

📢 Contact

If you have any suggestions, questions, or feedback, feel free to reach out:

• 📬 Email: vaibhavkesarwani100@gmail.com
• 💼 GitHub: @Vaibhav-kesarwani
• 🔥 Portfolio: vaibhav kesarwani

---

🌟 Support & Share

If you find this repository helpful:

• ⭐ Star it on GitHub
• 🍴 Fork it to build your own version
• 📣 Share it with your developer friends and communities!

---

🚀 Start Building Today!

Level up your skills by building—because the best way to learn JavaScript is by getting your hands dirty. Dive into the code, experiment freely, and create something awesome along the way!