Dashboarde ADM

Dashboard administrativo construído com Next.js 16 (App Router), TypeScript, Tailwind CSS v4, Shadcn/ui e PostgreSQL via Drizzle ORM.

Stack

Camada	Tecnologia
Framework	Next.js 16 — App Router
Linguagem	TypeScript (strict)
Estilo	Tailwind CSS v4 + Shadcn/ui
ORM	Drizzle ORM
Banco de dados	PostgreSQL 16 (Docker)
Runtime do BD	`postgres` (node-postgres driver)

Pré-requisitos

Antes de começar, certifique-se de ter instalado:

Node.js 20+
Docker Desktop — necessário para subir o PostgreSQL local

Verifique as versões:

node -v      # >= 20
docker -v    # qualquer versão recente

Configuração inicial (primeira vez)

Execute os passos abaixo uma única vez após clonar o repositório.

1. Instalar dependências

npm install

2. Configurar variáveis de ambiente

cp .env.local.example .env.local

O arquivo .env.local já vem pré-configurado para o banco local:

DATABASE_URL=postgresql://postgres:postgres@localhost:5433/appdb

Não altere os valores para desenvolvimento local — eles correspondem exatamente ao serviço definido em docker-compose.yml.

3. Subir o banco de dados

npm run db:start

Isso inicia o container postgres:16-alpine em background na porta 5432.

4. Aplicar o schema

npm run db:push

Cria as tabelas projects e tasks no banco. Não gera arquivos de migração — ideal para desenvolvimento local.

Subindo o servidor local

Com o banco já configurado (passos acima feitos):

Terminal 1 — banco de dados:

npm run db:start

Terminal 2 — aplicação + sync do vault (tudo junto):

npm run dev:full

Isso inicia dois processos em paralelo no mesmo terminal:

Processo	Porta / URL
Next.js (frontend + backend)	http://localhost:3000
Vault watcher (sync automático)	— (processo em background)

Se preferir rodar separado:

# apenas o Next.js
npm run dev

# apenas o watcher do vault
npm run vault:sync

O Next.js serve simultaneamente o frontend (React) e o backend (API Routes / Server Actions). Não há um processo de servidor separado.

Referência de comandos

Desenvolvimento

Comando	O que faz
`npm run dev:full`	Inicia Next.js + vault watcher juntos (recomendado)
`npm run dev`	Inicia apenas o servidor Next.js
`npm run vault:sync`	Inicia apenas o watcher do vault Obsidian
`npm run build`	Gera o build de produção
`npm run start`	Serve o build de produção localmente
`npm run lint`	Roda o ESLint no projeto

Banco de dados

Comando	O que faz
`npm run db:start`	Sobe o container PostgreSQL em background
`npm run db:stop`	Para e remove o container (dados persistem no volume)
`npm run db:push`	Aplica o schema atual ao banco sem gerar migrações
`npm run db:studio`	Abre o Drizzle Studio em http://local.drizzle.studio

Estrutura do banco de dados

Schema definido em src/db/schema.ts.

Tabela `projects`

Coluna	Tipo	Descrição
`id`	`uuid` PK	Identificador único (gerado automaticamente)
`title`	`text`	Nome do projeto
`status`	`text`	Status atual (default: `"active"`)
`createdAt`	`timestamptz`	Data de criação (default: `now()`)
`updatedAt`	`timestamptz`	Data da última atualização
`dueDate`	`timestamptz`	Prazo do projeto

Tabela `tasks`

Coluna	Tipo	Descrição
`id`	`uuid` PK	Identificador único (gerado automaticamente)
`title`	`text`	Título da tarefa
`status`	`text`	Status atual (default: `"todo"`)
`priority`	`int`	Prioridade numérica (default: `0`)
`projectId`	`uuid` FK → `projects.id`	Projeto ao qual pertence
`createdAt`	`timestamptz`	Data de criação (default: `now()`)
`updatedAt`	`timestamptz`	Data da última atualização
`dueDate`	`timestamptz`	Prazo da tarefa

Sync com o Obsidian Vault

O script scripts/sync-vault.ts monitora a pasta do vault em tempo real e popula o banco automaticamente.

Como funciona

Obsidian Vault
  └── work/
        ├── active/   ──►  tabela projects  (status = frontmatter.status ?? "active")
        └── archive/  ──►  tabela projects  (status = frontmatter.status ?? "active")

Cada nota .md
  └── checkboxes  ──►  tabela tasks
        - [ ] Tarefa pendente   →  status: "todo",  priority: posição no arquivo
        - [x] Tarefa concluída  →  status: "done",  priority: posição no arquivo

Mapeamento frontmatter → banco

Frontmatter da nota	Coluna no banco	Fallback
`title:`	`projects.title`	Nome do arquivo sem `.md`
`status:`	`projects.status`	`"active"`
`dueDate:`	`projects.dueDate`	`null`

Configurar o caminho do vault

O VAULT_PATH no .env.local deve apontar para a raiz do seu vault:

VAULT_PATH=C:\Users\Celso Lima\obsidian-mind

Se a variável não estiver definida, o script usa o caminho padrão acima como fallback.

Comportamento do watcher

Evento	Ação no banco
Arquivo criado / modificado	Upsert do projeto + reescrita completa das tasks
Arquivo deletado	Remove o projeto e todas as tasks vinculadas
Arquivo sem checkboxes	Upsert do projeto, tasks ficam vazias

Os IDs são determinísticos (derivados do caminho do arquivo) — rodar o sync múltiplas vezes nunca cria duplicatas.

Conectar ao banco via psql

psql postgresql://postgres:postgres@localhost:5433/appdb

Ou com flags separadas:

psql -h localhost -p 5432 -U postgres -d appdb
# senha: postgres

Resolução de problemas

Porta 5432 já em uso

# Verifique o processo usando a porta
netstat -ano | findstr :5432          # Windows
lsof -i :5432                         # macOS / Linux

# Pare o container se ele já estiver rodando
npm run db:stop
npm run db:start

Container sobe mas `db:push` falha

Certifique-se de que o .env.local existe e contém DATABASE_URL:

# Windows (PowerShell)
Get-Content .env.local

# macOS / Linux
cat .env.local

`vault:sync` falha com "DATABASE_URL is not set"

O script lê .env.local automaticamente via --env-file. Certifique-se de que o arquivo existe:

# Windows (PowerShell)
Test-Path .env.local   # deve retornar True
Get-Content .env.local # deve mostrar DATABASE_URL e VAULT_PATH

`vault:sync` inicia mas não encontra arquivos

Verifique se VAULT_PATH aponta para a raiz correta do vault (onde existem as pastas work/active/ e work/archive/):

# Confirmar que os diretórios existem
Test-Path "$env:VAULT_PATH\work\active"
Test-Path "$env:VAULT_PATH\work\archive"

Resetar o banco (apagar todos os dados)

npm run db:stop
docker volume rm dashboarde-adm_postgres_data
npm run db:start
npm run db:push

Deploy

O projeto está pronto para deploy na Vercel. Configure a variável DATABASE_URL apontando para um PostgreSQL de produção (ex: Neon, Supabase, Railway).

Consulte a documentação de deploy do Next.js para mais detalhes.

Obsidian-Dashboard