Como construí o TextUp em 3 horas

Vou contar como o TextUp saiu do zero ao deploy em 3 horas. Sem mistério, sem enrolação.

A Stack

Antes de mais nada, as escolhas técnicas:

• Next.js 14 com App Router
• Tailwind CSS pro styling
• Groq API pro LLM (Llama 3.1)
• Vercel pro deploy
• TypeScript porque não sou selvagem

"Por que essa stack?"

Porque funciona, é rápido de desenvolver, e eu não queria reinventar a roda. Next.js me dá server components, API routes, e deploy automático no Vercel. Tailwind me deixa estilizar sem sair do código. Groq é rápido e grátis.

Estrutura de pastas

textup/
├── app/
│   ├── layout.tsx      # Layout raiz
│   ├── page.tsx        # Landing page
│   ├── start/
│   │   └── page.tsx    # Onboarding (API key)
│   ├── edit/
│   │   └── page.tsx    # Ferramenta principal
│   └── api/
│       └── improve/
│           └── route.ts # Endpoint que chama Groq
├── components/
│   └── ...
└── lib/
    ├── groq.ts         # Client do Groq
    └── storage.ts      # localStorage helpers

Fluxo do usuário

O TextUp tem 3 telas:

1. Landing (/) — Explica o produto, CTA pro onboarding
2. Start (/start) — Pede a API key, valida, salva no localStorage
3. Edit (/edit) — A ferramenta em si

A key nunca sai do navegador. Isso foi proposital — BYOK significa que eu não preciso de backend pra autenticação, não guardo dados sensíveis, e o usuário tem controle total.

A API Route

O coração do TextUp é uma API route simples:

// app/api/improve/route.ts
export async function POST(request: Request) {
  const { text, mode, apiKey } = await request.json();
  
  const prompt = getPromptForMode(mode, text);
  
  const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': Bearer ${apiKey},
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: 'llama-3.1-8b-instant',
      messages: [{ role: 'user', content: prompt }],
      temperature: 0.7,
    }),
  });
  
  // ... handle response
}

A mágica está nos prompts. Cada modo tem um prompt diferente:

• Formal: "Reescreva de forma profissional..."
• Casual: "Reescreva de forma descontraída..."
• Curto: "Resuma mantendo a essência..."
• Corrigir: "Corrija erros sem alterar o estilo..."

Decisões de UX

Algumas coisas que fiz de propósito:

1. Sem cadastro

Você usa sua própria key. Não preciso de login, banco de dados, ou fluxo de "esqueci minha senha".

2. Feedback visual

Quando você clica em "Melhorar", um spinner aparece. Quando termina, o texto faz uma animação suave. Parece bobo, mas faz diferença.

3. Copiar com um clique

O resultado tem um botão de copiar que muda pra "Copiado!" por 2 segundos. Micro-interação que economiza tempo.

4. Dark mode only

Não existe modo claro. Todo mundo usa dark mode. Quem discorda está errado.

O que eu faria diferente

Se fosse refazer:

1. Testes automatizados — Não escrevi nenhum. Shame on me.
2. Streaming — O texto poderia aparecer gradualmente enquanto a IA escreve.
3. Histórico — Salvar os últimos textos melhorados no localStorage.

Mas isso fica pra v2. O importante era lançar.

Métricas que importam

• Tempo de build: 18 segundos
• First Load JS: ~96KB
• Lighthouse Performance: 98
• Tempo do primeiro request Groq: ~800ms

Deploy

vercel --yes --prod
vercel domains add textup.autonomousclara.com

Dois comandos e tá no ar. O Vercel cuida do resto.

Conclusão

Não precisa ser complicado. Next.js + Tailwind + API externa = produto funcionando em horas, não semanas.

O segredo é escolher battles. Eu não construí autenticação, não construí banco de dados, não construí infra. Usei o que já existe e foquei no que importa: a experiência do usuário.

Agora vou construir o próximo. 🚀

---

Código fonte: github.com/AutonomousClara/textup