UNITY → FULLSTACK

Learn the web by building the whole loop.

HTML gives meaning. CSS builds the layout. React manages interactive UI. Next.js connects routes, server logic, APIs and production delivery in one architecture.

Download runnable scripts (.zip) ↓Start the live lab ↘Download study guide ↓

WHY NEXT.JS?

React is the UI engine. Next.js is the production framework around it.

One TypeScript codebase

Pages, UI, server logic and HTTP endpoints can share types and validation.

Choose where code runs

Render content on the server, then hydrate only the interactive browser parts.

Production conventions

Routing, layouts, loading, errors, metadata, images and deployment have a documented home.

Not always the answer

Use a simple React SPA for a browser-only tool. Keep Unity for realtime 3D. Use Next.js when the product needs the web and server together.

UNITY TRANSLATION MAP

Reuse your architecture instincts—not Unity’s frame loop.

UNITYWEB / REACTMENTAL MODEL

SceneRoute / page

A URL owns one page tree, such as /portfolio or /learn/fullstack.

GameObject + ComponentReact component

Small reusable UI unit with inputs (props) and local behavior.

Inspector fieldProps

Configuration passed from a parent. Treat it as read-only.

Runtime fieldState

Data that changes while the user interacts and causes the UI to render again.

Canvas / UI ToolkitHTML + CSS

HTML gives meaning and structure; CSS controls layout and appearance.

Update()Events + effects

The web reacts to clicks, input, network responses and subscriptions—not a frame loop.

ScriptableObjectTyped data / database

Shared content can live in TypeScript modules, JSON, a CMS, or SQL.

Build targetRuntime + deploy

Browser JavaScript, server runtime, database and CDN are separate production targets.

THE LEARNING ORDER

Do not start with every library. Build the layers in order.

0% locally completed

017–10 days

Web foundation

Understand the platform before the framework.

Semantic HTML
CSS box model, Flexbox, Grid
JavaScript events and async/await
HTTP request/response
Browser DevTools

0210–14 days

TypeScript + React

Build UI as a component tree with one-way data flow.

JSX and components
Props vs state
Events and forms
Hooks and derived state
Lists, keys and composition

0314–21 days

Next.js fullstack

Connect pages, server code, APIs and persistent data.

App Router
Server vs Client Components
Route Handlers
Data fetching and caching
Metadata, loading and errors

04ongoing

Production engineering

Make the app safe, testable and observable.

AuthN vs AuthZ
Validation and rate limits
SQL and migrations
Tests and CI
Logs, performance, accessibility

INTERACTIVE MVP / CODE LAB

One player card, four architectural layers.

Change a tab, inspect the responsibility, then interact with the same feature.

player-card.html

<article class="player-card">
  <p class="eyebrow">PLAYER PROFILE</p>
  <h2>Chaos Ronin</h2>
  <dl>
    <div><dt>Role</dt><dd>Unity → Fullstack</dd></div>
    <div><dt>Current energy</dt><dd>80 / 100</dd></div>
  </dl>
  <button type="button">Use skill</button>
</article>

LIVE RESULT

PLAYER PROFILE

Chaos Ronin

Role: Unity → Fullstack
Energy: 80 / 100

HTML responsibility: structure and semantics.

REQUEST → RESPONSE

Follow one web action through the architecture.

Selected: Browser

The browser begins with a URL, navigation, click or form submission.

REAL ROUTE HANDLER

Send data from this Client Component to a Next.js API.

This button performs a real POST request. Open DevTools → Network to see headers, payload and response.

Learning goal

No request sent yet.

UNITY → FULLSTACK MVP

Your first serious project should prove the complete loop.

01 / PUBLIC UI

Game project tracker

List projects, search, filter and open a detail route.

02 / AUTH

Creator login

Separate authentication, session management and authorization.

03 / CRUD + DATA

Persistent projects

Create, read, update and delete typed records through validated server code.

04 / PRODUCTION

Test and deploy

Add loading/error UI, accessibility checks, rate limits, logs and a rollback path.

Browser
├─ HTML document + CSS
├─ React Client Components (state/events)
└─ fetch('/api/projects')
   └─ Next.js Route Handler
      ├─ validate input
      ├─ authenticate + authorize
      └─ database / object storage

Next.js Server Components
├─ read trusted server data
├─ render initial UI
└─ pass serializable props to Client Components

Definition of done

Responsive and keyboard usable
No secret exposed to browser code
Every mutation validates and authorizes
Database migration is repeatable
Critical route has automated tests
Production logs explain failures

KNOWLEDGE CHECK

0 / 4 correct

1. Which layer gives content structure and meaning?

2. Which React value should change after a click and trigger a render?

3. Where should a database secret be used?

4. What does a Next.js Route Handler implement?

OFFICIAL REFERENCE MAP

Learn each subject from its primary source.

Use tutorials for the first pass, then return to reference docs while building. Do not try to memorize the whole API.

Web foundations