Mapa Full
Stack
Javascript
80/20
Fundamento
Sem a base, você não conseguirá avançar os
próximos passo.
Lógica de programação (essencial)
Estruturas de dados básicas: array,
objeto, mapa, lista, função, promessas
Git + GitHub (versionamento e colaboração)
HTTP/HTTPS, APIs REST, JSON
Terminal básico (CLI)
VSCode + extensões úteis
Frontend
80% que resolve 80% dos problemas.
HTML + CSS bem feitos
(Layout, Semântica, Flexbox, Grid)
JavaScript moderno (ES6+) + DOM
TypeScript: tipos básicos, interfaces,
tipagem de props e estados
Frontend
80% que resolve 80% dos problemas.
React:
Componentes funcionais
Props, State, Events
Hooks principais (useState, useEffect, useContext)
Listas e renderização condicional
Consumo de APIs (fetch, axios, SWR ou React Query)
Gerenciamento de estado leve (Context API, Zustand ou
Redux simples se necessário)
Rotas (React Router)
Formulários (React Hook Form)
CSS-in-JS ou Framework (TailwindCSS, ShadCN, Styled-
components)
Extras úteis (se couber)
Validação com Zod/Yup
Deploy simples: Vercel, Netlify, Firebase
Backend
80% que resolve 80% dos problemas.
Node.js: entender como funciona, módulos, npm/yarn
Express e/ou Fastify (Fastify mais performático):
Criar APIs REST
Rotas, Middlewares
Controllers e Services (separação de responsabilidades)
Manipulação de dados (CRUD)
Backend
80% que resolve 80% dos problemas.
Segurança básica: CORS, rate limiting, Helmet
Autenticação e Autorização (JWT, cookies, sessions)
Validação de dados (Zod ou Joi)
Upload de arquivos (Multer)
Logs básicos (Winston, Pino)
Teste básico (Jest, Vitest ou supertest)
Deploy simples: Railway, Render, Fly.io
Bancos de Dados
80% que resolve 80% dos problemas.
MongoDB (NoSQL)
Modelagem flexível (documentos)
CRUD básico (insert, find, update,
delete)
Mongoose (ORM mais usado) ou
Prisma (funciona pra Mongo
também)
Bancos de Dados
80% que resolve 80% dos problemas.
PostgreSQL (SQL)
Modelagem relacional: tabelas,
chaves, índices
CRUD básico (SELECT, INSERT,
UPDATE, DELETE)
Prisma (ORM mais produtivo) ou
Sequelize
Joins simples e relacionamentos
Migrations com Prisma
Integração FullStack
Chave do jogo
→
API Frontend (fetch/axios)
→
API Banco (ORM/Driver)
Comunicação clara: entender
request, response, status codes
Tratamento de erros entre
backend e frontend
Deploy e Produção
Simples
Front: Vercel/Netlify
Back: Railway/Render/Fly.io
Banco:
Railway/Render/Supabase
(PostgreSQL) / MongoDB Atlas
(Mongo)
Resumo visual do
Pareto Full Stack JS
HTML + CSS + JS + Git
React + TypeScript + Hooks + APIs
Node + Express/Fastify + API REST +
Auth + CRUD
MongoDB (Mongoose) ou PostgreSQL
(Prisma)
Deploy simples
Bora parar de ficar
perdido e focar no que
realmente importa!
Esse mapa aqui não é só teoria,
é PARA BOTAR PROJETO NO AR!
Foca na sua jornada. Escolhe a trilha.
Segue o mapa. E mete marcha!
Você não precisa saber tudo. Só precisa
saber o que importa. E agora você já
sabe. Bora para prática!
