{"id":18704919,"url":"https://github.com/israelkilday/devtube-playlists","last_synced_at":"2026-04-04T08:38:58.259Z","repository":{"id":247240340,"uuid":"824216193","full_name":"Israelkilday/DEVTUBE-PLAYLISTS","owner":"Israelkilday","description":"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","archived":false,"fork":false,"pushed_at":"2024-09-13T13:29:08.000Z","size":196,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-28T06:27:10.697Z","etag":null,"topics":["axios","eslint","git","husky","jsx","prettier","radix-ui","react","react-icons","react-player","tailwind-css","typescript","vercel","zustand"],"latest_commit_sha":null,"homepage":"https://devetube-playlists.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Israelkilday.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-04T15:50:10.000Z","updated_at":"2024-09-13T13:29:12.000Z","dependencies_parsed_at":"2024-12-28T06:26:34.754Z","dependency_job_id":"9c592311-b00f-4bc0-8c32-ab2fa50eeb11","html_url":"https://github.com/Israelkilday/DEVTUBE-PLAYLISTS","commit_stats":null,"previous_names":["israelkilday/video-player"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Israelkilday%2FDEVTUBE-PLAYLISTS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Israelkilday%2FDEVTUBE-PLAYLISTS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Israelkilday%2FDEVTUBE-PLAYLISTS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Israelkilday%2FDEVTUBE-PLAYLISTS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Israelkilday","download_url":"https://codeload.github.com/Israelkilday/DEVTUBE-PLAYLISTS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239567824,"owners_count":19660557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","eslint","git","husky","jsx","prettier","radix-ui","react","react-icons","react-player","tailwind-css","typescript","vercel","zustand"],"created_at":"2024-11-07T12:09:07.329Z","updated_at":"2025-11-09T05:30:28.976Z","avatar_url":"https://github.com/Israelkilday.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":" # ⏯ DEVTUBE PLAYLISTS\n\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\u003cbr\u003e\n\n**_[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.\n\n \u003c/div\u003e\n\n## 🎬 Vídeo do projeto\n\nhttps://github.com/user-attachments/assets/60ab2960-8b2f-4e51-ab77-a9977539375a\n\n## Fluxograma da aplicação\n\n![Diagrama sem nome drawio (3)](https://github.com/user-attachments/assets/ae41fabb-74c4-4caa-8b9a-7b976d334f4d)\n\n## ⚙️ Pré-requisitos\n\n- **_Node.js_** \n- **_Vite_** \n- **_Git_** \n- **_npm_** (v6.0.0 ou superior)\n\n## 🚀 Principais Funcionalidades:\n\n- [x] **_Interface Dinâmica e Responsiva:_**\n- Interface desenvolvida com `React` + `Tailwind`, proporcionando uma navegação rápida e uma experiência de usuário otimizada em diferentes dispositivos.\n- [x] **_Integração com API Personalizada:_**\n- 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. \n- [x] **_Gerenciamento de Estado com Zustand:_**\n- O gerenciamento de estado global do aplicativo é realizado com Zustand, garantindo a consistência e eficiência das operações do aplicativo.\n- [x] **_Navegação Fluida entre Playlists:_**\n- Usuários podem alternar entre diferentes playlists de maneira fluida, com transições suaves e carregamento rápido.\n- [x] **_Desenvolvimento de testes unitários com vitest :_**\n- 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.\n- [x] **_Suporte a Vários Formatos de Vídeo:_**\n- O player de vídeo integrado suporta vários formatos de vídeo, proporcionando flexibilidade na reprodução de conteúdo do YouTube.\n\n  ## 🛠️ Principais Tecnologias\n\n- **_[Typescript](https://www.typescriptlang.org/)_**\n- **_[React.js](https://pt-br.legacy.reactjs.org/)_**\n- **_[Zustand](https://zustand-demo.pmnd.rs/)_**\n- **_[React Player](https://www.npmjs.com/package/react-player)_**\n- **_[React Icons](https://react-icons.github.io/react-icons/)_**\n- **_[Radix UI](https://www.radix-ui.com/)_**\n- **_[Vitest](https://vitest.dev/)_**\n- **_[Axios](https://axios-http.com/ptbr/docs/intro)_**\n- **_[TailwindCSS](https://tailwindcss.com/)_**\n- **_[Vercel](https://vercel.com/docs)_**\n- **_[Husky](https://www.freecodecamp.org/portuguese/news/como-adicionar-hooks-de-commit-ao-git-com-husky-para-automatizar-tarefas/)_**\n- **_[ESLint](https://eslint.org/)_**\n- **_[Prettier](https://prettier.io/)_**\n- **_[Git](https://www.git-scm.com/)_**\n- **_[Json](https://www.alura.com.br/artigos/o-que-e-json?srsltid=AfmBOoonPgYWZgipvX0C88zvP30p00jehy5hiO-T_XiCz-hsGSQ8g2SR)_**\n- **_[Vite](https://vitejs.dev/)_**\n\n## 💻 Como Rodar o Projeto\n\n1.  Clone o repositório: `git clone https://github.com/Israelkilday/DEVTUBE-PLAYLISTS`\n2.  Instale as dependências: `npm install`\n3.  Inicie o servidor de desenvolvimento:\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```  \n5.  Abra o navegador e acesse `http://localhost:3000`\n\n## 📁 Estrutura de Diretórios\n\n- `/src`: Código-fonte da aplicação.\n- `/public`: Arquivos públicos.\n\n## 🤝 Contribuição\n\nSe você deseja contribuir com este projeto, siga estas etapas:\n\n1. Fork o repositório.\n\n2. Crie uma branch para sua contribuição:\n\n   ```shell\n   git checkout -b minha-contribuicao\n\n   ```\n\n3. Faça suas alterações e commit:\n\n   ```shell\n   git commit -m 'Minha contribuição'\n\n   ```\n\n4. Envie sua branch:\n\n   ```shell\n    git push origin minha-contribuicao\n\n   ```\n\n5. Abra uma solicitação pull.\n\n## 🔗 Link do Projeto\n\nhttps://devetube-playlists.vercel.app/\n\n## 🧠 Autor\n\nisrael.kilday@yahoo.com.br\n\n[![linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/israel-kilday-machado-de-souza-801482230) \u003ca href=\"mailto:israelkilday27@gmail.com\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Gmail-333333?style=for-the-badge\u0026logo=gmail\u0026logoColor=red\" /\u003e\n\u003c/a\u003e\n\n### Obrigado por visitar meu projeto! 👋\n\n \u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003evoltar ao topo\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisraelkilday%2Fdevtube-playlists","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisraelkilday%2Fdevtube-playlists","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisraelkilday%2Fdevtube-playlists/lists"}