# 🚀 Basic React - Mini Projects Collection

A curated collection of modern React mini-projects built with **Vite**, showcasing essential React concepts and practical implementations. Perfect for learning React fundamentals through hands-on projects.

## 📋 Projects Overview

### 1. **🎨 Background Changer**
Dynamic background color changer with interactive controls. Learn state management and event handling.
- **Tech**: React, Hooks (useState)
- **Features**: Color picker, random color generation

### 2. **🔐 Password Generator**
Generate secure random passwords with customizable options. Perfect for understanding component logic.
- **Tech**: React, Hooks
- **Features**: Length customization, character type selection, copy to clipboard

### 3. **💱 Currency Converter**
Real-time currency conversion using live exchange rates. Demonstrates API integration and data fetching.
- **Tech**: React, Custom Hooks, API Integration
- **Features**: Real-time rates, multiple currency support, dynamic calculations

### 4. **🗺️ Router Navigation**
Complete routing implementation with multiple pages and navigation. Master React Router concepts.
- **Tech**: React Router v6, Nested Routes
- **Features**: Multi-page navigation, dynamic routes, layout persistence

### 5. **🎭 Mini Context**
User authentication context implementation. Learn Context API fundamentals.
- **Tech**: React Context API, Context Provider
- **Features**: User login/logout, global state management

### 6. **🌓 Theme Switcher**
Dynamic light/dark theme switching with context API. Advanced Context API usage.
- **Tech**: React Context API, useContext Hook
- **Features**: Theme persistence, multiple components, seamless switching

## 🚀 Getting Started

### Prerequisites
- Node.js (v16 or higher)
- npm or yarn

### Installation

1. Clone the repository:
```bash
git clone https://github.com/Loki-Snape/Basic-React.git
cd Basic-React
```

2. Navigate to any project:
```bash
cd 01_BackgroundChanger
```

3. Install dependencies:
```bash
npm install
```

4. Start the development server:
```bash
npm run dev
```

## 📂 Project Structure

```
Basic-React/
├── 01_BackgroundChanger/
├── 02_PasswordGenerator/
├── 03_CurrencyConverter/
├── 04_Router/
├── 05_miniContext/
├── 06_ThemeSwitcher/
└── index.html (Landing Page)
```

## 🛠️ Tech Stack

- **Frontend Framework**: React 18+
- **Build Tool**: Vite
- **Styling**: CSS3
- **State Management**: Hooks, Context API
- **Routing**: React Router v6
- **Linting**: ESLint

## 📚 Learning Path

1. Start with **Background Changer** - Basic state management
2. Move to **Password Generator** - Logic and interactions
3. Try **Currency Converter** - API integration and custom hooks
4. Explore **Router** - Navigation and routing patterns
5. Learn **Mini Context** - Context API basics
6. Master **Theme Switcher** - Advanced context patterns

## 🎯 Key Concepts Covered

- ✅ Component Creation and Reusability
- ✅ State Management (useState, useContext)
- ✅ Side Effects (useEffect)
- ✅ Custom Hooks Development
- ✅ Event Handling
- ✅ Conditional Rendering
- ✅ List Rendering
- ✅ Form Handling
- ✅ API Integration
- ✅ Routing and Navigation
- ✅ Context API for Global State

## 🤝 Contributing

Contributions are welcome! Feel free to fork and submit pull requests.

## 📄 License

This project is open source and available for educational purposes.

## 👨‍💻 Author

**Loki-Snape** - React Learning Projects

---

**Happy Coding! 🎉** Start with any project and level up your React skills!