Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eli-keli/react-series

This repository contains a collection of React projects that I work on daily/weekly to improve my frontend development skills.
https://github.com/eli-keli/react-series

appwrite javascript reactjs redux-toolkit tailwindcss zustand

Last synced: 21 days ago
JSON representation

This repository contains a collection of React projects that I work on daily/weekly to improve my frontend development skills.

Awesome Lists containing this project

README 

        
# React Series



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.



## Table of Contents

- 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



## Introduction

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.



## Projects

**Note:** *Some projects in this series may have taken more than one day/weeks to complete due to various challenges and learning opportunities.*



### Project 1: Background Changer

**Description:** 



**Key Concepts Covered:**

- State management (useState)



### Project 2: Password Generator

**Description:** 



**Key Concepts Covered:**

- useEffect

- useRef

- useCallback



### Project 3: Currency Converter

**Description:** 



**Key Concepts Covered:**

- Custom Hooks in React



### Project 4: Theme Switcher

**Description:** Build a dark mode light mode in reactjs with context api



**Key Concepts Covered:**

- Context API



### Project 5: Todo App

**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



### Project 6: Redux ToolKit

**Description:** Introduction to the Redux ToolKit by building a simple todo app



**Key Concepts Covered:**

- Redux stores

- Redux reducers

- Redux slicers

- useDispatch

- useSelector



### Project 7: Zustand State Management

**Description:** Learning state management using Zustand by creating a course list app



**Key Concepts Covered:**

- Zustand store

- Zustand Middleware



### Project 8: Appwrite Blog app (unfinished)

**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



### Project 9: Home Budget App

**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



### Project 10: Weather Dashboard

**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 



### And more...

*Every day/week, a new project will be added to the repository. Check back regularly for updates!*



## Technologies Used

- React

- JavaScript (ES6+)

- TailwindCSS

- Vanilla CSS



## How to Run the Projects

1. Clone this repository: `git clone https://github.com/Eli-Keli/react-series.git`

2. Navigate to the project directory: `cd react-series`

2. Navigate to the project name: `cd `

3. Install the dependencies: `npm install`

4. Install Tailwind CSS: https://tailwindcss.com/docs/guides/vite

5. Start the development server: `npm run dev`

5. Open your browser and go to `http://localhost:5173` to view the project.