Full-Stack Product Engineer

Engineeringfrom Web to Product

15 phases. HTML to system design. A complete production-grade journey from web fundamentals to AI-integrated fullstack engineering.

15Phases

106Notes

6Tracks

0Live Notes

5+In Progress

Foundations Track · Phases 0–6 · 47 Notes

🌐

Phase 0 · 3 Notes Prereq

How the web works

Internet, HTTP, browser pipeline, dev tools & environment setup

0/3 ▶

Internet & HTTP fundamentals

Request-response, DNS, IP, verbs, status codes, HTTPS/TLS

Pending ↗

Browser rendering pipeline

URL to pixels, parsing, critical render path, DOM, CSSOM, paint

Pending ↗

Dev tools & environment

VS Code, Chrome DevTools, terminal basics, file system

Pending ↗

📄

Phase 1 · 4 Notes HTML

HTML — structure & semantics

Document structure, semantic HTML, forms, accessibility

0/4▶

Document structure & meta

DOCTYPE, head, meta, charset, viewport, SEO, Open Graph

Pending↗

Semantic HTML

header, main, section, article, nav, figure, time — div vs semantic

Pending↗

Forms & inputs

All input types, labels, validation attributes, FormData API

Pending↗

Accessibility (a11y)

ARIA, keyboard nav, screen readers, WCAG 2.1, color contrast

Pending↗

🎨

Phase 2 · 13 Notes Design track

CSS — visual design, layout & UI theory

Selectors, Flexbox, Grid, animations, design systems, Figma, UX

0/13▶

Selectors, cascade & box model

All selectors, specificity, cascade, inheritance, box model deep dive

Pending↗

Flexbox

All flex properties, parent vs child, layout patterns, centering

Pending↗

CSS Grid

grid-template, named areas, auto-fit/fill, minmax, fr, subgrid

Pending↗

Responsive design

Mobile-first, media queries, container queries, fluid type, dvh/svh

Pending↗

Modern CSS — variables & functions

CSS variables, calc/clamp, :has(), nesting, @layer, @scope

Pending↗

Animations & transforms

Transitions, @keyframes, timing functions, transform, GPU compositing

Pending↗

CSS architecture (BEM, utility-first)

BEM, OOCSS, utility-first, CSS modules, naming at scale

Pending↗

Design theory — color & typography

Color theory, color schemes, type scale, hierarchy, 8pt grid, contrast

Pending↗

Design morphisms & visual styles

Flat, skeuomorphic, neumorphic, glassmorphism, claymorphism, brutalism

Pending↗

Design systems & Tailwind

Design tokens, component libraries, color/type/spacing systems, Tailwind

Pending↗

Figma for developers

Auto layout, components, variants, prototyping, design handoff, tokens

Pending↗

UX fundamentals & user research

User research, personas, journey mapping, IA, wireframing, prototyping

Pending↗

UX heuristics & interaction design

Nielsen's 10, Gestalt, affordances, micro-interactions, error/empty states

Pending↗

⚡

Phase 3 · 14 Notes JS Core

JavaScript — language core (Layers 1–3)

Variables, functions, DOM, async, error handling, modules, APIs

0/14▶

Variables, types & operators

var/let/const, primitives, typeof, coercion, operators, template literals

Pending↗

Functions — all forms

Declaration, expression, arrow, IIFE, parameters, rest/spread, default args

Pending↗

Arrays & objects deep dive

Destructuring, spread, map/filter/reduce, Object.keys/entries/assign

Pending↗

DOM manipulation

querySelector, createElement, event listeners, bubbling, delegation

Pending↗

Async JavaScript — callbacks & Promises

Callbacks, Promises, .then/.catch/.finally, Promise.all/race/allSettled

Pending↗

Async/await & error handling

async/await syntax, try/catch, custom errors, Error types

Pending↗

Fetch API & HTTP in JS

fetch(), headers, methods, JSON, REST patterns, error handling

Pending↗

ES modules & tooling

import/export, named vs default, module resolution, bundlers intro

Pending↗

Browser APIs — storage & timing

localStorage, sessionStorage, cookies, setTimeout, requestAnimationFrame

Pending↗

OOP in JavaScript

Classes, constructor, extends, super, static, getters/setters, private fields

Pending↗

Functional programming patterns

Pure functions, immutability, currying, composition, higher-order functions

Pending↗

Iterators, generators & symbols

Symbol, iterator protocol, generators, yield, for...of

Pending↗

Regex & string manipulation

RegExp, flags, groups, String methods, template tags

Pending↗

Testing fundamentals

Unit testing, Jest basics, test structure, mocking, TDD intro

Pending↗

🔬

Phase 4 · 6 Notes JS Advanced

JS engine internals & advanced patterns (Layer 4)

Event loop, V8, memory, closures, prototypes, design patterns

0/6▶

V8 engine & JIT compilation

Parsing, ignition, turbofan, hidden classes, inline caches

Pending↗

Memory management & GC

Stack vs heap, mark-and-sweep, generational GC, memory leaks

Pending↗

Performance patterns

Debounce, throttle, memoization, lazy loading, virtual scroll

Pending↗

Design patterns in JS

Singleton, Observer, Factory, Module, Decorator, Strategy

Pending↗

Error handling patterns

Custom error classes, error boundaries, global handlers, error logging

Pending↗

Rebuilding core JS

Re-implementing map/filter/reduce/Promise from scratch

Pending↗

🛠️

Phase 5 · 3 Notes Dev Tools

Git, terminal & dev tooling

Git flow, CLI, npm, bundlers, linting, CI basics

0/3▶

Git & version control

init, commit, branch, merge, rebase, stash, reset, cherry-pick

Pending↗

Terminal & shell mastery

Bash, zsh, navigation, pipes, redirects, env vars, scripts

Pending↗

npm, bundlers & dev pipeline

npm scripts, Vite, webpack config basics, ESLint, Prettier, Husky

Pending↗

📘

Phase 6 · 6 Notes TypeScript

TypeScript — dedicated deep phase

Types, interfaces, generics, advanced types, compiler, React + TS

0/6▶

TypeScript fundamentals

Types, interfaces, type aliases, unions, intersections, enums, as

Pending↗

Functions & objects in TS

Typed functions, optional, readonly, index signatures, classes in TS

Pending↗

Generics

Generic functions, interfaces, constraints, conditional types, infer

Pending↗

Advanced TypeScript

Mapped types, template literal types, satisfies, utility types

Pending↗

TypeScript compiler & config

tsconfig, strict mode, paths, declaration files, tsc vs bundler

Pending↗

TypeScript with React

FC types, hooks typing, event types, generic components, props

Pending↗

Fullstack Track · Phases 9–11 · 17 Notes

🗄️

Phase 9 · 6 Notes Databases

Databases — SQL & NoSQL

PostgreSQL, MongoDB, Redis, indexing, transactions, schema design

0/6▶

SQL fundamentals & PostgreSQL

SELECT, JOINs, subqueries, CTEs, window functions, EXPLAIN

Pending↗

Database design & normalization

ERD, 1NF/2NF/3NF, BCNF, denormalization trade-offs, schema patterns

Pending↗

Indexing & query performance

B-tree, hash, composite, partial indexes, EXPLAIN ANALYZE, vacuuming

Pending↗

MongoDB & NoSQL patterns

Documents, aggregation pipeline, embedding vs referencing, Atlas

Pending↗

Redis — caching & data structures

Strings, hashes, sorted sets, pub/sub, TTL, session caching, queues

Pending↗

Transactions & ACID

ACID properties, isolation levels, deadlocks, 2PC, distributed txns

Pending↗

🔗

Phase 10 · 6 Notes Fullstack

Fullstack integration — connecting everything

API integration, auth flows, file uploads, WebSockets, tRPC/GraphQL

0/6▶

Connecting React to APIs

Axios, fetch, env vars, CORS, error handling patterns, interceptors

Pending↗

Full auth flow implementation

Registration, login, JWT storage, refresh tokens, protected routes

Pending↗

File uploads & storage

Multipart forms, S3/Cloudinary, presigned URLs, image optimization

Pending↗

tRPC — end-to-end type safety

Procedures, routers, context, client integration, Next.js + tRPC

Pending↗

GraphQL fundamentals

Schema, queries, mutations, subscriptions, Apollo client, resolvers

Pending↗

Email, payments & third-party APIs

Resend, Stripe, webhooks, idempotency, SDK integration patterns

Pending↗

🚀

Phase 11 · 5 Notes DevOps

DevOps & deployment

Docker, CI/CD, cloud deployment, monitoring, environment management

0/5▶

Docker fundamentals

Images, containers, Dockerfile, compose, volumes, networking

Pending↗

CI/CD pipelines

GitHub Actions, workflows, test/build/deploy, secrets, environments

Pending↗

Cloud deployment — Vercel, Railway, AWS

Vercel edge, Railway services, EC2, RDS, S3, Cloudfront CDN

Pending↗

Monitoring & observability

Sentry, Prometheus, Grafana, structured logging, alerting

Pending↗

Environment & secrets management

env files, vault, dotenv, 12-factor app, secret rotation

Pending↗