Front-end (React/TypeScript) do Zero à Primeira Vaga

O caminho, parada por parada

1. 0✦ você está aqui
   Semana 1

   Setup e mindset

   Ambiente pronto, primeiro Hello World no navegador.

   concluída

   Instalar VS Code, Git, criar conta GitHub com nome profissional.Entender: navegador, HTML (estrutura), CSS (visual), DevTools.Commitment diário: 1h de estudo > 8h no fim de semana.Pesquisar sempre na documentação oficial antes de copiar cola.

   Recursos, projetos e entregável

   Nível 1: IA como tutor para entender conceitos.

   Recursos (PT-BR)

   • VS Code do zero, Rocketseat
   • Git e GitHub: primeiros passos, Curso em Vídeo
   • MDN Web Docs em PT-BR

   Marco: VS Code + Git funcionando, primeiro commit no GitHub.

2. 1✦ você está aqui
   Mês 1

   HTML e CSS: estrutura e visual

   Dominar semântica HTML e layout responsivo com CSS.

   concluída

   HTML semântico: tags corretas (section, article, nav, main, footer).CSS: box model, flexbox, grid, responsividade (mobile first).Acessibilidade básica: alt em imagens, cores de contraste, navegação por teclado.Deploy estático: GitHub Pages.

   Recursos, projetos e entregável

   Nível 1 sólido. IA explica cada tag, propriedade CSS, mas você refaz sozinho.

   Entregável: 5 páginas estáticas no GitHub

   Recursos (PT-BR)

   • HTML/CSS responsivo, Rocketseat
   • Flexbox Froggy (jogo interativo)
   • CSS Grid Garden (jogo interativo)
   • MDN: HTML
   • MDN: CSS

   Projetos pra fixar

   • Página pessoal com foto, bio e links
   • Landing page de um produto fictício
   • Blog com artigos em grid responsivo
   • Galeria de imagens com hover
   • Formulário estático bonito (não valida)

   Marco: 3 páginas responsivas no ar, código HTML limpo, CSS sem !important.

3. 2✦ você está aqui
   Mês 2

   JavaScript moderno: lógica no navegador

   Dominar ES6+, DOM, eventos, fetch, Git fluente.

   concluída

   Variáveis (let, const), tipos, operadores, arrow functions.Manipulação do DOM: querySelector, eventos, classList, innerHTML.Closures, Higher-Order Functions, destructuring, spread operator.Fetch API, JSON, promessas (async/await).Git: branches, merge, conflitos, conventional commits.

   Recursos, projetos e entregável

   Nível 1 sólido + intro ao Cursor. Cursor gera funções, você entende e refatora.

   Entregável: Calculadora, To-Do List e mini-projeto consumindo API

   Recursos (PT-BR)

   • JavaScript ES6+, Rocketseat
   • JavaScript Moderno, Filipe Deschamps
   • MDN: JavaScript
   • Learn Git Branching (jogo)
   • Dev.to: artigos em PT-BR sobre JS

   Projetos pra fixar

   • Calculadora com layout bonito e operações básicas
   • To-Do List: adicionar, deletar, marcar como feito, localStorage
   • Conversor de moedas usando PokeAPI ou exchangerate-api
   • Verificador de clima (OpenWeatherMap gratuito)

   Marco: Entende async/await, fetch funciona, To-Do List no GitHub com 100+ stars não é o foco, mas código limpo é.

4. 3✦ você está aqui
   Mês 3

   React: componentes e hooks

   Pensar em componentes, estado, props, hooks básicos.

   concluída

   JSX, componentes funcionais, props, estado (useState).Hooks: useEffect, useCallback, useContext.Renderização condicional, listas, keys.Forms em React: controlled components.Consumo de API no React (useEffect + fetch).

   Recursos, projetos e entregável

   Nível 2: Cursor ou Copilot gera estrutura de componente, você lê e refatora.

   Entregável: 3 mini-apps em React no GitHub

   Recursos (PT-BR)

   • React para iniciantes, Rocketseat
   • React em PT-BR (docs oficiais)
   • React Hooks Essencial
   • Trilha React, freeCodeCamp em PT

   Projetos pra fixar

   • Clonezinho do Twitter (timeline com posts locais)
   • Galeria de imagens consumindo API (pexels, unsplash)
   • Pokedex: busca de Pokémons e detalhe

   Marco: Entende diferença entre props e estado, useEffect roda sem loop infinito, componentes reutilizáveis.

5. 4✦ você está aqui
   Mês 4

   TypeScript + Tailwind: tipo seguro e estilo rápido

   Adicionar tipos ao React, estilizar com utilitários ao invés de CSS puro.

   concluída

   Tipos básicos: string, number, boolean, array, interfaces, types.Typing de props e estado no React.React.FC, generics para custom hooks.Utility-first CSS com Tailwind: composition, responsividade, dark mode.Tailwind plugins e configuração mínima.

   Recursos, projetos e entregável

   Nível 2 sólido. IA sugere tipos, Tailwind classes, você valida.

   Entregável: Refatorar 2 projetos para TypeScript + Tailwind

   Recursos (PT-BR)

   • TypeScript Handbook em PT-BR
   • TypeScript para React, Rocketseat
   • Tailwind CSS Oficial
   • Tailwind em PT-BR (comunidade)

   Projetos pra fixar

   • Refatorar Pokedex para TS + Tailwind (tipo tudo, estilo com classes)
   • Refatorar Twitter Clone para TS + Tailwind
   • Novo: Dashboard com cards, gráficos mockados (Recharts)

   Marco: TypeScript roda sem erros, Tailwind não é mágica (você entende as classes), project compila.

6. 5✦ você está aqui
   Mês 5

   React Avançado: Context, Custom Hooks, Roteamento

   Escalabilidade: Context para estado global, custom hooks, múltiplas páginas.

   concluída

   Context API vs Redux vs Zustand (entender quando cada um).Custom hooks para lógica reutilizável.React Router: rotas, lazy loading, navegação.Chamada a API de IA: OpenAI, Anthropic, Hugging Face.Error boundaries, suspense (intro).

   Recursos, projetos e entregável

   Nível 3: Integrar uma API de IA (GPT, Anthropic) no frontend. Começa simples.

   Entregável: App multi-página com Context + chamada IA

   Recursos (PT-BR)

   • React Context e Hooks Custom, Rocketseat
   • React Router v6, documentação oficial
   • Documentação OpenAI em PT (comunidade)
   • Chamando APIs REST no React

   Projetos pra fixar

   • App de Chat simples com assistente via API OpenAI (use free tier ou chave do instrutor)
   • Blog com Context para tema (light/dark), múltiplas páginas
   • Gerador de imagens: input texto vira imagem (Replicate ou similar)

   Marco: Context funciona, roteamento OK, chamada IA na tela (streaming é bonus).

7. 6✦ você está aqui
   Mês 6

   Next.js: fullstack leve e deploy simples

   Framework React com rotas arquivo, API routes, deploy automático.

   concluída

   Pages router vs App router (conhecer ambos, focar App se 2024+).API routes: criar endpoint REST próprio.getServerSideProps, getStaticProps (ISR).Image, Link otimizados do Next.js.Deploy no Vercel: 1 click, sem headache.Chamar IA no servidor (mais seguro) via API route.

   Recursos, projetos e entregável

   Nível 3 sólido. Use getServerSideProps ou API routes para chamar IA no servidor.

   Entregável: Projeto 1 fullstack Next.js + Tailwind + IA deployado

   Recursos (PT-BR)

   • Next.js documentação oficial
   • Next.js do zero, Rocketseat
   • Full Stack Next.js + IA
   • Vercel Deploy guia rápido

   Projetos pra fixar

   • Projeto 1: App Next.js completo com Tailwind, Context, API route que chama IA, deployado no Vercel com URL pública
   • Exemplo: Gerador de stories (input: tema; output: história gerada por IA)
   • README com GIF/screenshot, decisões técnicas, URL ao vivo

   Marco: Projeto 1 no ar, URL pública funciona, API route roda, IA no servidor (não cliente).

8. 7✦ você está aqui
   Mês 7

   Testes: Jest, Testing Library e confiança

   Garantir que o app funciona: testes unitários e de integração.

   concluída

   Jest: setup, rodando testes, mocking.React Testing Library: renderizar componentes, queries, user event.Testes unitários de funções puras, testes de integração de componentes.Estrutura AAA: Arrange, Act, Assert.Mocking de fetch, APIs externas.

   Recursos, projetos e entregável

   Nível 3 sólido. IA gera testes, você valida lógica testada.

   Entregável: Cobertura 60%+ em Projeto 1

   Recursos (PT-BR)

   • Jest + React Testing Library, Rocketseat
   • Testing Library docs oficial
   • Jest docs
   • TDD na prática para Frontend

   Projetos pra fixar

   • Escrever 10+ testes em Projeto 1: componentes, hooks, funções utilitárias
   • Rodar testes no CI (GitHub Actions)
   • Badge de cobertura no README (60%+ mínimo)

   Marco: Testes rodando no CI, 60%+ cobertura, entende a diferença entre unit e integração.

9. 8✦ você está aqui
   Mês 8

   Projeto 2: aprofundamento e complexidade real

   Escolher um eixo: performance, autenticação, dados em tempo real ou UX avançada.

   concluída

   Performance: otimização de bundle, imagens, lazy loading.Autenticação: JWT, OAuth, sesões.Realtime: WebSocket, Supabase realtime, ou polling inteligente.Componentes que aprendem: form validation com IA, filtros smart.State management avançado se necessário (Zustand).

   Recursos, projetos e entregável

   Nível 4: Usar componentes inteligentes (validação via IA, recomendações).

   Entregável: Projeto 2 deployado, mais complexo que Projeto 1

   Recursos (PT-BR)

   • Web Vitals e Performance
   • Auth0 ou Clerk setup rápido
   • Supabase realtime
   • Zustand: state simples

   Projetos pra fixar

   • Projeto 2: tema à escolha, fullstack, com eixo de profundidade (ex: e-commerce com carrinho + checkout seguro, ou SaaS com autenticação + dashboard de dados em tempo real)
   • Incluir testes 60%+, IA integrada
   • Deployado no Vercel com URL pública

   Marco: Projeto 2 mais complexo, com integração profunda de um eixo escolhido, pronto para portfolio.

10. 9✦ você está aqui
    Mês 9

    Clean Code, padrões e polimento

    Deixar ambos os projetos apresentáveis e profissionais.

    concluída

    Clean Code: nomes claros, funções pequenas, sem repetição.Component composition patterns, render props, compound components.Accessibility: ARIA, navegação por teclado, testes de a11y.CSS-in-JS ou modular CSS se usar (Styled Components, CSS Modules).Documentação de componentes (Storybook é bonus).

    Recursos, projetos e entregável

    Nível 4 sólido. Use IA para code review, refatoração.

    Entregável: Portfólio robusto, READMEs perfeitos

    Recursos (PT-BR)

    • Clean Code em JS/React
    • Web Accessibility, MDN
    • Refactoring.guru patterns

    Projetos pra fixar

    • Refatorar ambos projetos: nomes clara, componentes pequenos, testes 70%+
    • README com GIF/vídeo 30 seg de cada, decisões técnicas, stack exato
    • Garantir acessibilidade básica (Lighthouse 90+)

    Marco: Portfólio visual impecável, READMEs que vendem, Lighthouse scores altos.

11. 10✦ você está aqui
    Mês 10-11

    Projeto 3: seu diferencial

    Mostrar criatividade e escolha técnica: O que você quer dominar.

    concluída

    Tecnologia extra que você quer: Framer Motion (animação), Three.js (3D), Data viz avançada, PWA.Ou: aprofundar IA (streaming, function calling, memória de contexto).Integrar feedback real: se recebeu feedback em processos seletivos, aplica aqui.

    Recursos, projetos e entregável

    Nível 4-5: Agente no frontend ou automação de fluxo com IA.

    Recursos (PT-BR)

    • Framer Motion (animação avançada)
    • Three.js, React Three Fiber
    • D3.js, Recharts, Visx (data viz)
    • PWA: Service Workers, Web App Manifest

    Projetos pra fixar

    • Projeto 3: tema livre, mostrando um eixo que você domina (animação fluida, dados interativos, integração IA complexa)
    • Incluir testes, IA se fizer sentido, deploy

    Marco: Projeto 3 deployado, diferencial claro, portfolio com 3 peças solidas.

12. 11✦ você está aqui
    Mês 12 (buffer)

    Polimento final e iteração com feedback

    Responder feedback real de processos seletivos, ajustar sem culpa.

    concluída

    Aprofundar onde o feedback mostrou gap.Estudar requisitos específicos da vaga alvo (ex: Figma → CSS, Next.js 14+ features).Otimizar: tempo de resposta, UX, acessibilidade.

    Recursos, projetos e entregável

    Nível 5 (opcional): Automação do seu workflow com MCP ou scripts.

    Marco: Pronto para o mercado, com portfólio sólido, segurança no que sabe, honestidade no que está aprendendo.

13. ✦você, do outro lado

Checklist final

• 3 projetos fullstack deployados com URL pública
• Cada projeto: README com GIF/vídeo, decisões técnicas, stack exato
• Testes 60%+ em cada projeto, CI/CD com badge verde
• GitHub com commits regulares dos últimos 10+ meses
• Lighthouse scores 85+, acessibilidade testada
• 1 projeto com integração IA (chat, gerador, validação smart)
• Uso fluente de Git: branches, merge, conventional commits
• TypeScript rodando sem erros em produção
• Vercel deploy automático funcionando
• Capaz de refazer qualquer projeto sozinho em 1 semana

Princípios

• Comece visual: um botão funcionando > 100h teóricos.
• Deploy cedo e sempre: GitHub Pages → Vercel conforme cresce.
• Erre no público: coloca no GitHub mesmo que quebrado. Erros são aprendizado.
• Refaça antes de aprender: se IA gera, você refaz em 10 min. Se não refaz, não aprendeu.
• Qualidade > volume: 1 projeto polido bate 10 esboços.
• Comunique: GIF no README, comentários no código, explicar decisões.
• Pesquise bem: isole o problema antes de perguntar.
• Commit todo dia, mesmo que pequeno: frequência > tamanho.
• A barra de entrada é baixa, mas a de crescimento é alta: aproveita o momentum inicial.