⚛️ React From Scratch

🚀 A collection of small React projects built while learning React fundamentals

Practice projects covering components, props, state management, event handling, API integration, and reusable UI patterns — all inside a single Vite setup.

---

📖 Overview

This repository contains a collection of small React projects created while learning and exploring the React ecosystem.

Instead of maintaining multiple repositories, all projects are organized inside a single Vite application, allowing quick switching between projects by modifying a single import statement.

The projects cover a variety of React concepts including:

✨ Components
✨ Props
✨ State Management
✨ Event Handling
✨ Conditional Rendering
✨ API Integration
✨ Reusable Components

---

🌟 Projects Included

🍳 ChefVerse

An AI-powered recipe generator that suggests recipes based on ingredients provided by the user.

Concepts Covered

• Forms
• State management
• Conditional rendering
• API integration
• Component composition

---

😂 Meme Generator

Generate memes using templates and custom captions.

Concepts Covered

• Controlled inputs
• State updates
• Event handling
• Working with APIs

---

⚛️ React Facts

A beginner-friendly static React project introducing component-based UI development.

Concepts Covered

• Components
• JSX
• Props
• Styling

---

🎲 Tenzies

A recreation of the popular Tenzies dice game built using React state management.

Concepts Covered

• State
• Arrays in state
• Conditional rendering
• Derived state
• Game logic

---

🌍 Travel Journal

A travel journal UI built from reusable components and dynamic data.

Concepts Covered

• Props
• Lists and keys
• Data-driven UI
• Component reuse

---

📂 Project Structure

aimanfazal-react-from-scratch/
│
├── README.md
├── eslint.config.js
├── index.html
├── package.json
├── vite.config.js
│
└── src/
    ├── App.jsx
    ├── main.jsx
    │
    └── projects/
        ├── chefVerse/
        ├── memeGenerator/
        ├── reactFacts/
        ├── tenzies/
        └── travelJournal/

---

🛠️ Installation

1️⃣ Clone the Repository

git clone https://github.com/aimanfazal/react-from-scratch.git
cd react-from-scratch

2️⃣ Install Dependencies

npm install

3️⃣ Start the Development Server

npm run dev

---

🔄 Switching Between Projects

The active project is selected from:

src/App.jsx

Example:

import Root from "./projects/chefVerse/Root"

export default function App() {
  return <Root />
}

To launch a different project, simply replace the folder name in the import path.

🍳 ChefVerse

import Root from "./projects/chefVerse/Root"

😂 Meme Generator

import Root from "./projects/memeGenerator/Root"

⚛️ React Facts

import Root from "./projects/reactFacts/Root"

🎲 Tenzies

import Root from "./projects/tenzies/Root"

🌍 Travel Journal

import Root from "./projects/travelJournal/Root"

Vite will automatically reload the application with the selected project.

---

💻 Technologies Used

---

🎓 Concepts Covered

By exploring these projects, you'll gain hands-on experience with:

• ⚛️ React Components
• 🧩 Props and Component Composition
• 🔄 State Management
• 🎯 Event Handling
• 📋 Lists and Keys
• 🔀 Conditional Rendering
• 🌐 API Integration
• 🎨 Styling React Applications
• 📁 Project Organization

---

📌 Future Enhancements

• 🌙 Dark Mode Support
• 📱 Improved Responsive Design
• 🧪 Unit Testing
• 📦 Additional React Projects
• ⚡ Migration to TypeScript
• 🚀 Deployment Showcase

---

🤝 Contributing

Contributions are welcome!

Steps

# Fork the repository

# Create a new branch
git checkout -b feature-name

# Commit your changes
git commit -m "Add feature"

# Push to GitHub
git push origin feature-name

Then create a Pull Request 🚀

---

⭐ Support

If you found this repository useful:

🌟 Star the repository
🍴 Fork the repository
📢 Share it with others

---

📜 License

This project is licensed under the MIT License.

---

👨‍💻 Author

Aiman Fazal

❤️ Built with React and Vite

⭐ Don't forget to star the repository if you found it helpful!