🚀 ReactMastery - Comprehensive React Learning Journey

A collection of modern React projects demonstrating fundamental concepts and advanced patterns through practical implementations.

Replace with actual project screenshots collage

🌟 Features

Core Concepts

• Component-based architecture
• State management with useState/useReducer
• Props drilling and component composition
• Context API for global state
• React Router navigation

Practical Applications

• Password Generator with complexity controls
• Currency Converter with real-time rates
• Theme Switcher with dark/light modes
• Background Color Changer with dynamic UI

Advanced Patterns

• Custom Hooks implementation
• Performance optimization techniques
• Responsive design integration
• API integration strategies

🛠️ Included Projects

1. 01basicreact - React+Vite boilerplate setup
   Basic project configuration and core concepts

2. 02counter - Interactive Counter App
   Features: Glassmorphism UI, animated transitions, responsive design
   Explore Counter App

3. 03tailwindAndprops - Component Props Demo
   Features: Tailwind CSS integration, card components, props drilling

4. 04bgChanger - Dynamic Background Editor
   Features: Color palette generation, real-time preview

5. 05passwordGenerator - Secure Password Creator
   Features: Complexity controls, clipboard copy, strength indicator

6. 06currencyConvertor - Real-time Exchange Rates
   Features: API integration, currency formatting, historical data

7. 07reactRouter - Navigation Demo
   Features: Multi-page routing, protected routes, dynamic URLs

8. 08miniContext - State Management Demo
   Features: Context API implementation, global store

9. 09themeswitcher - Dark/Light Mode Toggle
   Features: CSS variables, persisted preferences, smooth transitions

🖥️ Installation & Usage

1. Clone repository

git clone https://github.com/abdulrahmans0414/ReactMastery.git

2. Navigate to project directory

cd ReactMastery/PROJECT_DIRECTORY

3. Install dependencies

npm install

4. Start development server

npm run dev

🧰 Tech Stack

• Core Framework: React 18

• Build Tool: Vite 4

• Styling: CSS3 | Tailwind CSS

• State Management: Context API

• Routing: React Router 6

• Utility Libraries: nanoid | react-icons

📜 License

Distributed under MIT License. See LICENSE for details.

🛠️ Maintained by Abdul Rahman

📧 Contact: Your Email