AudioTag é uma plataforma de compartilhamento de bandas e de seus clipes desenvolvido durante o curso de prática de React.js da Alura que consome dados externo de um mock de API, e utiliza ContextAPI e React Router Dom
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | AudioTag |
| 🏷️ Tecnologias | javascript, html, css, module css, npm, react, jsx |
| 🚀 URL | https://audio-tag.vercel.app/ |
| 🖥 Curso | https://cursos.alura.com.br/course/react-praticando-react-js |
Este projeto é uma Single Page Application (SPA) desenvolvido em ReactJS utilizando React Router e ContextAPI para compartilhamento de dados entre as páginas da aplicação.
Para que o projeto funcione corretamente, é necessário instalar as dependências do projeto. Para isso, basta executar o comando abaixo no terminal:
npm installNo diretório do projeto, você pode executar:
npm startCom o comando acima, você irá rodar o projeto em modo de desenvolvimento que pode ser acessado em http://localhost:3000 no seu navegador.
Visto que o projeto é uma SPA, o mesmo funciona como uma página só, através de rotas gerenciadas pelo React Router:
As rotas consistem em duas abas, uma de Home Page que possui cards de bandas, que são consumidas através de uma API usada com Mock pelo do My-JSON-Server, onde seu repositório pode ser acessado clicando aqui.
Para cada página de artigo, o conteúdo é renderizado em uma rota dinâmica videos/:id com o conteúdo de json consumido pela Fake API do My-JSON-Server, possibilitando uma variedade de bandas:
Cada card possui um botão de favorito, onde é compartilhado o contexto entre as páginas de Início e Favoritos. Além disso, ao apertar na imagem da banda é possível acessar seus video clipes provindos da Fake API. Quando o card é favoritado, o mesmo é inserido na lista de favoritos localizada na aba de Favoritos, além de ser salvo no localStorage do navegador.
