Módulo de Front-End | Projeto do Bloco 12 - Ciclo de Vida de Componentes e React Router do curso de Desenvolvimento Web da Trybe.
Uma aplicação para pesquisar e listar álbuns/músicas de várias bandas e artistas, ouvir um preview de 29 segundos de cada música e fazer uma lista das suas músicas favoritas. Também é possível personalizar seu perfil de usuário.
API utilizada neste projeto: iTunes Search API
Desenvolvido com ReactJs e TailwindCSS.
Quantidade de requisitos: 14
Requisitos feitos: 11
Requisitos feitos após refatoração: 14
URL do projeto: https://project-trybetunes-nu.vercel.app/
- Fazer requisições e consumir dados vindos de uma API
- Utilizar os ciclos de vida de um componente React
- Utilizar a função setState de forma a garantir que um determinado código só é executado após o estado ser atualizado
- Utilizar o componente BrowserRouter corretamente
- Criar rotas, mapeando o caminho da URL com o componente correspondente, via Route
- Utilizar o Switch do React Router
- Criar links de navegação na aplicação com o componente Link
React
TailwindCSS.
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── assets
│ │ ├── icons
│ │ │ ├── fav.svg
│ │ │ ├── search.svg
│ │ │ └── user.svg
│ │ └── images
│ │ ├── blue-bg.svg
│ │ └── logo.svg
│ ├── components
│ │ ├── FavoriteMusicCard.jsx
│ │ ├── Header.jsx
│ │ ├── Loading.jsx
│ │ └── MusicCard.jsx
│ ├── pages
│ │ ├── Album.jsx
│ │ ├── Favorites.jsx
│ │ ├── Login.jsx
│ │ ├── NotFound.jsx
│ │ ├── ProfileEdit.jsx
│ │ ├── Profile.jsx
│ │ └── Search.jsx
│ ├── routes
│ │ └── routes.js
│ ├── services
│ │ ├── favoriteSongsAPI.js
│ │ ├── musicsAPI.js
│ │ ├── searchAlbumsAPI.js
│ │ └── userAPI.js
│ ├── App.js
│ ├── index.css
│ └── index.js
├── .env
├── .gitignore
├── .npmrc
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
└── tailwind.config.js
