React_Projects

🚀 React Hooks Mastery Pack ​A collection of 8 interactive React apps built to master core hooks. ​📁 Separate Folders: Every app is organized in folder structure. ​☁️ Live Weather App: Fetches and displays real-time API weather data. ​🍳 Food Recipe App: Features dynamic search and recipe filtering. ​⚡ Performance: Modern UI built with clean code.

---

⚛️ React_Projects

🚀 React Hooks Mastery Pack — A collection of interactive React applications built to master core hooks, data fetching, and dynamic user interfaces. Every app is organized neatly in its own folder under the Projects/ directory.

---

🔗 Live Deployments

• 🌐 Weather App (Live): mh56-weather-app.vercel.app
• 🌐 Food Recipe App (Live): mh56-food-recipe-app.vercel.app
• 🔗 Source Code: github.com/MehmoodCoder

---

🚀 Core Concepts Covered

• JSX & Functional Components: Building modular, reusable, and responsive UI components.
• State Management (useState): Handling dynamic local states, loading phases, and form inputs.
• Side Effects (useEffect): Fetching asynchronous data from live third-party REST APIs.
• DOM Refs (useRef): Accessing DOM nodes and keeping persistent mutable values across renders.
• Dynamic CSS & Styling: Standard custom CSS styling alongside utility-first layouts.
• Conditional Rendering & Lists: Handling loading states, errors, and rendering arrays dynamically with unique key elements.

---

💻 Projects Included

🎨 Random Color Generator

Folder: Color_Generator/

An interactive app that dynamically switches full-page background colors and displays modern hex/rgb color values.

• Features: Random HEX color generator, random RGB color generator
• Concepts: useState, dynamic inline styles, math utilities

---

🍳 Food Recipe App

Folder: Food_Recipe_App/

A full-featured food application built with interactive searching, sorting, and dynamic recipe layout structures.

• Features: Real-time recipe searching, dynamic card filtering, responsive list mapping
• Concepts: useState, useEffect, dynamic filtering, components communication

---

🖼️ Image Slider

Folder: Img_Slider/

A dynamic carousel component pulling sliding imagery dynamically from online placeholders.

• Features: Smooth forward/backward sliding, interactive slide dot indicators, loading animations
• Concepts: useState, useEffect API integration, conditional rendering

---

📥 Load More Data

Folder: Load_More/

Demonstrates optimal item rendering grids, data appending processes, and conditional state limitations.

• Features: Progressive product card load-ins, pagination state counters, disabled thresholds
• Concepts: useState, useEffect, paginated API requests

---

📂 Nested Menu UI

Folder: Menu_UI/

A recursive structural layout project showcasing dynamic navigation list drop-downs.

• Features: Interactive collapsible folder system, multi-level structures rendering
• Concepts: Recursive component self-calling, useState, object destructuring

---

➕ Accordion Multi-Selection

Folder: Multi_Selection/

A toggle accordion project for showing and hiding card elements dynamically.

• Features: Single-toggle collapse, bulk multi-selection toggle state options
• Concepts: useState, conditional class states, array indexing mapping

---

🔲 QR Code Generator

Folder: QR_Code/

Instant converter generating clean, shareable QR codes from typed textual queries.

• Features: Dynamic text inputs tracking, direct QR value generation trigger
• Concepts: useState, controlled input forms, external code render libraries

---

⭐️ Star Rating Widget

Folder: Rating_Stars/

A stateful interactive ratings component featuring smooth user feedbacks.

• Features: Hover indicators tracking, locked active selection star index
• Concepts: useState, inline mouse event tracking, CSS icon variables mapping

---

☁️ Weather App

Folder: Weather_App/

A live client-side app pulling real-time environmental metrics for search queries.

• Features: Live City Search, Celsius unit conversions (&units=metric), responsive wind and humidity cards
• Concepts: useState, useEffect, dynamic coordinate mapping, OpenWeather API integrations

---

🛠️ Environment & Tools

Tool / Technology	Version	Purpose
React	^19.2.7	UI library
React DOM	^19.2.7	DOM rendering
Vite	^8.1.x	Build tool & dev server
CSS	Custom	Responsive layouts & dynamic transitions
TailwindCSS	v4	Responsive layouts & dynamic transitions
JavaScript	ES6+	Script logic structures
Node.js / npm	Latest LTS	Runtime & package manager
Git & GitHub	—	Version control & remote hosting

---

⚙️ Development Guide

Running Any Project

Navigate into the specific project folder and start its development server:

cd Projects/Project_Folder_Name
npm run dev

---

📂 Project Directory Structure

├── 📁 Projects
│   ├── 📁 Color_Generator
│   ├── 📁 Food_Recipe_App
│   ├── 📁 Img_Slider
│   ├── 📁 Load_More
│   ├── 📁 Menu_UI
│   ├── 📁 Multi_Selection
│   ├── 📁 QR_Code
│   ├── 📁 Rating_Stars
│   └── 📁 Weather_App
└── 📝 README.md

---

👤 Author

MehmoodCoder

• 🔗 GitHub: https://github.com/MehmoodCoder
• 🌐 Portfolio: My Portfolio Link

---

📄 License

This project is open source and available under the MIT License.

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📝 Changelog

v1.0.0 (Initial Release)

• ✨ Implemented responsive QR code generation component
• 🎯 Added copy-to-clipboard and Enter-key generation
• 💅 Improved responsive layout and visual polish

---

Happy coding without chai ! ☕