Trybetunes Reworked

📌 Sobre o projeto:

Foi desenvolvida uma aplicação capaz de reproduzir músicas das mais variadas bandas e artistas, criar uma lista de músicas favoritas e editar o perfil da pessoa usuária logada.

Funcionalidades

• Fazer login;
• Pesquisar por uma banda ou artista;
• Listar os álbuns disponíveis dessa banda ou artista;
• Visualizar as músicas de um álbum selecionado;
• Reproduzir uma prévia das músicas deste álbum;
• Favoritar e desfavoritar músicas;
• Ver a lista de músicas favoritas;
• Ver o perfil da pessoa logada;
• Editar o perfil da pessoa logada;

Aprendizados

• Fazer requisições para uma API de música
• Criar formulário dinâmico para editar dados do usuário
• Criar uma página de login
• Criar html que reproduza aúdio
• Criar filtro de pesquisa

✨ Como ficou o projeto?

Deploy da aplicação

https://trybetunes-reworked.vercel.app

Figma do projeto

https://www.figma.com/design/pHZC96tiC6PZhGKX8hEJ8s/TrybeTunes-Reworked?node-id=4-2&t=uaNWPsPhrPDDCDLS-1

Como está o localStorage?

🖥 Quais tecnologias foram utilizadas?

Frameworks e bibliotecas (versões utilizadas)

  - Next: 14.2.12
  - React: 18
  - Typescript: 5
  - Sass/Scss: 1.79.1

🔎 Como me localizar no projeto?

Todos os arquivos de código fonte do projeto estão em: ./src

Como o projeto está estruturado?

• ./src/app: Este projeto com o App Router, entretanto não temos nenhuma outra rota. Então esta pasta você pode localizar a página principal, scss global, o layout com as configurações e o favicon do site.

• ./src/assets: Onde está todas as imagens e os ícones que vão ser usadas no projeto.

• ./src/components: Onde está os componentes que serão reutilizados em diversas partes do código.

• ./src/contexts: Os contexts são onde separamos os dados que serão compartilhados com toda a aplicação, neste projeto possue dois contextos:

  • 'music-provider.tsx' é o responsável por fornecer dados sobre músicas para a aplicação.
  • 'user-provider.tsx' é o responsável por fornecer dados sobre usuários para a aplicação.

Como rodar o projeto na minha máquina?

• Vale ressaltar que já está o link do site no topo desta documentação. Mas caso queira analisar o código fonte fique a vontade para instalar este case na sua máquina! Tutorial a baixo:

• Antes de tudo, você precisa ter o Git instalado no seu computador. O Git é uma ferramenta que permite clonar e gerenciar repositórios de código.

  • Windows: Baixe o Git aqui e siga as instruções de instalação.
  • macOS: Você pode instalar o Git aqui ou usando o Homebrew com o comando brew install git:

    brew install git

  • Linux: Use o gerenciador de pacotes da sua distribuição, por exemplo para Debian/Ubuntu:

    sudo apt install git

• Abra o terminal (no Windows, você pode usar o Git Bash, que é instalado junto com o Git).

• Navegue até o diretório onde deseja armazenar o projeto.

• Execute o comando para clonar o repositório:

  [email protected]:DevPBDias/legaplan-teste-tecnico.git

• Após clonar o repositório, navegue até a pasta do projeto

  cd legaplan-teste-tecnico

• Agora você pode abrir os arquivos do projeto com seu editor de texto ou IDE preferido. Exemplo do vsCode:

  code .

• 🚨 Não esqueça que para não ocorrer erros no código ao clonar ele, você deve fazer o comando abaixo 🚨

  npm i   

• Pronto! Todo o site estará funcionado na sua máquina. Porém, caso precise de alguma ajuda em algo entre em contato comigo pelo meu Linkedin.

🤝🏼 Vamos nos conectar?

🎉 É isso! Este é o projeto finalizado, caso tenha ficado com alguma dúvida ou deseje complementar algo diretamente comigo você pode estar entrando em contato através do meu Linkedin.

🚀 Se gostou desse projeto, confira mais projetos como este no meu Portfolio.

👋🏻 Obrigado pela atenção e espero que tenha gostado do que tenha visto aqui, que tal agora dar uma olhada nos meus outros repositórios?

❤️ Créditos

Créditos dos emojis

https://emojipedia.org

Créditos dos ícones

https://marwin1991.github.io/profile-technology-icons/