🔗 encurta.ai

Encurtador de links inteligente — encurte, organize e acompanhe os cliques dos seus links em segundos.

App de referência do curso "Claude Code do Zero". Monorepo full-stack, tipado de ponta a ponta, com dashboard de analytics, autenticação e redirecionamento real dos links curtos.

---

✨ Funcionalidades

• Autenticação — cadastro, login e "esqueci a senha" (JWT em cookie httpOnly + bcrypt)
• Onboarding — primeiro acesso guiado
• Dashboard — cartões de métricas, gráfico de cliques por dia e ranking dos top links
• Meus Links — criar, buscar, copiar, ativar/desativar e excluir
• Encurtamento real — GET /:slug redireciona (302) e registra o clique de forma assíncrona
• Design system próprio — extraído do Figma, com Tailwind + componentes acessíveis

---

🧱 Stack

Camada	Tecnologias
Front	React 18, Vite, TanStack Router + Query, React Hook Form, Zod, Recharts
UI	Tailwind CSS, design system próprio (@encurta/ui), lucide-react, sonner
Back	Fastify 5, Prisma 5, SQLite, jose (JWT), bcryptjs
Contratos	Zod compartilhado (@encurta/shared) — mesmos schemas no front e back
Monorepo	pnpm workspaces + Turborepo

---

📁 Estrutura

encurtaai-pronto/
├── apps/
│   ├── app/        # SPA React (Vite) — o painel
│   └── api/        # API Fastify + Prisma + SQLite
├── packages/
│   ├── ui/         # design system (Tailwind preset + componentes)
│   └── shared/     # schemas Zod + tipos compartilhados
├── turbo.json
└── pnpm-workspace.yaml

---

🚀 Começando

Pré-requisitos: Node 20+ e pnpm 10+ (npm i -g pnpm).

# 1. Instala tudo e prepara o banco (migração + seed com dados de exemplo)
pnpm install
pnpm setup

# 2. Sobe front e back juntos
pnpm dev

• Painel: http://localhost:5173
• API: http://localhost:3333

🔑 Conta demo (já vem no seed)

e-mail: demo@encurta.ai
senha:  demo12345

---

🧰 Scripts

Comando	O que faz
pnpm dev	Sobe app (5173) e api (3333) em paralelo
pnpm setup	install + migração do banco + seed
pnpm build	Build de produção de todos os pacotes
pnpm typecheck	Checagem de tipos em todo o monorepo
pnpm db:studio	Abre o Prisma Studio para inspecionar o banco
pnpm db:reset	Reseta o banco e roda o seed novamente

---

🔗 Como o link curto funciona

1. No painel você cria um link (URL de destino + apelido opcional).
2. O back gera/valida o slug e salva no SQLite.
3. Ao acessar http://localhost:3333/<slug>, a API:
   • valida se o link existe, está ativo e não expirou;
   • registra o clique (referer + user-agent) sem bloquear o redirect;
   • responde 302 para a URL de destino.
4. O dashboard agrega os cliques por dia, total, "hoje" e ranking.

---

⚙️ Configuração

Copie os exemplos de ambiente (o pnpm setup já usa valores padrão de dev):

cp apps/api/.env.example apps/api/.env
cp apps/app/.env.example apps/app/.env   # opcional

Variável (api)	Padrão	Descrição
DATABASE_URL	file:./dev.db	Banco SQLite local
JWT_SECRET	(dev secret)	Assinatura do cookie de sessão
PORT	3333	Porta da API
WEB_ORIGIN	http://localhost:5173	Origem liberada no CORS

Variável (app)	Padrão	Descrição
VITE_API_URL	http://localhost:3333	URL da API

---

Feito com 💙 para o curso Claude Code do Zero.