Welcome to my React Series repository! This repository contains a collection of React projects that I work on daily/weekly to improve my frontend development skills. Each project explores different React concepts and features, ranging from basic to advanced levels.
- Introduction
- Projects
- project 1: Background changer
- project 2: Password Generator
- project 3: Currency Converter
- project 4: Theme Switcher
- project 5: Todo Application
- project 6: Redux Toolkit
- project 7: Zustand
- project 8: Appwrite Blog
- project 9: Home Budget Application
- project 10: Weather Dashboard
- And more...
- Technologies Used
- How to Run the Projects
This repository is a part of my personal journey to mastering React by building various projects daily/weekly. Each day/week I tackle a new challenge or concept to solidify my understanding of the React framework, including hooks, state management, routing, and more. Feel free to explore the projects, provide feedback, or contribute to the series.
Note: Some projects in this series may have taken more than one day/weeks to complete due to various challenges and learning opportunities.
Description:
Key Concepts Covered:
- State management (useState)
Description:
Key Concepts Covered:
- useEffect
- useRef
- useCallback
Description:
Key Concepts Covered:
- Custom Hooks in React
Description: Build a dark mode light mode in reactjs with context api
Key Concepts Covered:
- Context API
Description: Building a todo app that lets users manage their todo lists and stores each todo in browser's local storage
Key Concepts Covered:
- Context API with local storage
Description: Introduction to the Redux ToolKit by building a simple todo app
Key Concepts Covered:
- Redux stores
- Redux reducers
- Redux slicers
- useDispatch
- useSelector
Description: Learning state management using Zustand by creating a course list app
Key Concepts Covered:
- Zustand store
- Zustand Middleware
Description: Building a full stack project with React and Appwrite
Key Concepts Covered:
- Setting up appwrite
- Appwrite Authentication
- Appwrite Databases, Query and Storage
- Redux Toolkit
- Authentication
Description: Building a budgeting app with React Router
Key Concepts Covered:
- Routing Basics & Loaders
- Layouts and Actions
- Custom Error Pages
- React Tostify (Adding toast messages)
- Using helper functions
- Handling form submissions
- useFetcher
- useRef
Description: Create a responsive weather dashboard that allows users to search for current weather conditions in various cities using a weather API.
Requirements:
- Fetch weather data from a public weather API (e.g., OpenWeatherMap).
- Display current weather conditions including temperature, humidity, wind speed, and an icon representing the weather.
- Allow users to search for different cities and update the dashboard accordingly.
- Use Tailwind CSS for responsive design.
- Deploy the application on a platform like Netlify or Vercel.
Key Concepts Covered:
- API Integration
- State Management (useContext, useState, useEffect)
- Responsive UI Design
- Error handling
- Using helper functions
Every day/week, a new project will be added to the repository. Check back regularly for updates!
- React
- JavaScript (ES6+)
- TailwindCSS
- Vanilla CSS
- Clone this repository:
git clone https://github.com/Eli-Keli/react-series.git - Navigate to the project directory:
cd react-series - Navigate to the project name:
cd <project-name> - Install the dependencies:
npm install - Install Tailwind CSS: https://tailwindcss.com/docs/guides/vite
- Start the development server:
npm run dev - Open your browser and go to
http://localhost:5173to view the project.