Make the Modern Frontend Stack Make Sense
From raw DOM to a Next.js app you actually understand, in the order the layers were meant to be learned.
What You Will Learn
- ✓Manipulate the DOM directly so React stops feeling like magic
- ✓Build responsive layouts with native CSS Grid and Flexbox
- ✓Use fetch, async, and error states the way real apps do
- ✓Write React with hooks, context, and custom hooks
- ✓Use the Next.js App Router with Server Components and Server Actions
- ✓Stream UI with Suspense and ship optimistic updates that feel instant
- ✓Test frontends with Vitest, Testing Library, and Playwright
- ✓Containerize and ship a full-stack Next.js app with Docker
Who Is This For
- Backend engineers who who can ship an API but freeze the moment they have to render it
- Self-taught developers who who learned React from blog posts and never quite understood Next.js
- Bootcamp grads who who only ever touched Create React App and feel left behind
- Engineers chasing the App Router who who keep getting Server Components, Server Actions, and streaming confused
Curriculum
DOM and data
5 lessons
Client-server sync
5 lessons
Native CSS layout
5 lessons
Stateless auth on the web
5 lessons
React and Tailwind foundations
5 lessons
React routing and state
5 lessons
Next.js Server rendering
5 lessons
Next.js Server Actions
5 lessons
Optimistic UI and streaming
5 lessons
Frontend deployment
5 lessons
Frontend testing
5 lessons
Forms and validation
5 lessons
Realtime UI over WebSockets
5 lessons
Frequently Asked Questions
- Do I need React experience?
- No. The early modules use plain HTML, CSS, and JavaScript so you understand what React abstracts away. React enters once you have the foundations, and Next.js comes after that.
- Why Next.js and the App Router?
- Because that is where modern React lives now. Server Components, Server Actions, and streaming are not optional anymore. You learn them in context, not as buzzwords from a blog post.
- Does this connect to a real backend?
- Yes. The auth, server actions, and websocket modules call the same shape of backend the Backend Masterclass teaches you to build. The two are designed to fit together.
- Is this self-paced?
- Yes. Self-paced with lifetime access. Replay any module, any time.
Make the Modern Frontend Stack Make Sense
From raw DOM to a Next.js app you actually understand, in the order the layers were meant to be learned.
Built for engineers who want the modern frontend stack to finally make sense
Be honest. Which one sounds like you?
React without the foundations
You learned hooks before you learned the DOM. Now every bug feels like a black box and the docs assume things you skipped.
Next.js confusion
Server Components, Client Components, Server Actions, route handlers, middleware. You have read every blog post and still cannot keep them straight.
CSS by copy-paste
You search "center a div" more often than you would admit. Layout still feels like guessing until something looks right.
Half a stack
Your frontend talks to a backend you do not understand. Your backend ships data your frontend cannot render. You feel half-built in both worlds.
The fix is not another React tutorial.
It is rebuilding the layers in the right order.
Senior engineers aren't better because they know more syntax. They're better because they've:
Each layer earns the next. By the end the modern stack stops feeling like a moving target and starts feeling like something you have shipped.
Not another React playlist.
A frontend you actually understand.
You start in the DOM and finish in a Next.js app deployed with Docker. Every module connects to the next, and every concept lands on running code you can clone and break.
The arc of the masterclass
Each layer earns the next. Nothing skipped.
Foundations: DOM, CSS, and fetch
Manipulate the DOM by hand, lay out real pages with Grid and Flexbox, and fetch data the way React and Next.js eventually will.
React foundations: components, hooks, routing
Write your first components, feel useState click, and wire up Context plus custom hooks without needing a state library.
Next.js: Server Components, Server Actions, streaming
Use the App Router the way it was meant to be used. Server-rendered pages, server-side mutations, optimistic UI, and suspense streaming.
Production: tests, Docker, WebSockets
Ship the whole thing with Vitest and Playwright tests, a full-stack docker-compose, a real websocket UI, and a Next.js deploy you can defend.
From first principles to a deployed Next.js app.
DOM and data
Manipulate the DOM by hand and fetch JSON the old-fashioned way, so React stops feeling like magic later.
The browser as a runtime
HTML, CSS, and JavaScript each have one job. The browser runs them together.
The DOM as a tree
Nodes, parents, children, and the methods that walk between them.
Creating elements by hand
createElement, appendChild, innerHTML, and the reason React exists.
Fetch and async/await
Get data from the network without freezing the UI.
Rendering a list from an API
Walk the full pipeline from fetch to appended DOM nodes and run it against the workshop.
Client-server sync
Handle loading, errors, and race conditions so your UI never lies about what is happening.
Idle, loading, success, error
The four states every async operation moves through, and why forgetting any of them is the most common UI bug.
Optimistic vs pessimistic updates
Update the UI before or after the server responds. Pick the one that fits.
Race conditions in fetches
When the second click resolves before the first, your UI shows stale data.
Handling errors the user can read
Errors are a UI, not a console log. Design them like one.
Where this gets painful
The moment the imperative style stops scaling and React starts making sense.
Native CSS layout
Real responsive layout with Grid and Flexbox. No frameworks, no guessing.
The box model, refreshed
Content, padding, border, margin, and why box-sizing matters.
Flexbox: one axis at a time
The layout tool for rows, columns, and everything that fits in a line.
CSS Grid: two dimensions at once
The layout tool for everything flexbox is not.
Responsive design with media queries
When auto-fit is not enough, media queries cover the rest.
CSS variables and design tokens
Name your colors, spacing, and radii once. Reuse them everywhere.
Stateless auth on the web
Tokens, Authorization headers, and the tradeoffs every frontend has to make.
Sessions vs tokens
What changed when the web got serverless, and why tokens became the default.
Storing JWTs in localStorage
The pragmatic default for frontend-only apps, and when it is not safe enough.
Bearer tokens on requests
Attach the JWT to every authenticated call, in one place.
Login, logout, and token expiry
The lifecycle every auth flow walks through.
The tradeoffs of each approach
A preview of the server-side storage story you will see in the Next.js phase.
React and Tailwind foundations
Components, hooks, and utility-first CSS that let you ship a real UI without leaving your editor.
Components are functions that return UI
The simplest mental model for React, and why it clicks.
Props and composition
Pass data down, compose small pieces into bigger pieces.
UseState and Reactivity
The first hook. A value and a setter. Every state management pattern in React starts here.
UseEffect and side effects
When you need to fetch data, set up a listener, or touch anything outside React.
Tailwind: Utility-first CSS
Style components without leaving the component file, and stop naming CSS classes.
React routing and state
Client-side routing, global state with Context, and custom hooks that keep components clean.
Client-side routing with React router
Change the URL without reloading the page.
Nested routes and layouts
Wrap groups of pages in shared layouts without duplication.
Context for global state
When prop drilling hurts, Context is the escape hatch React ships with.
Custom hooks
Extract repetitive logic into a reusable function that starts with use.
Avoiding prop drilling without overengineering
Know when to lift state, when to use Context, and when to let props flow.
Next.js Server rendering
The App Router, Server Components, and the part where React finally moves to the server.
Why Next.js exists
The limits of pure client-side React, and what server rendering buys you.
The app router: file system as route table
Create a folder, create a page.tsx, get a route. No config.
Server Components vs client Components
When code runs on the server, when it runs on the client, and how to tell them apart.
Data fetching on the Server
Fetch data inside the component with async and await. No hooks required.
Metadata and SEO
The generateMetadata function, and why SSR makes SEO effortless.
Next.js Server Actions
Mutate data without writing an API route, and without leaving the component file.
What a Server action actually is
A function that runs on the server, callable from the client like any other.
Forms posted to Server Actions
Progressive enhancement for free, because HTML forms work before JavaScript loads.
HttpOnly cookies and the BFF pattern
Server Actions plus httpOnly cookies give you the safest auth story in any React app.
When to still write a real API route
Server Actions are magical for your own app. API routes are still the right tool for some cases.
Revalidation and refresh
Tell Next.js when cached data is stale after a mutation.
Optimistic UI and streaming
Make your app feel instant with Suspense, streaming, and useOptimistic.
Suspense, plainly explained
The React primitive for "show a fallback while this part is loading".
Streaming responses from the Server
Why the whole page does not wait for the slowest piece of data.
UseOptimistic and instant feedback
Show the change before the server confirms, without losing correctness.
Loading skeletons that do not lie
Design the loading state with the same care as the final state.
Error boundaries
Catch render errors in one subtree without taking down the whole app.
Frontend deployment
Ship the whole thing in one command. Docker, multi-stage builds, and a full-stack compose.
Next.js standalone output
Build a self-contained runtime with only the files you actually need.
Multi-stage dockerfile for Next.js
The smallest production image for a modern Next.js app.
Full-stack docker compose
One command to run Next.js, the backend, Postgres, and Redis together.
GitHub Actions CI
Lint, type-check, build, and test on every push.
Deploy targets and tradeoffs
Vercel, your own VPS, or a Kubernetes cluster. Pick the one that fits.
Frontend testing
Vitest, Testing Library, and Playwright. The three tools every React team uses.
The frontend test pyramid
Unit, component, and end-to-end tests. Each layer catches different bugs.
Unit tests with Vitest
Pure functions, tested in milliseconds.
Component tests with testing library
Test what the user sees, not what the component looks like internally.
End-to-end tests with Playwright
A few tests that drive a real browser through your real stack.
What to test, what to skip
Testing everything is a waste. Testing nothing is worse.
Forms and validation
React Hook Form plus Zod. The same schema on the frontend and the backend.
Form state is harder than it looks
Values, errors, touched, dirty, submission state. Every form tracks all of them.
React hook form basics
register, handleSubmit, and the minimal setup for a real form.
Zod: same schema frontend and backend
Define the rules once and enforce them in both places.
Showing errors without yelling
Inline, specific, and respectful error messages that help users instead of scolding them.
Submitting and disabling
Prevent double-submits and tell the user something is happening.
Realtime UI over WebSockets
Subscribe to rooms, handle reconnection, and update your UI live.
WebSocket client lifecycle
Open, message, close, error. The four events you handle on every client.
Subscribing to rooms from React
Send a subscribe message, receive only the events you care about.
Updating the UI from Server pushes
Apply incoming events to state the same way you would any other input.
Reconnection and connection state in the UI
Connections drop. Show it honestly and recover automatically.
Capstone reflection
Zoom out and see the shape of what you built.
Workshop Curriculum
What you'll build in this hands-on workshop.
Anyone can paste a useEffect. Engineers understand what runs and when.
AI can write a React component.
Hooks, JSX, basic state.
AI cannot give you:
- A real model of when code runs on the server vs the client
- The instinct to choose Server Action vs API route vs client fetch
- Confidence to build a layout without searching for tricks
- The judgement to ship optimistic UI that does not lie to the user
That comes from building it yourself. That is what this masterclass is.
Learn From Someone Who Actually Does This
I am the Head of Engineering at Jobbatical (EU Tech), with 8+ years of leadership and 15+ years of total experience in the software industry.
"Most engineers are not blocked by ability, but by lack of real system ownership."
Guest Sessions From Engineers at
Live sessions on System Design, Career Growth, and Interview Preparation.
Get Full Access
Invest in your career. It pays back 100x.
Frequently Asked Questions
Do I need React experience?
Why Next.js and the App Router?
Does this connect to a real backend?
Is this self-paced?
When you finish:
Stop guessing at React. Build the frontend brain.
Enroll in this Course
Enter your email to proceed to checkout.
Includes lifetime access to the interactive course.