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
SOCIAL SHARE CARD GENERATOR