Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vagnernerves/react-with-redux-and-zustand-ignite
Developed the video player project to learn React with Redux and Zustand.
https://github.com/vagnernerves/react-with-redux-and-zustand-ignite
axios json-server lucide-react radix react react-player redux tailwindcss typescript vite vitest zustand
Last synced: 1 day ago
JSON representation
Developed the video player project to learn React with Redux and Zustand.
- Host: GitHub
- URL: https://github.com/vagnernerves/react-with-redux-and-zustand-ignite
- Owner: VagnerNerves
- License: mit
- Created: 2023-08-26T12:55:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-27T22:56:52.000Z (over 1 year ago)
- Last Synced: 2024-11-14T10:16:41.837Z (2 months ago)
- Topics: axios, json-server, lucide-react, radix, react, react-player, redux, tailwindcss, typescript, vite, vitest, zustand
- Language: TypeScript
- Homepage:
- Size: 863 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React With Redux and Zustand
Developed the video player project to learn React with Redux and Zustand.
Four branches were created for the purpose of study:
- To study Redux, access the following branches:
- ["redux-todo"](https://github.com/VagnerNerves/react-with-redux-and-zustand-ignite/tree/redux-todo): In this branch, the implementation of Redux with a to-do list is found, showcasing the basic concepts. The Redux Provider was created in App.tsx, and the store configuration was set up in index.ts. A "slice" was also created within the reducers, containing functions like "add". Additionally, "useSelector" was used to retrieve items from the to-do list, while "useDispatch" was employed to perform updates.
- ["redux-player-without-api"](https://github.com/VagnerNerves/react-with-redux-and-zustand-ignite/tree/redux-player-whithout-api): In this branch, the implementation of Redux without the use of an API is demonstrated, focusing on a video player project. The "slice" was separated, and functions within the reducers were created, along with tests using "vitest".
- ["redux-player-with-api"](https://github.com/VagnerNerves/react-with-redux-and-zustand-ignite/tree/redux-player-with-api): In this branch, the implementation of Redux with an API is showcased in the video player project. Interfaces were created, and the use of Async Thunk to perform asynchronous queries in Redux was learned.
- To study Zustand, access the branch:
- ["main"](https://github.com/VagnerNerves/react-with-redux-and-zustand-ignite/tree/main): In this branch, Zustand and all its functionalities were integrated into the video player project.
## 🧠Table of contents
- [🧠Table of contents](#-table-of-contents)
- [🎥 Implementation Video](#-implementation-video)
- [💡 Technologies Used](#-technologies-used)
- [🚀 Running the Project](#-running-the-project)
- [Front-end Web](#front-end-web)
- [🌎 License](#-license)
- [✒ Author](#-author)
## 🎥 Implementation Video
https://github.com/VagnerNerves/react-with-redux-and-zustand-ignite/assets/40831841/f36f644d-1049-488c-b1a3-e3e3611aa698
## 💡 Technologies Used
- [x] [React](https://reactjs.org/)
- [x] [Vite](https://vitejs.dev/)
- [x] [Redux](https://redux.js.org/)
- [x] [Zustand](https://github.com/pmndrs/zustand)
- [x] [TypeScript](https://www.typescriptlang.org/)
- [x] [Tailwindcss](https://tailwindcss.com/)
- [x] [Lucide](https://lucide.dev/)
- [x] [Radix](https://www.radix-ui.com/)
- [x] [React Player](https://github.com/cookpete/react-player)
- [x] [Axios](https://axios-http.com/ptbr/)
- [x] [JSON Server](https://github.com/typicode/json-server)
- [x] [Vitest](https://vitest.dev/)
## 🚀 Running the Project
### Front-end Web
Clone the project
```bash
git clone https://github.com/VagnerNerves/react-with-redux-and-zustand-ignite.git
```
Enter the project directory
```bash
cd react-with-redux-and-zustand-ignite
```
Install with dependencies
```bash
npm install
```
Start the server
```bash
# Run Server:
npm run server
# Run Web:
npm run dev
# Run test:
npm run test
npm run test:watch
```
## 🌎 License
This project is under the MIT license. See the [LICENSE](https://github.com/VagnerNerves/react-with-redux-and-zustand-ignite/blob/main/LICENSE) file for more details.
## ✒ Author
Vagner Nerves
Made with love and hate 😅, get in touch!
[](https://www.linkedin.com/in/vagnernervessantos/)
[](mailto:[email protected])
[](https://github.com/VagnerNerves)