Este projeto é um clone educacional de uma plataforma de vídeos estilo Netflix, desenvolvido do zero como parte dos meus estudos em desenvolvimento full stack.
📚 O projeto foi construído com base em um curso da OneBitCode, onde eu não clonei nenhum repositório: reescrevi cada parte manualmente para reforçar o aprendizado.
Pagina Home
Pagina Profile
Pagina Curso
pagina Episódio
Pagina Login
Pagina Registro de Usuario
Pagina Inicial
Painel Administrativo
- Next.js 13.4.1 - Framework React com SSR
- React 18.2.0 - Biblioteca para interfaces
- TypeScript 4.7.4 - Tipagem estática
- Sass/SCSS - Pré-processador CSS
- Bootstrap 5.2.3 - Framework CSS
- SWR 2.1.5 - Hooks para data fetching
- React Player 2.12.0 - Player de vídeo
- Axios 1.4.0 - Cliente HTTP
- Node.js - Runtime JavaScript
- Express.js 4.17.2 - Framework web
- TypeScript 4.5.4 - Tipagem estática
- Sequelize 6.13.0 - ORM para PostgreSQL
- PostgreSQL - Banco de dados relacional
- JWT 8.5.1 - Autenticação por tokens
- Bcrypt 5.0.1 - Criptografia de senhas
- AdminJS 5.5.1 - Painel administrativo
- Registro e login de usuários
- Autenticação JWT
- Proteção de rotas privadas
- Gerenciamento de sessões
- Listagem de cursos por categoria
- Sistema de episódios com player de vídeo
- Controle de tempo de visualização
- Busca de cursos por nome
- Sistema de favoritos
- Sistema de likes/curtidas
- Perfil do usuário com dados editáveis
- Alteração de senha
- Cursos organizados por categorias
- Cursos em destaque (featured)
- Cursos mais recentes
- Navegação por slides
- Dashboard com estatísticas
- Gerenciamento de cursos
- Upload de vídeos e thumbnails
- Interface administrativa integrada
- Arquitetura MVC no backend
- Separação de responsabilidades (Services, Controllers, Models)
- Middleware de autenticação
- Tratamento de erros centralizado
- APIs RESTful
- Comunicação via Axios
- Gerenciamento de estado com SWR
- Tratamento de loading e erros
- Componentização com React
- Styling com SCSS modules
- Responsividade com Bootstrap
- Animações com AOS (Animate On Scroll)
- Modelagem de dados com Sequelize
- Relacionamentos entre tabelas
- Migrações e seeders
- Queries otimizadas
- Criptografia de senhas com bcrypt
- Autenticação JWT
- Validação de dados
- Proteção contra ataques comuns
onebitflix/
├── backend/ # API REST
│ ├── src/
│ │ ├── controllers/ # Controladores da API
│ │ ├── models/ # Modelos do Sequelize
│ │ ├── services/ # Lógica de negócio
│ │ ├── middlewares/ # Middlewares (auth, etc.)
│ │ ├── database/ # Migrações e seeders
│ │ └── admin.js/ # Painel administrativo
│ └── uploads/ # Arquivos de mídia
├── frontend/ # Aplicação Next.js
│ ├── pages/ # Páginas da aplicação
│ ├── src/
│ │ ├── components/ # Componentes React
│ │ ├── services/ # Serviços de API
│ │ └── styles/ # Estilos SCSS
│ └── public/ # Arquivos estáticos
---
🚀 Como rodar o projeto
Pré-requisitos
- Node.js (versão 16 ou superior)
- PostgreSQL
- npm ou yarn
1. Clone o repositório
```bash
git clone https://github.com/mauriciodalligna/onebitflix.git
cd onebitflix
cd backend
# Instale as dependências
npm install
# Configure as variáveis de ambiente
cp .env.example .env
# Edite o arquivo .env com suas configurações
# Configure o banco de dados
npx sequelize-cli db:migrate
npx sequelize-cli db:seed:all
# Inicie o servidor
npm run devcd frontend
# Instale as dependências
npm install
# Configure as variáveis de ambiente
cp .env.example .env.local
# Edite o arquivo .env.local com suas configurações
# Inicie o servidor de desenvolvimento
npm run dev- Frontend: http://localhost:3001
- Backend: http://localhost:3000
- Admin Panel: http://localhost:3000/admin
DB_HOST=localhost
DB_USER=postgres
DB_PASS=sua_senha
DB_NAME=onebitflix_development
DB_PORT=5432
JWT_SECRET=seu_jwt_secretNEXT_PUBLIC_BASEURL=http://localhost:3000O projeto conta com um painel administrativo completo via AdminJS, acessível em:
Você pode criar, editar ou excluir conteúdos diretamente pelo painel administrativo:
- 📺 Vídeos – Faça upload de novos episódios, altere títulos ou substitua os arquivos de vídeo
- 🖼️ Imagens – Altere as capas dos cursos com novas thumbnails personalizadas
- 📚 Cursos – Gerencie categorias, descrições, destaques e organização geral
As alterações feitas no AdminJS refletem automaticamente na interface do usuário (frontend).
- Registro com validação de dados
- Login com JWT
- Proteção de rotas
- Logout seguro
- Controle de reprodução
- Salvamento de tempo de visualização
- Navegação entre episódios
- Interface responsiva
- Busca em tempo real
- Filtros por categoria
- Resultados paginados
- Histórico de busca
- Adicionar/remover favoritos
- Sistema de likes
- Perfil personalizado
- Estatísticas de uso
O projeto apresenta uma interface moderna e responsiva, inspirada na Netflix, com:
- Design responsivo para desktop, tablet e mobile
- Animações suaves com AOS (Animate On Scroll)
- Slides interativos para navegação
- Player de vídeo customizado
- Modais para interações
- Toasts para feedback do usuário
- Lazy loading de componentes
- Code splitting automático do Next.js
- Cache inteligente com SWR
- Tratamento de erros robusto
- Loading states para melhor UX
- Sistema de busca avançado
- Controle de tempo de visualização
- Painel administrativo completo
- Upload de arquivos integrado
- Validações de formulário
Durante o desenvolvimento, enfrentei e resolvi diversos desafios:
- SSR Issues: Problemas de hidratação no Next.js
- Autenticação: Implementação segura de JWT
- Upload de Arquivos: Configuração do AdminJS
- Relacionamentos: Complexidade do Sequelize
- Estado Global: Gerenciamento de autenticação
- Performance: Otimização de queries e cache
Este é um projeto educacional, mas sugestões e melhorias são sempre bem-vindas!
- Faça um fork do projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Maurício - Desenvolvedor Full Stack
- LinkedIn: https://www.linkedin.com/in/mauricio-durante-dall-igna/
- GitHub: https://github.com/Mauriciodalligna
- Email: mauriciodalligna@gmail.com
- OneBitCode pela excelente base educacional
- Comunidade React/Next.js pelo suporte
- Stack Overflow pelos inúmeros insights
Este projeto foi desenvolvido exclusivamente para fins educacionais. É um clone da Netflix focado em cursos de programação, demonstrando habilidades em desenvolvimento full stack.
⭐ Se este projeto te ajudou, considere dar uma estrela!