Code Bites: um app de desafios rápidos pra devs sem tempo (feito por um dev sem tempo)
A ideia do Code Bites começou com um incômodo bem comum: eu queria praticar código no dia a dia, mas sem a pressão de sentar por uma hora, assistir vídeo ou abrir um projeto inteiro. Só queria algo que me desafiasse um pouco e me lembrasse que eu ainda tô afiado.
A maioria das plataformas ou são pesadas demais, ou têm um onboarding que já me faz desistir. Eu só queria um desafio curto e um feedback rápido.
🔨 Como construí
O app é feito com React + Vite + Tailwind + TypeScript, empacotado como uma SPA leve, hospedada no Cloudflare Pages. A ideia desde o início era: esse app tem que abrir rápido, rodar offline quando possível, e ter UX de extensão de navegador, não de app de curso.
Por isso eu:
Evitei qualquer back-end no MVP.
Modelei os desafios como arquivos .json, com um formato simples:
{
"id": "reverse-string",
"language": "javascript",
"title": "Inverter string",
"starterCode": "function reverse(str) {\n // escreva aqui\n}",
"testCases": [
{ "input": "\"abc\"", "output": "\"cba\"" }
]
}
Carrego esses desafios por linguagem e deixo o estado todo no localStorage, inclusive a streak do usuário.
Isso me permitiu focar 100% na interface e na experiência.
💡 Micro UX: cada segundo importa
Como a ideia do app é ser usado até no intervalo de um café, comecei a contar clicks e tempo até o primeiro desafio ser executado. Cortei tudo que atrapalhava:
Nada de autenticação
Nada de perfil
Nada de loading fake
Nada de botão “começar”
Você abre, já tem um desafio. Resolve, feedback instantâneo. Isso ajuda o dev a manter streaks de verdade sem virar escravo do sistema. A única gamificação é o streak, e ele só aparece depois do primeiro desafio resolvido. Sem firula.
📦 Extensão pra Chrome
Depois de um tempo usando o app eu mesmo, percebi que ele era perfeito como uma aba fixa no navegador. Resolvi empacotar o mesmo build como uma extensão pra Chrome.
O segredo aqui foi adaptar o vite.config.ts pra gerar a estrutura de pastas do Manifest V3, e reusar quase tudo. A única coisa separada foi o popup e o ícone, o resto é o mesmo código da web.
🎯 O que vem por aí
Tenho um monte de coisa em mente, mas não quero inflar o projeto antes da hora. A prioridade é:
Criar packs de desafios por tema (ex: lógica, array, strings)
Streak com dias perdidos "recuperáveis" (quem já usou Duolingo vai entender)
Um modo “Desafio do Dia” com leaderboard opcional
Quer testar?
👉 Code Bites na Web
👉 Code Bites na Chrome Web Store
Se tiver ideia de desafio, me manda no LinkedIn ou no e-mail. Tô coletando sugestões da galera que realmente quer usar no dia a dia.
Construir esse projeto me ajudou a manter uma rotina mínima de prática, e talvez ajude você também.
