React Learning Projects Collection

A collection of React.js projects built while learning modern React concepts and best practices.

Projects Overview

1. 01basicreact - Basic React app created using Create React App
2. 01vitereact - Basic React app using Vite
3. 02counter - Simple counter application
4. 03tailwindprops - Project demonstrating TailwindCSS and Props
5. 04bgChanger - Background color changer application
6. 05passwordGenerator - Password generator tool
7. 06currencyConverter - Currency conversion application
8. 07reactRouter - React Router implementation
9. 08miniContext - Small project showing Context API usage
10. 09themeswitcher - Theme switching functionality
11. 10todocontextLocal - Todo app using Context API and local storage
12. 12MegaBlog - Full-featured blog application with Appwrite backend
13. customReact - Custom React-like implementation
14. reduxToolkitTodo - Todo app using Redux Toolkit

Tech Stack

• React 18.3
• Vite
• TailwindCSS
• React Router
• Redux Toolkit
• Appwrite
• Context API

Common Features

• Modern React with Hooks
• State Management (Context API, Redux Toolkit)
• Component Architecture
• Routing
• Styling with TailwindCSS
• Form Handling
• API Integration

Getting Started

1. Clone the repository:

   git clone https://github.com/TheProfessor123/react.git

2. Navigate to the project directory:

   cd [project-name]

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

Available Scripts

Each project contains the following common scripts:

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

Project Structure

Each project follows a standard structure:

project/
  ├── src/
  │   ├── components/
  │   ├── context/ (if applicable)
  │   ├── features/ (for Redux)
  │   ├── App.jsx
  │   └── main.jsx
  ├── public/
  ├── index.html
  ├── package.json
  ├── vite.config.js
  └── tailwind.config.js (if applicable)

Key Features by Project

• 12MegaBlog: Full-featured blog with authentication, CRUD operations, and Appwrite backend
• reduxToolkitTodo: State management with Redux Toolkit, Todo CRUD operations
• 07reactRouter: Page routing, dynamic routes, and navigation
• 09themeswitcher: Theme management with Context API
• 06currencyConverter: API integration, real-time currency conversion
• 05passwordGenerator: Custom hooks, form handling