tech-studies

Full Stack

2 min read

Full Stack

roadmap.sh: https://roadmap.sh/full-stack

Suggested path through the Full Stack nodes. Each node links to its lesson when written.

Nodes

Internet & web basics

  • How does the internet work
  • HTTP / HTTPS
  • DNS and how it works
  • Domain names and hosting
  • Browsers and how they work

HTML

  • Learn the basics of HTML
  • Semantic HTML
  • Forms and validation
  • Accessibility (a11y)
  • SEO basics

CSS

  • Learn the basics of CSS
  • Layouts (Flexbox, Grid)
  • Responsive design / media queries
  • CSS preprocessors (Sass)
  • Tailwind CSS

JavaScript

  • JavaScript fundamentals
  • DOM manipulation
  • Fetch API / Ajax
  • ES6+ features
  • TypeScript

Frontend tooling

  • npm / package managers
  • Vite / bundlers
  • Git & GitHub
  • Linters & formatters (ESLint, Prettier)

Frontend framework

  • React
  • Component state & props
  • Hooks
  • React Router
  • State management (Redux / Zustand)

Backend language

  • Node.js
  • Express / Fastify
  • Alternative: Python / Go / PHP
  • npm ecosystem

APIs

  • Build a REST API
  • JSON
  • Authentication (JWT, OAuth)
  • GraphQL
  • API security basics

Databases

  • Relational (PostgreSQL / MySQL)
  • NoSQL (MongoDB / Redis)
  • ORMs (Prisma, Sequelize)
  • Database design & normalization
  • Migrations

Web security

  • HTTPS / TLS
  • CORS
  • Hashing & password storage
  • OWASP Top 10
  • Content Security Policy

Testing

  • Unit testing (Jest / Vitest)
  • Integration testing
  • End-to-end testing (Playwright / Cypress)

Rendering & frameworks

  • Client-side rendering (CSR)
  • Server-side rendering (SSR)
  • Static site generation (SSG)
  • Next.js

DevOps & deployment

  • Linux & shell basics
  • Docker
  • CI/CD pipelines
  • Cloud providers (AWS / Vercel / Netlify)
  • Web servers (Nginx)
  • Monitoring & logging

Advanced topics

  • WebSockets / real-time
  • Caching (Redis, CDN, HTTP)
  • Message queues
  • Microservices
  • Performance optimization
  • Progressive Web Apps (PWA)

Resources

See resources.md.

Project ideas

  • Ship a full-stack notes app: React + TypeScript frontend, Node/Express API, PostgreSQL via Prisma, JWT auth.
  • Build a real-time chat with WebSockets, Redis pub/sub, and deploy the stack to Vercel + a managed database.
  • Create a Next.js storefront with SSR product pages, a REST checkout API, and Playwright end-to-end tests.

1 item under this folder.