https://github.com/renyzeraa/video-player-zustand

Site de cursos, modulos e aulas, implementando Zustand com React
https://github.com/renyzeraa/video-player-zustand

css react typescript zustand

Last synced: about 2 months 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 (almost 2 years ago)
Default Branch: main
Last Pushed: 2024-08-03T19:20:12.000Z (almost 2 years ago)
Last Synced: 2025-04-07T01:18:24.251Z (about 1 year ago)
Topics: css, react, typescript, zustand
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