I built the performance engineering resource I wished existed - full stack, real code, 6 levels, no fluff

alright let me be real with you for a second

i've been building production systems for a few years now, mostly backend with node and nestjs, react and next on top, and the one thing that always drove me absolutely crazy was how performance content online just doesn't respect your time

you google "how to optimize react rendering" and you get a medium article with 47 claps that shows you useMemo on a counter app

you google "how to optimize node performance" and you get a 2019 blog post that tells you to use async await

neither of them has real numbers, neither of them shows you how to actually FIND the problem before you start fixing things, and absolutely none of them connect the frontend and backend story together

so i spent the last few months building it myself

what i built

it's called frontend-backend-performance-mastery and it's structured across 6 levels, each level has a frontend folder (react, next.js, typescript) and a backend folder (node, express, nestjs), and every single folder follows the exact same 3-file structure

detect.md — how to find the problem, what to look for, what tools to use, before you even open devtools

fix.md — the actual fix, with a before and after, when to apply it, and just as important when NOT to apply it

project/ — a fully runnable code example, npm install and npm run dev and you're looking at real numbers on your screen, not a screenshot from someone's laptop from 2021

the 6 levels

level 01 — fundamentals: web vitals, profiling, baselines, benchmarking with clinic.js and autocannon
level 02 — rendering: ssr vs csr vs ssg, react fiber internals, hydration, response streaming, fast-json-stringify
level 03 — caching: react query, swr, service workers, redis, cache-aside pattern, cdn and http headers
level 04 — database and api: n+1 queries, cursor pagination that stays fast at 10 million rows, dataloader, query optimization, indexes
level 05 — advanced: wasm in next.js, worker threads, piscina, bull queue, grpc, node streams, code splitting that actually reduces bundle size
level 06 — production: opentelemetry, prometheus, grafana dashboards, lighthouse ci in github actions, real user monitoring, distributed tracing

the philosophy behind it

one rule i followed building every single example:

never fix what you haven't measured, never measure what you can't reproduce

every fix in this repo comes with actual benchmark output, actual lighthouse scores, actual bundle sizes before and after — not "trust me bro this is faster"

no pseudo code anywhere, if i wrote a typescript snippet it compiles, if i wrote a bash command it works, if i wrote a sql query it executes

who this is for

if you're a junior dev this might be a stretch, it's not a beginner resource and i'm not gonna pretend it is

if you're mid level and you want to actually understand what's happening under the hood instead of just copy pasting stack overflow fixes, this is for you

if you're senior and you want a structured reference or something to point your team at, this is also for you

the stack

react 18, next.js 14 app router, typescript 5, node 20, nestjs 10, postgresql, redis, opentelemetry, prometheus, grafana, clinic.js, autocannon, piscina, dataloader, bull, workbox — all the real stuff

it's fully open source and free, no newsletter signup no course upsell no "buy the premium version", just the repo

if you've been grinding to level up your perf engineering skills i genuinely hope this helps

https://github.com/AbdelhalimYahya/FulllStack-Performance-Mastery