Uma aplicação web moderna para gerenciar e visualizar dados em tempo real, construída com as tecnologias mais recentes do ecossistema JavaScript/TypeScript.
- Next.js 16.2 - Framework React com SSR/SSG
- React 19 - Biblioteca UI moderna
- TypeScript 5 - Type safety para JavaScript
- Prisma - ORM type-safe para bancos de dados
- PostgreSQL - Banco de dados relacional
- Tailwind CSS 4 - Utility-first CSS framework
- ESLint 9 - Linter para qualidade de código
- Node.js 18+
- pnpm (recomendado) ou npm
- PostgreSQL 12+ (ou Docker para usar containerização)
A forma mais fácil de executar o projeto é com Docker Compose, que gerencia tanto o banco de dados quanto a aplicação:
-
Certifique-se de ter Docker e Docker Compose instalados.
-
Clone o repositório:
git clone <seu-repositorio>
cd streamingdb- Copie o arquivo de ambiente:
cp .env.example .env.local- Inicie os serviços com Docker Compose:
docker-compose up -d- A aplicação estará disponível em http://localhost:3000
# Ver logs da aplicação
docker-compose logs -f app
# Acessar shell da aplicação
docker-compose exec app sh
# Acessar console do Prisma Studio
docker-compose exec app pnpm prisma studio
# Parar os serviços
docker-compose down
# Parar e remover volumes (limpar tudo)
docker-compose down -v
# Rebuild das imagens
docker-compose build --no-cacheEdite o arquivo .env.local para customizar:
POSTGRES_USER=streamingdb_user
POSTGRES_PASSWORD=streamingdb_password
POSTGRES_DB=streamingdb
NODE_ENV=production
NEXT_PUBLIC_API_URL=http://localhost:3000- Clone o repositório:
git clone <seu-repositorio>
cd streamingdb- Instale as dependências:
pnpm install- Configure as variáveis de ambiente:
cp .env.example .env.local- Configure a variável
DATABASE_URLno arquivo.env.local:
DATABASE_URL="postgresql://usuario:senha@localhost:5432/streamingdb"
- Execute as migrações do Prisma:
pnpm prisma migrate devInicie o servidor de desenvolvimento:
pnpm devAbra http://localhost:3000 no navegador para ver o resultado.
O aplicativo será recarregado automaticamente quando você editar os arquivos.
streamingdb/
├── app/ # Aplicação Next.js App Router
│ ├── page.tsx # Página principal
│ ├── layout.tsx # Layout raiz
│ └── globals.css # Estilos globais
├── prisma/ # Configuração e schema do Prisma
│ └── schema.prisma # Definição do modelo de dados
├── public/ # Arquivos estáticos
├── package.json # Dependências do projeto
├── tsconfig.json # Configuração TypeScript
├── next.config.ts # Configuração Next.js
└── eslint.config.mjs # Configuração ESLint
pnpm dev- Inicia servidor de desenvolvimentopnpm build- Compila para produçãopnpm start- Inicia servidor em produçãopnpm lint- Executa verificações de lintingpnpm prisma studio- Abre Prisma Studio para gerenciar dados
pnpm build
pnpm startO projeto usa Prisma como ORM. Para gerenciar o banco de dados:
# Criar nova migração
pnpm prisma migrate dev --name nome_da_migracao
# Visualizar dados
pnpm prisma studio
# Resetar banco (cuidado!)
pnpm prisma migrate resetO projeto utiliza Tailwind CSS para estilização. Os estilos globais estão em app/globals.css.
MIT
Sinta-se à vontade para abrir issues e pull requests.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.