Este repositório contém o projeto de um Player de Música, desenvolvido como atividade prática para a disciplina de Programação Web Orientada a Objetos do curso Técnico em Informática para Internet Integrado ao Ensino Médio, oferecido pelo Instituto Federal do Paraná (IFPR) - Campus Assis Chateaubriand.
- Aluno: Henrique Tutomu Sagawa
- Orientador: Samuel Stephan Milczuk
- Objetivo: Desenvolver uma aplicação web para reprodução de músicas, com foco em boas práticas de programação orientada a objetos, integração com serviços externos (Firebase e NextAuth.js) e interface moderna utilizando frameworks CSS.
- Next.js: Framework React para desenvolvimento de aplicações web server-side e client-side.
- TypeScript: Superset do JavaScript para adicionar tipagem estática e evitar erros em tempo de execução.
- Firebase: Serviço backend para banco de dados em tempo real e armazenamento.
- NextAuth.js: Biblioteca de autenticação para Next.js.
- Next UI: Biblioteca de componentes para construir interfaces modernas e responsivas.
- Tailwind CSS: Framework de utilitários CSS para estilização rápida e eficiente.
- PostCSS: Ferramenta para processamento de CSS com plugins.
- Node.js: Plataforma para execução do JavaScript no backend.
O projeto segue uma organização modular e escalável, com separação de responsabilidades. A estrutura de pastas está configurada da seguinte forma:
src/
├── app/ # Páginas principais do projeto
│ ├── albuns/ # Página para gerenciamento de álbuns
│ ├── api/ # Endpoints de API
│ │ └── auth/ # Endpoints do NextAuth.js para autenticação
│ ├── contato/ # Página de contato
│ ├── dashboard/ # Painel de controle
│ ├── sobre/ # Página "Sobre" do player
│ ├── globals.css # Estilos globais
│ ├── layout.tsx # Layout principal
│ ├── page.tsx # Página inicial
│ └── providers.tsx # Configuração de provedores (ex.: autenticação)
├── components/ # Componentes reutilizáveis
├── lib/ # Código auxiliar e funções utilitárias
├── services/ # Serviços para integração com Firebase e outros
│ ├── albumService.ts # Gerenciamento de álbuns
│ ├── firebaseConnection.ts # Configuração e conexão com o Firebase
│ ├── musicService.ts # Serviço para manipulação de músicas
│ └── setFirebaseData.ts # Configuração de dados no Firebase
├── types/ # Tipagens TypeScript do projeto
public/ # Arquivos públicos, como imagens e ícones
.env # Variáveis de ambiente para configuração do Firebase e NextAuth
- Player de Música: Permite reproduzir, pausar e navegar entre músicas carregadas.
- Gerenciamento de Álbuns:
- Criar novos álbuns com nome, descrição e imagens.
- Listar álbuns disponíveis no sistema.
- Ver álbuns de outros usuários.
- Ouvir as músicas cadastradas.
- Autenticação com NextAuth.js:
- Login utilizando contas do Google, Github ou e-mail/senha.
- Gerenciamento de sessões de usuário.
- Controle de acesso a páginas e funcionalidades baseadas na autenticação.
- Banco de Dados em Tempo Real: Utilização do Firestore para armazenar informações de músicas, álbuns e usuários.
- Interface Responsiva: Totalmente adaptada para diferentes tamanhos de tela, utilizando o Tailwind CSS.
- Organização Modular: Arquitetura de código limpa e organizada, facilitando a manutenção e escalabilidade.
Antes de começar, você precisará ter as seguintes ferramentas instaladas em sua máquina:
- Node.js (versão 16 ou superior)
- npm ou yarn
- Conta no Firebase para configurar o backend do projeto.
- Credenciais OAuth 2.0 configuradas em Google Cloud Console para NextAuth.js.
Faça o clone do repositório em sua máquina local:
git clone https://github.com/seu-usuario/music-player.git
cd music-playerInstale as dependências do projeto com o seguinte comando:
npm install
# ou
yarn installCrie um arquivo .env na raiz do projeto e adicione as credenciais do Firebase e NextAuth.js:
# Firebase
NEXTAUTH_URL="Sua url aqui"
NEXTAUTH_SECRET="Sua chave aqui"
GOOGLE_CLIENT_ID="Sua chave aqui"
GOOGLE_CLIENT_SECRET="Sua chave aqui"
GITHUB_CLIENT_ID="Sua chave aqui"
GITHUB_SECRET="Sua chave aqui"
EDGE_STORE_ACCESS_KEY="Sua chave aqui"
EDGE_STORE_SECRET_KEY="Sua chave aqui"
EDGE_STORE_PROCESS_ENV=true- Acesse o Google Cloud Console.
- Crie um novo projeto ou selecione um existente.
- Vá para APIs e Serviços > Credenciais.
- Crie um ID do cliente OAuth 2.0 e configure o URI de redirecionamento para
http://localhost:3000/api/auth/callback/google. - Copie o
Client IDeClient Secrete insira no arquivo.env.
Inicie o servidor de desenvolvimento:
npm run dev
# ou
yarn devO projeto será executado no endereço http://localhost:3000.
- Programação Orientada a Objetos (POO): Criação de serviços e componentes reutilizáveis com foco na modularidade.
- Uso de Tipagem: Adoção do TypeScript para aumentar a confiabilidade do código.
- Integração com Firebase: Utilização de banco de dados em tempo real para sincronização de dados.
- Autenticação com NextAuth.js: Implementação de controle de acesso e segurança em páginas protegidas.
- Design Responsivo: Construção de uma interface adaptada para diferentes dispositivos.
- Componentização: Desenvolvimento de uma estrutura escalável utilizando Next.js.
Este projeto foi desenvolvido como parte de uma atividade acadêmica e não possui uma licença oficial de distribuição. Caso deseje reutilizar este código, entre em contato com o autor.
Caso tenha dúvidas, sugestões ou queira saber mais sobre o projeto:
- Aluno: Henrique Tutomu Sagawa
- Orientador: Samuel Stephan Milczuk
- Email: samuel.milczuk@ifpr.edu.br
- Instituição: Instituto Federal do Paraná - Campus Assis Chateaubriand