Full-Stack Path

Understanding this loop is the whole game:

1. User clicks a button in the browser (React)
2. Frontend sends an HTTP request  →  your API
3. Server checks auth, runs logic, queries the database
4. Server sends JSON back          →  the frontend
5. React updates the UI with the new data

Full-stack is the combination of both sides, not skipping one. Get comfortable with HTML, CSS, JavaScript, a backend language, and a database before calling yourself full-stack.

Make your React app call your API, then handle loading and error states. This pattern shows up in almost every app you'll build:

import { useEffect, useState } from "react";

function Posts() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Loading…</p>;
  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

After a user logs in, the server issues a token (like a JWT). The client sends it with each request so the server knows who's asking — no need to resend the password.

fetch("/api/profile", {
  headers: { Authorization: `Bearer ${token}` },
});

Once comfortable, learn a full-stack framework like Next.js, TanStack Start, or SvelteKit. They give you file-based routing, server-side rendering, and a place to run server code — all in one project.

• File-based routing — files become URLs
• Server-side rendering for speed & SEO
• Data loading co-located with your pages
• One deployment for frontend + backend

Deploy both sides, connect a real database, and add a custom domain. Nothing proves your skills like a live app people can actually use.