Hábitos

Um app de hábitos feito para ensinar React. O frontend é React 19 com Vite e React Router. O backend é Express 5, guardando os dados em SQLite com o node:sqlite do Node 24. O deck da aula "React na prática" vem junto, em /deck/.

• src/: o app React (páginas, componentes, estado, domínio)
• server/: a API REST, em /api
• public/deck/: os slides, com labs que editam o código do app ao vivo
• SPEC.md: a especificação completa (telas, API, arquitetura)
• slides/README.md: como o deck e os labs funcionam

Ver a apresentação

Com o app rodando (veja abaixo), abra /deck/ no navegador, no mesmo endereço do app:

• com Docker (produção): http://<host>:8080/deck/
• com npm run dev ou o serviço dev: http://<host>:5173/deck/

A página lista os decks; clique em "React na prática" (ou vá direto para /deck/aula-react/). As setas ou o espaço trocam de slide, F põe em tela cheia, #12 no fim do endereço abre o slide 12 e Esc mostra o app no centro da tela. Os labs (as chaves que ligam e desligam trechos do código) só funcionam no modo de desenvolvimento.

Rodar com Docker

Basta ter Docker com o plugin compose. O compose.yaml traz dois serviços:

Serviço	Para quê	Endereço
app	Build de produção: o Express serve o app, o deck e a API	http://<host>:8080
dev	Vite e API com recarga ao vivo, e os labs do deck funcionando	http://<host>:5173

Troque <host> pelo endereço da máquina que roda o Docker, por exemplo http://192.168.88.8:8080.

Produção (app)

docker compose up -d --build                  # monta a imagem e sobe em segundo plano
docker compose exec app node server/seed.js   # opcional: 5 hábitos e ~16 semanas de histórico
docker compose logs -f app                    # acompanhar os logs
docker compose down                           # parar (os dados continuam no volume)

O banco fica no volume habitos-data, então os dados continuam lá depois de um down. docker compose down -v apaga o volume, com os dados dentro.

Esta imagem não tem o Vite. Os slides abrem e mostram o app nos iframes, mas as chaves dos labs não funcionam, porque o endpoint /__lab só existe no servidor de desenvolvimento.

Desenvolvimento (dev)

docker compose --profile dev up --build dev

A pasta do projeto é montada dentro do container. Quando você edita um arquivo no host, o Vite atualiza o navegador. Quando você liga ou desliga uma chave de lab no deck, a mudança vai para o arquivo de verdade no host, como acontece no npm run dev. O node_modules e o banco ficam no container (o banco fica no volume habitos-dev-data), separados dos do host. Para popular o banco:

docker compose --profile dev exec dev npm run seed

Se você mudar o package.json, rode o comando com --build de novo e acrescente --renew-anon-volumes, para o container receber o node_modules novo.

A porta 5173 é a mesma do npm run dev; se as duas coisas rodarem ao mesmo tempo, a segunda não sobe. Pare uma delas ou mude a porta do host no compose.yaml (por exemplo, "5174:5173").

Só com docker (sem compose)

docker build -t habitos .
docker run -d --name habitos -p 8080:3001 -v habitos-data:/app/server/data habitos

Rodar sem Docker

Você vai precisar do Node 24 ou mais novo.

npm install
npm run seed        # opcional: dados de exemplo
npm run dev         # API na 3001, app e deck na 5173

Comando	O que faz
npm run dev	API (node --watch) e Vite juntos
npm run build	gera o build em dist/
npm test	testes unitários (Vitest)
npm run test:e2e	testes e2e (Cypress), com uma API e um banco separados
npm run slides:check	um print de cada slide e um aviso para texto vazando

Variáveis de ambiente

Variável	Padrão	Uso
API_PORT	3001	porta da API (e do app inteiro, na imagem de produção)
DB_FILE	server/data/habits.db	arquivo do SQLite
STATIC_DIR	(vazio)	pasta do build que o Express serve; a imagem usa dist
ENABLE_TEST_ROUTES	(vazio)	1 liga a rota /api/test/reset, usada pelo Cypress

Atenção

No servidor de desenvolvimento (o npm run dev ou o serviço dev), qualquer pessoa que alcance o endereço pode usar o /__lab para mudar os arquivos do código. Além disso, ?falhar em qualquer URL da API simula uma queda do servidor (em todos os modos). Não exponha o modo de desenvolvimento na internet.