Loading repository data…
lucassmaniotto / repository
AudioTag
App que consome video-clipes de uma FakeAPI desenvolvido durante o curso de prática de React.js da Alura
#css#fake-api#html#javascript#module-css#react
Live repository statistics
★ 2Stars
⑂ 0Forks
◯ 0Open issues
◉ 2Watchers
42/100
OPENREPOHUB HEALTH SIGNAL
Limited signals
A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
30
Community adoption25% weight
5
Maintenance state20% weight
100
License clarity10% weight
0
Project information10% weight
100
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
README preview
AudioTag
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
| :placard: Vitrine.Dev | |
|---|---|
| :sparkles: Nome | AudioTag |
| :label: Tecnologias | javascript, html, css, module css, npm, react, jsx |
| :rocket: URL | https://audio-tag.vercel.app/ |
| 🖥 Curso | https://cursos.alura.com.br/course/react-praticando-react-js |
Detalhes do projeto
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.
⚙️ Configurando o projeto
Para que o projeto funcione corretamente, é necessário instalar as dependências do projeto. Para isso, basta executar o comando abaixo no terminal:
npm install
▶️ Executando o projeto
No diretório do projeto, você pode executar:
npm start
Com o comando acima, você irá rodar o projeto em modo de desenvolvimento que pode ser acessado em http://localhost:3000 no seu navegador.
📚 Bibliotecas
💡 Funcionalidades
Rotas
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.
Renderização de bandas
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:
Favoritando 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.
