Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/renyzeraa/video-player-zustand
Site de cursos, modulos e aulas, implementando Zustand com React
https://github.com/renyzeraa/video-player-zustand
Last synced: 7 days ago
JSON representation
Site de cursos, modulos e aulas, implementando Zustand com React
- Host: GitHub
- URL: https://github.com/renyzeraa/video-player-zustand
- Owner: renyzeraa
- Created: 2024-08-03T14:46:45.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-03T19:20:12.000Z (5 months ago)
- Last Synced: 2024-08-04T16:02:20.539Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 201 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Estudo de Implementação do Zustand em React
Este projeto tem como objetivo estudar a implementação do Zustand em uma aplicação React. A aplicação simula um curso fictício, onde o usuário pode assistir a vídeos de aulas e navegar entre módulos e aulas. A estilização do site é feita com Tailwind CSS.
## Instalação
1. Clone o repositório:
```bash
git clone https://github.com/renyzeraa/video-player-zustand.git
cd video-player-zustand
```
2. Instale as dependências do projeto:
```bash
npm install
```
3. Inicie o servidor uma aba do terminal
```bash
npm run server
```
Vai rodar no http://localhost:3000/course 4. Em outra aba do terminal inicie a aplicação
```bash
npm run dev
```
Vai rodar no http://localhost:5173/
## Json Server
O JSON Server é utilizado para simular uma API RESTful. O arquivo server.json contém a estrutura de dados das aulas do curso fictício, basta acessar o arquivo na raiz do projeto para ver os dados.
## Tailwind CSS
O Tailwind CSS é utilizado para estilizar a aplicação.
A configuração está no arquivo tailwind.config.js
## Funcionalidades Principais
1. **Visualização de Vídeos:** Os usuários podem assistir a vídeos de aulas.
2. **Navegação entre Módulos e Aulas:** A aplicação permite navegar entre diferentes módulos e aulas.
3. **Gerenciamento de Estado:** O Zustand é utilizado para gerenciar o estado dos módulos e aulas.
4. **Estilização com Tailwind CSS:** A aplicação é estilizada utilizando classes utilitárias do Tailwind CSS.
5. Antes de carregar os vídeos é alicado uma animação de Loading.
### Contato
Made with ❤️ by [Renan Silva](https://github.com/renyzeraa)!
🛠 Frontend Developer
📍 Santa Catarina - Brazil
