Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/israelkilday/devtube-playlists

DEVTUBE PLAYLISTS É uma plataforma de exibição de playlists com vídeos de programação selecionados do YouTube. Utilizando React, Vite, e Zustand, implementei uma interface dinâmica e intuitiva, Os vídeos são gerenciados por uma API personalizada que criei e armazenei no JSONPlaceholder
https://github.com/israelkilday/devtube-playlists

axios eslint git husky jsx prettier radix-ui react react-icons react-player tailwind-css typescript vercel zustand

Last synced: about 3 hours ago
JSON representation

Host: GitHub
URL: https://github.com/israelkilday/devtube-playlists
Owner: Israelkilday
License: mit
Created: 2024-07-04T15:50:10.000Z (4 months ago)
Default Branch: main
Last Pushed: 2024-09-13T13:29:08.000Z (about 2 months ago)
Last Synced: 2024-09-14T04:10:48.421Z (about 2 months ago)
Topics: axios, eslint, git, husky, jsx, prettier, radix-ui, react, react-icons, react-player, tailwind-css, typescript, vercel, zustand
Language: TypeScript
Homepage: https://devetube-playlists.vercel.app/
Size: 191 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# ⏯ DEVTUBE PLAYLISTS

**_[DEVTUBE PLAYLISTS](https://devetube-playlists.vercel.app/)_** É uma plataforma de exibição de playlists com vídeos de programação selecionados do YouTube. Utilizando React, Vite, e Zustand, implementei uma interface dinâmica e intuitiva, proporcionando aos usuários uma experiência fluida na navegação. Os vídeos são gerenciados por uma API personalizada que criei e armazenei no JSONPlaceholder. Este projeto foi uma excelente oportunidade para aprimorar minhas habilidades em desenvolvimento web full stack, incluindo o trabalho com APIs e gerenciamento de estado com Zustand.

## 🎬 Vídeo do projeto

https://github.com/user-attachments/assets/60ab2960-8b2f-4e51-ab77-a9977539375a

## Fluxograma da aplicação

![Diagrama sem nome drawio (3)](https://github.com/user-attachments/assets/ae41fabb-74c4-4caa-8b9a-7b976d334f4d)

## ⚙️ Pré-requisitos

- **_Node.js_**
- **_Vite_**
- **_Git_**
- **_npm_** (v6.0.0 ou superior)

## 🚀 Principais Funcionalidades:

- [x] **_Interface Dinâmica e Responsiva:_**
- Interface desenvolvida com `React` + `Tailwind`, proporcionando uma navegação rápida e uma experiência de usuário otimizada em diferentes dispositivos.
- [x] **_Integração com API Personalizada:_**
- Os vídeos das playlists são acessados por meio de uma API personalizada, que se conecta ao JSONPlaceholder para o armazenamento e recuperação dos dados.
- [x] **_Gerenciamento de Estado com Zustand:_**
- O gerenciamento de estado global do aplicativo é realizado com Zustand, garantindo a consistência e eficiência das operações do aplicativo.
- [x] **_Navegação Fluida entre Playlists:_**
- Usuários podem alternar entre diferentes playlists de maneira fluida, com transições suaves e carregamento rápido.
- [x] **_Desenvolvimento de testes unitários com vitest :_**
- Utilizei o Vitest para testar o comportamento do player slice no Redux, assegurando que as ações disparadas resultassem nas mudanças esperadas no estado da aplicação.
- [x] **_Suporte a Vários Formatos de Vídeo:_**
- O player de vídeo integrado suporta vários formatos de vídeo, proporcionando flexibilidade na reprodução de conteúdo do YouTube.

## 🛠️ Principais Tecnologias

- **_[Typescript](https://www.typescriptlang.org/)_**
- **_[React.js](https://pt-br.legacy.reactjs.org/)_**
- **_[Zustand](https://zustand-demo.pmnd.rs/)_**
- **_[React Player](https://www.npmjs.com/package/react-player)_**
- **_[React Icons](https://react-icons.github.io/react-icons/)_**
- **_[Radix UI](https://www.radix-ui.com/)_**
- **_[Vitest](https://vitest.dev/)_**
- **_[Axios](https://axios-http.com/ptbr/docs/intro)_**
- **_[TailwindCSS](https://tailwindcss.com/)_**
- **_[Vercel](https://vercel.com/docs)_**
- **_[Husky](https://www.freecodecamp.org/portuguese/news/como-adicionar-hooks-de-commit-ao-git-com-husky-para-automatizar-tarefas/)_**
- **_[ESLint](https://eslint.org/)_**
- **_[Prettier](https://prettier.io/)_**
- **_[Git](https://www.git-scm.com/)_**
- **_[Json](https://www.alura.com.br/artigos/o-que-e-json?srsltid=AfmBOoonPgYWZgipvX0C88zvP30p00jehy5hiO-T_XiCz-hsGSQ8g2SR)_**
- **_[Vite](https://vitejs.dev/)_**

## 💻 Como Rodar o Projeto

1. Clone o repositório: `git clone https://github.com/Israelkilday/DEVTUBE-PLAYLISTS`
2. Instale as dependências: `npm install`
3. Inicie o servidor de desenvolvimento:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
5. Abra o navegador e acesse `http://localhost:3000`

## 📁 Estrutura de Diretórios

- `/src`: Código-fonte da aplicação.
- `/public`: Arquivos públicos.

## 🤝 Contribuição

Se você deseja contribuir com este projeto, siga estas etapas:

1. Fork o repositório.

2. Crie uma branch para sua contribuição:

```shell
git checkout -b minha-contribuicao

```

3. Faça suas alterações e commit:

```shell
git commit -m 'Minha contribuição'

```

4. Envie sua branch:

```shell
git push origin minha-contribuicao

```

5. Abra uma solicitação pull.

## 🔗 Link do Projeto

https://devetube-playlists.vercel.app/

## 🧠 Autor

[email protected]

[![linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/israel-kilday-machado-de-souza-801482230)

### Obrigado por visitar meu projeto! 👋

(voltar ao topo)