Trilha Full-Stack
Mês 1 — JavaScript Moderno + React
Plano de estudos completo com projetos práticos
Com nível intermediário e 2–4 horas por dia, você estará pronto para os primeiros freelas em cerca de
4 meses. A regra de ouro: 20% assistindo aulas, 80% codando. Este plano detalha cada semana do
primeiro mês.
Como organizar seus dias
Seg – Sex Estudo e prática do conteúdo da semana
Sábado Aplicar o aprendizado no projeto do mês
Domingo Revisar pontos de dúvida e organizar o GitHub
Semana 1 — JavaScript Moderno (ES6+)
O que estudar
• Arrow functions e funções de alta ordem
• Destructuring em objetos e arrays
• Spread operator e rest params
• Template literals e modules (import/export)
• Array methods: .map(), .filter(), .reduce(), .find()
• Promises, fetch, async/await
Recursos
→ [Link] — melhor referência de JS moderno (gratuito)
→ Canal Matheus Battisti no YouTube — playlist JS moderno em português
→ MDN Web Docs — use sempre que travar em algum método
Exercício prático da semana
Mini-app de produtos com API pública
Crie um arquivo JS que consome [Link] e exiba no console: nome, preço e
se o produto está acima ou abaixo de $50. Use fetch + async/await + filter + map. Parece simples,
mas treina tudo da semana de uma vez.
Semana 2 — React — Fundamentos
O que estudar
• Componentes e JSX — HTML dentro do JavaScript
• Props — passar dados entre componentes
• useState — guardar e atualizar estado
• useEffect — executar código quando algo muda
• Renderização de listas com .map()
• Eventos: onClick, onChange, onSubmit
Recursos
→ [Link] — documentação oficial reescrita em 2023, excelente
→ Canal Rocketseat no YouTube — playlist de React atualizada
→ Evite tutoriais de React anteriores a 2022 (forma de escrever mudou)
Exercício prático da semana
Lista de produtos em React
Crie um componente que busca dados da FakeStore API e exibe nome, preço e tag 'caro'/'barato'.
Adicione um botão que filtra apenas produtos acima de $50. Use useEffect para buscar, useState para
guardar e map para renderizar.
Semana 3 — React — Aprofundando
O que estudar
• Componentização — quebrar a interface em partes reutilizáveis
• Passagem de funções como props
• Formulários controlados com useState
• useContext — compartilhar dados sem prop drilling
• React Router — navegar entre páginas
Recursos
→ Documentação oficial do React ([Link]) — seção de hooks
→ Canal DevSuperior no YouTube — ótimo para componentização na prática
Exercício prático da semana
Mini-app com duas telas
Transforme o projeto da semana anterior em uma aplicação com duas telas: listagem de produtos e
detalhe do produto. Use React Router para navegar. Adicione um formulário simples de busca por
nome.
Semana 4 — Projeto do Mês
Semana 4 — Projeto do Mês
Dashboard de Produtos — React completo
• Cards dos produtos com nome, preço, imagem e categoria
• Filtro por categoria e faixa de preço
• Barra de busca por nome
• Tela de detalhe de cada produto (React Router)
• Painel de totais: total de produtos, produto mais caro, categoria mais comum
API utilizada: [Link]
O que esse projeto prova para um cliente
Que você sabe consumir API, organizar componentes, trabalhar com estado, filtrar dados e construir
uma interface funcional — exatamente o que um cliente de freela quer ver.
Como organizar no GitHub
Crie um repositório chamado dashboard-produtos. No README inclua: nome do projeto, descrição,
tecnologias usadas (React, React Router, JavaScript ES6+, FakeStore API), instruções de como rodar e
um print ou GIF da tela. README bem escrito vale tanto quanto o código para quem vai te contratar.
Checklist — Antes de passar para o Mês 2
■ Consigo usar async/await para buscar dados de uma API?
■ Sei criar e usar componentes React com props?
■ Consigo controlar estado com useState?
■ Sei usar useEffect para buscar dados quando o componente carrega?
■ Consigo navegar entre telas com React Router?
■ O projeto está no GitHub com README bem escrito?
■ O projeto está no ar (Vercel)?
Se algum item travar, não avance — resolva primeiro. É melhor ir devagar e sólido do que correr e construir em
base fraca.
Visão geral dos 4 meses
Mês Foco Entrega
1 JavaScript + React Dashboard de produtos no ar (Vercel)
2 [Link] + SQL + API API de vendas funcionando
3 Full-Stack + Deploy Sistema completo conectado
4 Portfólio + Mercado Primeiros freelas
Quando terminar o Mês 1, peça o plano detalhado do Mês 2. Bons estudos!