Initial project scaffold: FastAPI + React/Vite + PostgreSQL SaaS starter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -0,0 +1,27 @@
+import { Routes, Route, Navigate } from "react-router-dom";
+import LoginPage from "./pages/LoginPage";
+import RegisterPage from "./pages/RegisterPage";
+import DashboardPage from "./pages/DashboardPage";
+import { useAuth } from "./hooks/useAuth";
+
+function PrivateRoute({ children }: { children: React.ReactNode }) {
+  const { token } = useAuth();
+  return token ? <>{children}</> : <Navigate to="/login" replace />;
+}
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/register" element={<RegisterPage />} />
+      <Route
+        path="/"
+        element={
+          <PrivateRoute>
+            <DashboardPage />
+          </PrivateRoute>
+        }
+      />
+    </Routes>
+  );
+}

frontend/src/api/client.ts

@@ -0,0 +1,23 @@
+import axios from "axios";
+
+const api = axios.create({ baseURL: "/api" });
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem("token");
+  if (token) config.headers.Authorization = `Bearer ${token}`;
+  return config;
+});
+
+export default api;
+
+// --- Auth ---
+export const login = (email: string, password: string) =>
+  api
+    .post<{ access_token: string }>("/auth/login", new URLSearchParams({ username: email, password }))
+    .then((r) => r.data.access_token);
+
+export const register = (email: string, password: string, full_name?: string) =>
+  api.post("/auth/register", { email, password, full_name }).then((r) => r.data);
+
+// --- Users ---
+export const getMe = () => api.get("/users/me").then((r) => r.data);

frontend/src/hooks/useAuth.ts

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { login as apiLogin } from "../api/client";
+
+export function useAuth() {
+  const [token, setToken] = useState<string | null>(() => localStorage.getItem("token"));
+  const navigate = useNavigate();
+
+  const login = async (email: string, password: string) => {
+    const t = await apiLogin(email, password);
+    localStorage.setItem("token", t);
+    setToken(t);
+    navigate("/");
+  };
+
+  const logout = () => {
+    localStorage.removeItem("token");
+    setToken(null);
+    navigate("/login");
+  };
+
+  return { token, login, logout };
+}

frontend/src/main.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import App from "./App";
+
+const queryClient = new QueryClient();
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </React.StrictMode>
+);

frontend/src/pages/DashboardPage.tsx

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { getMe } from "../api/client";
+import { useAuth } from "../hooks/useAuth";
+
+export default function DashboardPage() {
+  const { logout } = useAuth();
+  const { data: user } = useQuery({ queryKey: ["me"], queryFn: getMe });
+
+  return (
+    <div style={{ padding: 32 }}>
+      <h1>Dashboard</h1>
+      {user && <p>Welcome, {user.full_name ?? user.email}</p>}
+      <button onClick={logout}>Logout</button>
+    </div>
+  );
+}

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
+
+export default function LoginPage() {
+  const { login } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    try {
+      await login(email, password);
+    } catch {
+      setError("Invalid email or password.");
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: 400, margin: "100px auto", padding: 24 }}>
+      <h1>Sign in</h1>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label>Email</label>
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+        </div>
+        <div>
+          <label>Password</label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </div>
+        {error && <p style={{ color: "red" }}>{error}</p>}
+        <button type="submit">Login</button>
+      </form>
+      <p>
+        No account? <Link to="/register">Register</Link>
+      </p>
+    </div>
+  );
+}

frontend/src/pages/RegisterPage.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { register } from "../api/client";
+
+export default function RegisterPage() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [fullName, setFullName] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    try {
+      await register(email, password, fullName);
+      navigate("/login");
+    } catch {
+      setError("Registration failed. Email may already be in use.");
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: 400, margin: "100px auto", padding: 24 }}>
+      <h1>Create account</h1>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label>Full name</label>
+          <input value={fullName} onChange={(e) => setFullName(e.target.value)} />
+        </div>
+        <div>
+          <label>Email</label>
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+        </div>
+        <div>
+          <label>Password</label>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </div>
+        {error && <p style={{ color: "red" }}>{error}</p>}
+        <button type="submit">Register</button>
+      </form>
+      <p>
+        Already have an account? <Link to="/login">Sign in</Link>
+      </p>
+    </div>
+  );
+}