leejunkim

full stack road map

3 min read

The trend is that the frontend and backend will merge.. so prepare to do both

The BAREBONE Basics (only scratches the surface)

From Freecodecamp Responsive design, state management

Frontend

  1. Understand how the internet functions
    • domains, domain name system, servers, protocols (e.g. HTTP)
    • basic comprehension of web browsers & how they render web pages
  2. Fundamentals: HTML, CSS, JS
    • HTML - semantic HTML
    • CSS - box model, animation/transitions, flexbox, grid, responsiveness
    • JS - var vs let vs const, arrays, objects, functions, fetch api, asynchronous code (promises/async,await), DOM/web platform (events, manipulation)
  3. Responsive design and CSS frameworks
    • media queries, using % instead of hard-coded values
    • CSS frameworks = pre-written CSS stylesheets that provides a collection of reusable components
      • Bootstrap, Foundation, Tailwind
      • grid systems (ready made grid systems), responsive utilities, component libraries (pre-styled components → buttons, cards, etc)
  4. JS frameworks
    • Most popular frontend frameworks: React, Vue, Angular
    • Reusable functionality that you build
    • other things: routing and navigation, state management, form validation, etc
    • each framework has100s of hrs of tutorials (just use react lmao)
    • largest learning block here
  5. TYPESCRIPT (mandatory)
    • Basic types, inference, types vs interface, generics
  6. API integration & Asynchronous JS
    • interaction with real world data, provided by backend
    • JS is single threaded & asynchronous
    • Restful API
      • Traditional restful apis come with limitations
    • GraphQL emerges as a powerful alternative
      • allows clients to request only the data they need, reducing over fecthing
  7. Testing and debugging
    • developer tools → you can edit the DOM
    • boring but must needed
    • reusable tests
      1. Unit: tests individual components/functions
      2. Integration: tests interactions between different components/modules
      3. End-to-end (E2E) testing: evaluates the entire flow and functionality
    • Jest - unit testing
    • Cypress - end to end testing
  8. Byte - front end tooling solution that offers faster build times
    • module bundling, transpilation, minification
  9. TypeScript
    • master js first
    • static typing - offers type annotations, interfaces, and enhanced tooling
  10. Web security
    • OWASP (Open Web Application Security Project) provides guidelines and best practices to ensure web application security
  11. Server rendered React applications
    • Next.js
      • automatic code splitting
      • server side rendering
    • Astro
      • less JS by default, so faster load times
  12. Optimization
    • performance is as important as aesthetics
    • optimizing images, leveraging browser caching, minimizing server response times
    • Google’s Lighthouse
  13. Cross platform mobile applications
    • React Native (ios and android)

Backend

  • Next.js
    • Routing, server components, server actions, caching, SSR/SSG, Patterns and best practices (data fetching, server-side validation, avoid leaks, etc)
  • Separate backend
    • Node.js (Express, Nest.js)
    • PHP (Laravel)
    • Java (Spring)
    • Ruby (Ruby on Rails)
    • Go
  • Database
    • SQL (Postgres, MySQL, SQLite) vs NoSQL (mongodb)
    • QRM (Prisma, Drizzle, Mongoose)
    • Hosted DB services (Supabase, Firebase, vercel)

React & Next.js Ecosystem

  • ShadcnUI
  • Zod
  • React-Hook-Form
  • Framer Motion
  • Authentication (Next-Auth vs Kinde)
  • Payments (Stripe, Kinde)
  • Hosting providers (vercel)
  • git and github
  • mobile apps? (react native & expo)

Web Dev in 2025

  • 4 main overview changes
    • AI copilots, TypeScript (+Zod), Tailwind CSS, Next.js App Router

Graph View