React Sandbox (Vite)

Overview

This repository serves as a React Sandbox for practicing and experimenting with various React concepts, technologies, and functionalities. Each project is self-contained within its own folder, allowing for modular development and easy exploration.

Tech Stack

• React (with Vite)
• Various external APIs
• Local state and hardcoded data

Features

• Component-based architecture
• Switching mechanism in App.jsx to toggle between different projects
• Focus on logic and functionality rather than styling
• Use of both external APIs and hardcoded values
• Variety of complexity levels across projects

Implemented Projects

The following projects are included in the sandbox:

1. Accordion - Expandable sections
2. Countries - Fetching and displaying country data
3. Contact Book - Manage contacts with CRUD operations
4. Crypto - Cryptocurrency price tracking
5. Custom Hook - Demonstration of custom React hooks
6. Dark Mode - Toggle dark/light mode
7. Drag and Drop - Implementing draggable components
8. Exchange - Currency exchange rate calculator
9. GitHub Finder - Search GitHub users and display their details
10. Image Slider - Simple image carousel
11. Load More - Lazy loading list items
12. Memory Game - Card-matching memory game
13. Modal - Custom modal implementation
14. Notes - Note-taking app with local storage
15. Password Generator - Generate secure passwords
16. Pokedex - Fetch and display Pokémon data
17. QR Generator - Generate QR codes from text input
18. Scroll Indicator - Show progress bar while scrolling
19. Stars - Star rating component
20. Stoper - Stopwatch functionality
21. Tabs - Tab-based navigation UI
22. Tic Tac Toe - Classic tic-tac-toe game
23. Typewriter - Typewriter animation effect
24. Weather - Fetch and display weather data
25. Wordly - Word game similar to Wordle
26. Quiz - Interactive quiz application

Getting Started

Prerequisites

Ensure you have Node.js and npm (or yarn) installed.

Installation

1. Clone the repository:

   git clone https://github.com/your-username/react-sandbox.git
   cd react-sandbox

2. Install dependencies:

   npm install  # or yarn install

3. Start the development server:

   npm run dev  # or yarn dev

4. Open the browser and navigate to http://localhost:5173/.

Usage

• Select an app using the switch component in App.jsx
• Explore and modify the logic of different apps
• Experiment with new features or APIs

License

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