{"id":22115200,"url":"https://github.com/walissonrodrigo/pocket-spotify-aceleradev-react","last_synced_at":"2025-06-30T17:34:57.063Z","repository":{"id":41622442,"uuid":"272332610","full_name":"WalissonRodrigo/pocket-spotify-aceleraDev-react","owner":"WalissonRodrigo","description":"Desafio do AceleraDEV React da Codenation onde será aplicado todo o conhecimento adquirido durante o curso onde será desenvolvido uma versão pocket do Spotify, integrada a Web API oficial, utilizando `fluxo implícito de concessão` para realizar a autenticação do usuário, permitindo que ele acesse rotas privadas dentro da aplicação.","archived":false,"fork":false,"pushed_at":"2023-01-06T08:55:02.000Z","size":74008,"stargazers_count":0,"open_issues_count":21,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T05:24:03.188Z","etag":null,"topics":["aceleradev","pocket-spotify","react-dom"],"latest_commit_sha":null,"homepage":"https://pocket-spotify-aceleradev-react.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WalissonRodrigo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-15T03:24:19.000Z","updated_at":"2020-06-23T00:58:13.000Z","dependencies_parsed_at":"2023-02-05T18:17:29.165Z","dependency_job_id":null,"html_url":"https://github.com/WalissonRodrigo/pocket-spotify-aceleraDev-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/WalissonRodrigo/pocket-spotify-aceleraDev-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalissonRodrigo%2Fpocket-spotify-aceleraDev-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalissonRodrigo%2Fpocket-spotify-aceleraDev-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalissonRodrigo%2Fpocket-spotify-aceleraDev-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalissonRodrigo%2Fpocket-spotify-aceleraDev-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WalissonRodrigo","download_url":"https://codeload.github.com/WalissonRodrigo/pocket-spotify-aceleraDev-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WalissonRodrigo%2Fpocket-spotify-aceleraDev-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262819490,"owners_count":23369487,"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":["aceleradev","pocket-spotify","react-dom"],"created_at":"2024-12-01T12:14:58.582Z","updated_at":"2025-06-30T17:34:57.030Z","avatar_url":"https://github.com/WalissonRodrigo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React / Redux Spotify Pocket SPA\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/dd290ed7-a296-422a-92e5-3e2c65ea99db/deploy-status)](https://app.netlify.com/sites/pocket-spotify-aceleradev-react/deploys)\n\n## Objetivo:\nNeste último desafio você aplicará todo o conhecimento adquirido durante o curso e terá que desenvolver uma versão _**pocket**_ do Spotify, integrada a [Web API](https://developer.spotify.com/documentation/web-api) oficial, utilizando `fluxo implícito de concessão` (Implicit Grant Flow) para realizar a autenticação do usuário, permite que ele acesse rotas privadas dentro da aplicação.\n\n## Referência do projeto finalizado e em ambiente de produção:\n [https://pocket-spotify-aceleradev-react.netlify.app](https://pocket-spotify-aceleradev-react.netlify.app)\n\n\u003cimg src=\"docs/spotify-pocket.gif\" width=\"320\" style=\"border: 2px solid black; margin: auto\"\u003e\n\n## Tópicos:\nNeste desafio foi abordado os seguintes conhecimentos em:\n\n* Fetch API\n* JS Funcional: `Map`, `Filter`\n* Modularização: `BEM` (Bloco, Elemento e Modificador)\n* Presentational e Container Components\n* Rails-Style Structure\n* React Hooks, `useState`, `useEffect`, `useRef`\n* React Testing Library\n* React\n* React Router Dom\n* Rotas Privadas\n* Redux: `ActionTypes`, `Action Creators`, `Reducers`, `Store`\n* Redux Persist: `LocalStorage`\n\n## Critérios de Aceite:\n- [x] Ser desenvolvido utilizando abordagem funcional com React Hooks.\n- [x] A aplicação deve possuir controle de **estado global** controlado pelo `Redux`.\n- [x] Consumir os dados do `Spotify Web API`, utilizando o `Fetch API` do Javascript e apenas o método `GET` nas requisições.\n- [x] Atenticação deve utilizar o fluxo `Implicit Grant Flow` da documentação ofial.\n- [x] **Rotas privadas** devem redirecionar o usuário para a tela de login, caso o token de autenticação tenha expirado.\n- [x] A rota privada `/dashboard` deverá exibir a lista de categorias da `Spotify Web API`.\n- [x] A rota privada `/dashboard/{categoria_id}` deverá exibir a lista de **playlists** da categoria selecionada.\n- [x] A rota privada `/dashboard/{categoria_id}/{playlist_id}` deverá exibir a lista de **faixas** da playlist selecionada.\n- [x] O usuário deverá ser capaz de reproduzir as faixas ao clicar em cada uma delas.\n- [x] A faixa deve **continuar tocando** enquanto o **usuário navega por outras rotas**, clicando no botão `voltar do navegador` ou da `interface de usuário`.\n- [x] O player deve possuir os controles de `Play` e `Pause`.\n- [x] Quando a **música acabar** o player deverá **desaparecer** da UI.\n\n## Sobre o Spotify Web API:\nAntes de começar a desenvolver o projeto, primeiro você precisará criar uma conta de desenvolver no Spotify e registrar seu aplicativo:\n#### 1) Criar uma conta no Spotify\n\u003e Para utilizar a Web API, é necessário que você tenha uma conta de usuário (premium ou gratuita).\n\u003e Crie uma conta gratuita em [www.spotify.com](www.spotify.com).\n\u003e Após criar a conta, acesse a página `Dashboard` [https://developer.spotify.com/dashboard](https://developer.spotify.com/dashboard).\n\u003e\n\u003e ![](docs/dashboard-screenshot.jpg)\n\n#### 2) Registrar o Aplicativo\n\u003e Registre seu APP sem fins comerciais:\n![](docs/app-registration-flow.jpg)\n\u003e Após concluir o registro você será redirecionado(a) para página de analytics do `React Pocket Spotify` onde serão revelados os tokens  `Client ID` e `Client Secret`. Você precisará apenas do ClientID para realizar as requisições do Spotify Web API.\n\u003e\n\u003e![](docs/app-account.jpg)\n\n## Fluxo de autenticação\n\u003e Nesse projeto vamos utilizar o fluxo implícito de concessão é para `clientes` implementados inteiramente usando JavaScript e em execução no navegador do proprietário do recurso.\n\u003e![](docs/grant-flow.png)\n\u003e\n\u003e Leia mais na seção `Implicit Grant Flow` em [https://developer.spotify.com/documentation/general/guides/authorization-guide](https://developer.spotify.com/documentation/general/guides/authorization-guide)\n\n## Endpoints\n* Documentação oficial: [https://developer.spotify.com/documentation/web-api/reference](https://developer.spotify.com/documentation/web-api/reference)\n\n#### Coleções utilizadas\n\u003e * [Get User's Profile](https://developer.spotify.com/documentation/web-api/reference/users-profile/get-current-users-profile/)\n\u003e * [Get a List of Categories](https://developer.spotify.com/documentation/web-api/reference/browse/get-list-categories/)\n\u003e * [Get a Category's Playlists](https://developer.spotify.com/documentation/web-api/reference/browse/get-categorys-playlists/)\n\u003e * [Get a Playlist's Items](https://developer.spotify.com/documentation/web-api/reference/playlists/get-playlists-tracks/)\n\n## Estrutura de arquivos e pastas\n\u003e A estrutura de pastas utilizada é conhecida como `Rails-Style Structure (function-first organization)` com um arquivo index por pasta de _feature_ levemente inspirada no [Destiny: Prettier for File Structures](https://github.com/benawad/destiny):\n\n```bash\n.\n├── actions\n│   ├── auth.js\n│   ├── content.js\n│   ├── index.js\n│   └── user.js\n├── assets\n│   ├── icons\n│   │   ├── spotify-icon-green.svg\n│   │   └── spotify-icon-white.svg\n│   ├── images\n│   │   ├── app-intro-1.jpg\n│   │   └── app-intro-2.jpg\n│   └── logos\n│       ├── spotify-logo-green.svg\n│       └── spotify-logo-white.svg\n├── components\n│   ├── Loading\n│   │   ├── Loading.jsx\n│   │   └── Loading.scss\n│   ├── Logo\n│   │   └── Logo.jsx\n│   ├── RouteHeader\n│   │   ├── RouteHeader.jsx\n│   │   └── RouteHeader.scss\n│   ├── WelcomeBox\n│   │   ├── WelcomeBox.jsx\n│   │   └── WelcomeBox.scss\n│   └── index.jsx\n├── config\n│   └── index.js\n├── constants\n│   ├── auth.js\n│   ├── content.js\n│   └── user.js\n├── containers\n│   ├── App\n│   │   ├── App.jsx\n│   │   └── App.scss\n│   ├── Authorize\n│   │   ├── Authorize.jsx\n│   │   └── Authorize.scss\n│   ├── Categories\n│   │   ├── Categories.jsx\n│   │   ├── Categories.scss\n│   │   └── CategoryItem.jsx\n│   ├── Dashboard\n│   │   ├── Dashboard.jsx\n│   │   └── Dashboard.scss\n│   ├── Login\n│   │   ├── Login.jsx\n│   │   └── Login.scss\n│   ├── Player\n│   │   ├── Player.jsx\n│   │   └── Player.scss\n│   ├── Playlists\n│   │   ├── PlaylistItem.jsx\n│   │   ├── Playlists.jsx\n│   │   └── Playlists.scss\n│   ├── PrivateRoute\n│   │   └── PrivateRoute.jsx\n│   ├── Topbar\n│   │   ├── Topbar.jsx\n│   │   └── Topbar.scss\n│   ├── Tracks\n│   │   ├── Track.jsx\n│   │   ├── Track.scss\n│   │   ├── Tracks.jsx\n│   │   └── Tracks.scss\n│   └── index.jsx\n├── index.js\n├── modules\n│   ├── custom-hooks.js\n│   ├── endpoints.js\n│   ├── helpers.js\n│   ├── request.js\n│   └── url.js\n├── reducers\n│   ├── app.js\n│   ├── auth.js\n│   ├── content.js\n│   ├── index.js\n│   └── user.js\n├── routes\n│   ├── AuthorizeRoute.jsx\n│   ├── DashboardRoute.jsx\n│   ├── LoginRoute.jsx\n│   ├── PlaylistsRoute.jsx\n│   ├── TracksRoute.jsx\n│   └── index.jsx\n├── serviceWorker.js\n├── setupTests.js\n├── store\n│   └── index.js\n└── styles\n    ├── globalStyles.scss\n    ├── normalize.scss\n    └── reset.scss\n```\n\n## ‼️ Atributos `data-testid` Obrigatórios:\nPara que seu teste seja avaliado corretamente na plataforma é necessário que os `Componentes` e `Contêineres` tenham tenham os atributos `data-testid` atribuídos aos seguintes componentes\n\n```bash\n.\n├── components\n│   ├── Loading\n│   │   └── Loading.jsx ➡️ data-testid=\"loading\"\n│   ├── Logo\n│   │   └── Logo.jsx ➡️ data-testid=\"logo\"\n│   ├── RouteHeader\n│   │   └── RouteHeader.jsx ➡️ data-testid=\"route-header\"\n│   └── WelcomeBox\n│       └── WelcomeBox.jsx ➡️ data-testid=\"welcome-box\"\n└── containers\n    ├── App\n    │   └── App.jsx ➡️ data-testid=\"app\"\n    ├── Authorize\n    │   └── Authorize.jsx ➡️ data-testid=\"callback\"\n    ├── Categories\n    │   ├── Categories.jsx ➡️ data-testid=\"categories\"\n    │   └── CategoryItem.jsx ➡️ data-testid=\"category\"\n    ├── Dashboard\n    │   └── Dashboard.jsx ➡️ data-testid=\"dashboard\"\n    ├── Login\n    │   └── Login.jsx ➡️ data-testid=\"login\"\n    ├── Player\n    │   └── Player.jsx ➡️ data-testid=\"player\"\n    ├── Playlists\n    │   ├── PlaylistItem.jsx ➡️ data-testid=\"playlist\"\n    │   └── Playlists.jsx ➡️ data-testid=\"playlists\"\n    ├── Topbar\n    │   └── Topbar.jsx ➡️ data-testid=\"topbar\"\n    └── Tracks\n        ├── Track.jsx ➡️ data-testid=\"track\"\n        └── Tracks.jsx ➡️ data-testid=\"tracks\"\n```\n\n## Estado Inicial da Store\n\u003e \u003e![](docs/state.jpg)\n\n## Dependências Necessárias\n```json\n{\n    \"lodash\": \"^4.17.15\",\n    \"node-sass\": \"^4.14.0\",\n    \"prop-types\": \"^15.7.2\",\n    \"react-icons\": \"^3.10.0\",\n    \"react-ink\": \"^6.4.0\",\n    \"react-redux\": \"^7.2.0\",\n    \"react-router-dom\": \"^5.1.2\",\n    \"redux\": \"^4.0.5\",\n    \"redux-persist\": \"^6.0.0\"\n}\n```\nVocê pode instalar todas as dependências necessárias através utilizando o Yarn ou NPM:\n* **Yarn** ▶️ `yarn add lodash node-sass prop-types react-icons react-ink react-redux react-router-dom redux redux-persist`\n* **NPM** ▶️ `npm install --save lodash node-sass prop-types react-icons react-ink react-redux react-router-dom redux redux-persist`\n\n## Requisitos:\n* **[Node v13.8.0](https://nodejs.org/en/)** - ou superior, instalado em seu computador.\n* **[Create React App](https://github.com/facebook/create-react-app)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalissonrodrigo%2Fpocket-spotify-aceleradev-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwalissonrodrigo%2Fpocket-spotify-aceleradev-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalissonrodrigo%2Fpocket-spotify-aceleradev-react/lists"}