mariyzx/songify

Aplicação full-stack, responsável por 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.

🎵 Projeto Songify!

Nesse projeto desenvolvi uma aplicação Full-Stack, com front-end em React e back-end com MySQL e Node.js, responsável por 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, consumindo a própria API desenvolvida no back-end. Estilizado com Styled Components e possuindo design responsivo!

🚀 Começando

Essas instruções permitirão que você obtenha uma cópia do projeto em operação na sua máquina local para fins de desenvolvimento e teste.

Consulte Instalação para saber como rodar o projeto.

📋 Pré-requisitos

Node

O projeto espera que sua versão do node seja a 18.

🔧 Instalação

Clone o repositório:

[email protected]:mariyzx/songify.git

ℹ️ Instale as dependências e rode com npm start na raíz do projeto.

📃 Como utilizar

ℹ️ Consulte o arquivo backend/.env.example para adicionar suas variáveis de ambiente! How to Connect to a Database with MySQL Workbench

ℹ️ Rode o banco de dados do projeto com o comando npx prisma migrate dev na pasta backend.

ℹ️ No arquivo frontend/api/api.tsx ele espera a porta que você definiu para o backend, não se esqueça de inseri-la!

ℹ️ Para rodar o backend utilize cd backend && npm run dev e para rodar o frontend utilize cd frontend && npm run dev

É necessário ter uma conta no projeto para listar as músicas, caso não tenha uma conta basta se cadastrar através do link Sign Up na página inicial.

⚙️ Executando os testes

Para executar os testes do projeto Songify basta ir até a pasta tests e utilizar o comando npm test.

🔩 Análise dos testes

Os testes verificam a renderização de cada componente e o fluxo das páginas. Dessa forma temos uma noção do funcionamento do sistema, além de verificar se ele está atendendo às normas apresentadas.

    const button = screen.getByRole('button', { name: /search/i });
    expect(button).toBeInTheDocument();

🛠️ Construído com

Front-end

• TypeScript
• Vite
• Zod
• React Hook Form
• Styled Components
• Vitest
• React Testing Library
• Polished
• React Switch
• React Icons

Back-end

• MySQL
• Node.js
• Prisma
• JWT
• Joi
• Express
• Nodemon

🖥 Preview

⚙️ Ajustes e melhorias

O projeto ainda está em desenvolvimento e as próximas atualizações serão voltadas nas seguintes tarefas:

• Aumentar fonte
• Transição nos links de navegação
• Estilizar página Not Found
• Retorno de sucesso ou erro na tela ao criar uma conta
• Botão do 'Songify' na tela de SignUp retorna para a tela de Login
• Cards de álbuns em disposição horizontal
• Indicações de músicas na tela inicial

💚 Connect: