🚀 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:

git clone https://github.com/Loki-Snape/Basic-React.git
cd Basic-React

2. Navigate to any project:

cd 01_BackgroundChanger

3. Install dependencies:

npm install

4. Start the development server:

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!