Frontend React consommant l’API FastAPI

Repères utiles

remarque

Ce chapitre est un bonus pratique à lire après le cœur backend. Il montre comment connecter un petit frontend React à l’API FastAPI, sans faire du frontend un prérequis pour comprendre le wiki.

Introduction

Après les chapitres backend, l’API dispose déjà d’authentification, de routes protégées et d’un vrai flux utilisateur. Ce chapitre montre comment brancher un client React minimal mais réel sur ce backend : login, lecture des tâches, création de tâche et demande de reset.

Ce que ce chapitre va accomplir

À la fin de ce chapitre, tu auras :

une base React + Vite + TypeScript,
un client API centralisé,
un AuthContext pour gérer le token,
un ProtectedRoute,
une page de login,
une page de demande de reset password,
un dashboard qui lit les tâches de l’utilisateur,
un formulaire de création de tâche,
la configuration CORS côté backend,
une compréhension claire de :
- localStorage,
- header Authorization,
- react-router-dom,
- @tanstack/react-query,
- intégration frontend/backend locale.

Avant de commencer

Ce chapitre reste un bonus, mais il a quelques prérequis précis :

les routes d’authentification doivent déjà fonctionner,
/user/me, /task/mine et /task/ doivent répondre côté backend,
CORS doit pouvoir être activé,
Celery n’est pas un prérequis pour suivre le frontend.

Autrement dit, lis ce chapitre après le cœur API, pas forcément après chaque détail d’infrastructure.

Sources et choix pédagogiques

Ce chapitre s’appuie principalement sur :

31-React JS/155-context.zip
31-React JS/158-src.zip
32-Frontend/166-app.zip

Les sources montrent trois niveaux d’évolution :

un contexte React simple,
une consommation API avec client typé,
un frontend plus complet avec auth et dashboard.

Pour le wiki, on garde une version volontairement plus petite :

Vite + React + TypeScript,
react-router-dom,
@tanstack/react-query,
axios,
AuthContext,
dashboard tâches,
login et reset password.

Architecture visée après ce chapitre

On ajoute un dossier frontend séparé du backend :

fastapi-base-api/
├── main.py
├── config.py
├── api/
├── core/
├── database/
├── services/
├── worker/
├── templates/
└── frontend/
    ├── package.json
    ├── vite.config.ts
    ├── .env
    ├── index.html
    └── src/
        ├── main.tsx
        ├── App.tsx
        ├── lib/
        │   └── api.ts
        ├── context/
        │   └── AuthContext.tsx
        ├── components/
        │   ├── ProtectedRoute.tsx
        │   ├── TaskCard.tsx
        │   └── CreateTaskForm.tsx
        └── pages/
            ├── LoginPage.tsx
            ├── ForgotPasswordPage.tsx
            └── DashboardPage.tsx

Repères utiles avant le code

Avant de commencer, retiens ces idées simples :

1. Le frontend et le backend sont deux projets séparés

C’est important mentalement.

Le frontend :

appelle l’API,
ne remplace pas l’API,
ne doit pas embarquer la logique métier sensible.

2. Le login FastAPI ici attend du `x-www-form-urlencoded`

C’est très important.

Notre route /user/token utilise OAuth2PasswordRequestForm. Donc côté React, tu ne peux pas envoyer n’importe quel JSON brut. Il faut envoyer un payload compatible formulaire.

3. Le token doit être centralisé

Si tu gères le token dans dix composants différents, ton frontend devient vite fragile. C’est précisément le rôle de AuthContext.

4. Le dashboard doit lire l’API, pas simuler des données locales

Le but n’est pas de faire une maquette fake. Le but est de montrer comment l’UI consomme vraiment :

/user/token
/user/me
/task/mine
/task/
/user/password-reset/request

5. CORS est un vrai prérequis

Si ton backend refuse les appels depuis http://localhost:5173, rien ne marchera côté navigateur.

Étape 1 — créer le frontend React

Place-toi à la racine du projet backend, puis lance :

npm create vite@latest frontend -- --template react-ts
cd frontend
npm install react-router-dom @tanstack/react-query axios

Pourquoi cette stack ?

`Vite`

Rapide, simple, parfait pour un tutoriel pédagogique.

`react-router-dom`

Pour avoir une vraie navigation frontend.

`@tanstack/react-query`

Pour gérer les appels API, le cache et l’invalidation proprement.

`axios`

Pour centraliser le client HTTP simplement.

Étape 2 — ajouter CORS côté backend

Avant même d’écrire React, il faut permettre au navigateur d’appeler l’API.

Fais évoluer main.py comme ceci :

from contextlib import asynccontextmanager

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from scalar_fastapi import get_scalar_api_reference

from api.router import router
from core.exceptions import add_exception_handlers
from core.middleware import request_metrics_middleware
from database.session import create_db_tables


@asynccontextmanager
async def lifespan(app: FastAPI):
    await create_db_tables()
    yield


app = FastAPI(
    title="Task Organizer API",
    description="Une API FastAPI consommée par un frontend React",
    lifespan=lifespan,
)

add_exception_handlers(app)
app.middleware("http")(request_metrics_middleware)

app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "http://localhost:5173",
    ],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

app.include_router(router)


@app.get("/scalar", include_in_schema=False)
def get_scalar_docs():
    return get_scalar_api_reference(
        openapi_url=app.openapi_url,
        title="Scalar API",
    )

Pourquoi cette étape est indispensable

Sans cela, le navigateur bloquera les requêtes cross-origin.

C’est un point classique quand on passe de :

curl
ou tests backend

à :

un vrai frontend web.

Étape 3 — préparer l’environnement frontend

Crée frontend/.env :

VITE_API_URL=http://localhost:8000

Pourquoi passer par `VITE_API_URL`

Parce que ça évite de hardcoder partout http://localhost:8000. Et plus tard, tu pourras remplacer plus facilement l’URL pour :

un staging,
un déploiement,
un reverse proxy.

Étape 4 — créer `src/lib/api.ts`

Ici, on choisit volontairement un client manuel simple.

remarque

Les sources montrent aussi un client généré à partir d’OpenAPI. C’est très utile plus tard, mais pour apprendre, une version manuelle reste plus lisible.

Crée frontend/src/lib/api.ts :

import axios from "axios";

export type StatusTask = "to_do" | "in_progress" | "completed";

export interface UserRead {
  id: number;
  name: string;
  email: string;
  email_verified: boolean;
}

export interface TaskRead {
  id: number;
  title: string;
  description: string;
  status: StatusTask;
  owner_id: number;
}

export interface TaskCreate {
  title: string;
  description: string;
}

export interface TokenResponse {
  access_token: string;
  token_type: string;
}

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
});

export function setAuthToken(token: string | null) {
  if (token) {
    api.defaults.headers.common.Authorization = `Bearer ${token}`;
  } else {
    delete api.defaults.headers.common.Authorization;
  }
}

export async function loginUser(email: string, password: string) {
  const form = new URLSearchParams();
  form.append("username", email);
  form.append("password", password);

  const { data } = await api.post<TokenResponse>("/user/token", form, {
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
  });

  return data;
}

export async function getMe() {
  const { data } = await api.get<UserRead>("/user/me");
  return data;
}

export async function getMyTasks() {
  const { data } = await api.get<TaskRead[]>("/task/mine");
  return data;
}

export async function createTask(payload: TaskCreate) {
  const { data } = await api.post<TaskRead>("/task/", payload);
  return data;
}

export async function requestPasswordReset(email: string) {
  const { data } = await api.post("/user/password-reset/request", {
    email,
  });
  return data;
}

Ce qu’il faut remarquer

`setAuthToken()`

Cette fonction centralise l’injection du header Authorization.

`URLSearchParams`

C’est ici qu’on respecte le format attendu par /user/token.

Le frontend connaît les types utiles

On définit seulement les types nécessaires au frontend. Cela suffit largement pour démarrer.

Étape 5 — créer `src/context/AuthContext.tsx`

Crée frontend/src/context/AuthContext.tsx :

import {
  createContext,
  useContext,
  useEffect,
  useMemo,
  useState,
  type ReactNode,
} from "react";

import { getMe, loginUser, setAuthToken, type UserRead } from "../lib/api";

interface AuthContextType {
  token: string | null;
  user: UserRead | null;
  isReady: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [token, setToken] = useState<string | null>(null);
  const [user, setUser] = useState<UserRead | null>(null);
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    async function bootstrap() {
      const savedToken = localStorage.getItem("token");

      if (!savedToken) {
        setIsReady(true);
        return;
      }

      try {
        setAuthToken(savedToken);
        const me = await getMe();
        setToken(savedToken);
        setUser(me);
      } catch {
        localStorage.removeItem("token");
        setAuthToken(null);
        setToken(null);
        setUser(null);
      } finally {
        setIsReady(true);
      }
    }

    bootstrap();
  }, []);

  async function login(email: string, password: string) {
    const data = await loginUser(email, password);

    localStorage.setItem("token", data.access_token);
    setAuthToken(data.access_token);
    setToken(data.access_token);

    const me = await getMe();
    setUser(me);
  }

  function logout() {
    localStorage.removeItem("token");
    setAuthToken(null);
    setToken(null);
    setUser(null);
  }

  const value = useMemo(
    () => ({ token, user, isReady, login, logout }),
    [token, user, isReady],
  );

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used inside AuthProvider");
  }
  return context;
}

Pourquoi cette structure est saine

le token est centralisé,
le user courant est centralisé,
le bootstrap recharge la session après refresh navigateur,
l’UI ne dépend pas de localStorage partout.

Étape 6 — créer `src/components/ProtectedRoute.tsx`

Crée frontend/src/components/ProtectedRoute.tsx :

import { Navigate } from "react-router-dom";

import { useAuth } from "../context/AuthContext";

export function ProtectedRoute({ children }: { children: JSX.Element }) {
  const { token, isReady } = useAuth();

  if (!isReady) {
    return <p>Chargement de la session...</p>;
  }

  if (!token) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

Pourquoi c’est utile

Parce qu’on veut éviter que :

la page dashboard s’ouvre sans token,
chaque page protège la session à sa manière.

Étape 7 — créer `src/components/TaskCard.tsx`

Crée frontend/src/components/TaskCard.tsx :

import type { TaskRead } from "../lib/api";

export function TaskCard({ task }: { task: TaskRead }) {
  return (
    <article
      style={{
        border: "1px solid #e5e7eb",
        borderRadius: 16,
        padding: 16,
        background: "white",
      }}
    >
      <p style={{ color: "#6b7280", marginBottom: 8 }}>Task #{task.id}</p>
      <h3 style={{ marginBottom: 8 }}>{task.title}</h3>
      <p style={{ marginBottom: 12 }}>{task.description}</p>
      <strong>Status: {task.status}</strong>
    </article>
  );
}

Étape 8 — créer `src/components/CreateTaskForm.tsx`

Crée frontend/src/components/CreateTaskForm.tsx :

import { useState } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";

import { createTask } from "../lib/api";

export function CreateTaskForm() {
  const queryClient = useQueryClient();
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");

  const mutation = useMutation({
    mutationFn: createTask,
    onSuccess: () => {
      setTitle("");
      setDescription("");
      queryClient.invalidateQueries({ queryKey: ["my-tasks"] });
    },
  });

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (!title.trim() || !description.trim()) {
      return;
    }

    mutation.mutate({ title, description });
  }

  return (
    <form
      onSubmit={handleSubmit}
      style={{
        display: "grid",
        gap: 12,
        padding: 16,
        border: "1px solid #e5e7eb",
        borderRadius: 16,
        background: "white",
      }}
    >
      <h2>Créer une tâche</h2>

      <input
        value={title}
        onChange={(event) => setTitle(event.target.value)}
        placeholder="Titre"
      />

      <textarea
        value={description}
        onChange={(event) => setDescription(event.target.value)}
        placeholder="Description"
        rows={4}
      />

      <button type="submit" disabled={mutation.isPending}>
        {mutation.isPending ? "Création..." : "Créer"}
      </button>

      {mutation.isError && <p>Échec de création de la tâche.</p>}
    </form>
  );
}

Ce que montre ce composant

C’est l’équivalent pédagogique de ce qu’on voit dans les sources frontend avec :

formulaire,
mutation,
invalidation du cache,
UI branchée sur une vraie route backend.

Étape 9 — créer `src/pages/LoginPage.tsx`

Crée frontend/src/pages/LoginPage.tsx :

import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";

import { useAuth } from "../context/AuthContext";

export function LoginPage() {
  const { login } = useAuth();
  const navigate = useNavigate();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    setLoading(true);

    try {
      await login(email, password);
      navigate("/dashboard");
    } catch {
      setError("Connexion impossible. Vérifie les identifiants ou la validation de l’email.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <main style={{ maxWidth: 420, margin: "48px auto", display: "grid", gap: 16 }}>
      <h1>Connexion</h1>

      <form onSubmit={handleSubmit} style={{ display: "grid", gap: 12 }}>
        <input
          type="email"
          placeholder="email@example.com"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
          required
        />

        <input
          type="password"
          placeholder="Mot de passe"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
          required
        />

        <button type="submit" disabled={loading}>
          {loading ? "Connexion..." : "Se connecter"}
        </button>
      </form>

      {error && <p>{error}</p>}

      <Link to="/forgot-password">Mot de passe oublié ?</Link>
    </main>
  );
}

Lien avec les sources

Cette page reprend l’esprit de :

app/routes/seller/login.tsx
app/components/login-form.tsx
app/contexts/AuthContext.tsx

mais dans une version plus simple et plus lisible pour le wiki.

Étape 10 — créer `src/pages/ForgotPasswordPage.tsx`

Crée frontend/src/pages/ForgotPasswordPage.tsx :

import { useState } from "react";

import { requestPasswordReset } from "../lib/api";

export function ForgotPasswordPage() {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setLoading(true);
    setMessage(null);

    try {
      await requestPasswordReset(email);
      setMessage("Si le compte existe, un email de reset a été envoyé.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <main style={{ maxWidth: 420, margin: "48px auto", display: "grid", gap: 16 }}>
      <h1>Mot de passe oublié</h1>

      <form onSubmit={handleSubmit} style={{ display: "grid", gap: 12 }}>
        <input
          type="email"
          placeholder="email@example.com"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
          required
        />

        <button type="submit" disabled={loading}>
          {loading ? "Envoi..." : "Envoyer le lien"}
        </button>
      </form>

      {message && <p>{message}</p>}
    </main>
  );
}

Ce que montre cette page

Elle illustre parfaitement un flow utilisateur réel :

formulaire simple,
appel POST vers l’API,
réponse volontairement générique,
UX cohérente avec le chapitre notifications.

Étape 11 — créer `src/pages/DashboardPage.tsx`

Crée frontend/src/pages/DashboardPage.tsx :

import { useQuery } from "@tanstack/react-query";

import { CreateTaskForm } from "../components/CreateTaskForm";
import { TaskCard } from "../components/TaskCard";
import { useAuth } from "../context/AuthContext";
import { getMyTasks } from "../lib/api";

export function DashboardPage() {
  const { user, logout } = useAuth();

  const { data, isLoading, isError } = useQuery({
    queryKey: ["my-tasks"],
    queryFn: getMyTasks,
  });

  return (
    <main style={{ maxWidth: 980, margin: "32px auto", display: "grid", gap: 24 }}>
      <header
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          gap: 16,
        }}
      >
        <div>
          <p style={{ color: "#6b7280" }}>Connecté en tant que</p>
          <h1>{user?.name}</h1>
          <p>{user?.email}</p>
        </div>

        <button onClick={logout}>Se déconnecter</button>
      </header>

      <CreateTaskForm />

      <section style={{ display: "grid", gap: 16 }}>
        <h2>Mes tâches</h2>

        {isLoading && <p>Chargement des tâches...</p>}
        {isError && <p>Impossible de charger les tâches.</p>}

        {!isLoading && !isError && data?.length === 0 && (
          <p>Aucune tâche pour le moment.</p>
        )}

        <div style={{ display: "grid", gap: 16 }}>
          {data?.map((task) => (
            <TaskCard key={task.id} task={task} />
          ))}
        </div>
      </section>
    </main>
  );
}

Pourquoi ce dashboard est intéressant

Il relie plusieurs briques du wiki :

auth,
protection frontend,
lecture des tâches possédées,
création de tâche,
invalidation React Query,
session frontend durable.

Étape 12 — créer `src/App.tsx`

Crée frontend/src/App.tsx :

import { Navigate, Route, Routes } from "react-router-dom";

import { ProtectedRoute } from "./components/ProtectedRoute";
import { DashboardPage } from "./pages/DashboardPage";
import { ForgotPasswordPage } from "./pages/ForgotPasswordPage";
import { LoginPage } from "./pages/LoginPage";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/login" replace />} />
      <Route path="/login" element={<LoginPage />} />
      <Route path="/forgot-password" element={<ForgotPasswordPage />} />
      <Route
        path="/dashboard"
        element={
          <ProtectedRoute>
            <DashboardPage />
          </ProtectedRoute>
        }
      />
    </Routes>
  );
}

export default App;

Étape 13 — créer `src/main.tsx`

Crée frontend/src/main.tsx :

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";
import { AuthProvider } from "./context/AuthContext";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <AuthProvider>
          <App />
        </AuthProvider>
      </BrowserRouter>
    </QueryClientProvider>
  </React.StrictMode>,
);

Étape 14 — lancer le frontend

Depuis frontend/ :

npm run dev

Le frontend devrait être disponible sur :

http://localhost:5173

Et le backend sur :

http://localhost:8000

Vérification guidée

1. Vérifier le backend

Avant le frontend, assure-toi que l’API répond toujours :

curl -i http://localhost:8000/docs

Tu peux tester le token avant même d’ouvrir React :

curl -i \
  -X POST http://localhost:8000/user/token \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d 'username=enes@test.local&password=StrongPass123!'

3. Ouvrir le frontend

Va sur :

http://localhost:5173

4. Tenter une connexion

Si l’email n’est pas vérifié, tu dois voir un échec de connexion. Si le compte est vérifié, tu dois être redirigé vers /dashboard.

5. Vérifier le dashboard

Une fois connecté :

le frontend doit appeler /user/me,
puis /task/mine,
puis afficher les tâches.

6. Créer une tâche

Depuis le formulaire du dashboard :

une requête POST doit partir vers /task/,
la liste doit ensuite se rafraîchir.

7. Tester le mot de passe oublié

Depuis /forgot-password :

envoie un email,
observe le message de confirmation générique.

Ce que ce chapitre ne fait pas encore

Ce chapitre ne couvre pas encore :

un design system complet,
un back-office React riche,
SSR,
Remix/Next.js,
génération automatique complète du client API,
forms ultra-avancées,
gestion de refresh token.

Et c’est volontaire.

Le but ici est de montrer comment :

connecter React à ton API,
centraliser auth + token,
lire et écrire des données métier,
brancher un vrai dashboard simple.

Lien plus direct avec les sources frontend

Ce qu’on a gardé

l’idée de UserContext / AuthContext,
l’idée d’un client API centralisé,
l’idée de pages login / forgot-password / dashboard,
l’idée de formulaires connectés à l’API,
l’idée d’une app réellement consommatrice du backend.

Ce qu’on a simplifié

on n’a pas gardé toute l’architecture UI avancée,
on n’a pas gardé tout le design system,
on n’a pas gardé la couche app-framework complète telle quelle.

Pourquoi ? Parce que pour le wiki, l’objectif est d’abord de faire comprendre le branchement frontend/backend.

Bonus — quand passer à un client généré ?

La source 31-React JS/158-src.zip montre un client.ts généré. C’est très bien quand :

l’API grossit,
les schémas sont nombreux,
tu veux réduire le code HTTP manuel.

Mais pédagogiquement, il vaut mieux d’abord comprendre :

le login,
le header Authorization,
la récupération de /user/me,
les appels protégés.

Ensuite seulement, un client généré devient vraiment rentable.

Erreurs fréquentes

Erreur 1 — blocage CORS dans le navigateur

Cause fréquente :

oubli de CORSMiddleware.

Correction :

ajoute bien http://localhost:5173 dans allow_origins.

Erreur 2 — login en `422` ou `400`

Cause fréquente :

payload envoyé en JSON au lieu de x-www-form-urlencoded.

Correction :

utilise URLSearchParams et le bon header Content-Type.

Erreur 3 — dashboard vide alors que des tâches existent

Cause fréquente :

token non injecté,
mauvais utilisateur,
endpoint incorrect.

Correction :

vérifie setAuthToken() et l’appel /task/mine.

Erreur 4 — après refresh, l’utilisateur est déconnecté alors que le token existe

Cause fréquente :

oubli du bootstrap dans AuthContext.

Correction :

recharge le token depuis localStorage puis appelle /user/me.

Erreur 5 — la tâche est créée mais l’UI ne se met pas à jour

Cause fréquente :

oubli de invalidateQueries({ queryKey: ["my-tasks"] }).

Correction :

invalide correctement le cache React Query.

Erreur 6 — `VITE_API_URL` n’est pas prise en compte

Cause fréquente :

variable mal préfixée,
serveur Vite non relancé.

Correction :

garde le préfixe VITE_ et relance npm run dev.

Bonnes pratiques à retenir

1. Garde le frontend séparé du backend

Un dossier frontend/ dédié est beaucoup plus propre.

2. Centralise le client API

Évite les appels fetch dispersés partout.

3. Centralise la session dans un contexte

Évite de manipuler directement localStorage dans tous les composants.

4. Utilise React Query pour les données serveur

C’est beaucoup plus propre que de multiplier les useEffect manuels.

5. Commence simple, puis raffine l’UI ensuite

Le plus important ici est le flux technique, pas le maquillage final.

Checklist de validation

À la fin, tu dois pouvoir cocher tout ceci :

Résumé final

Dans ce chapitre bonus, tu as appris à faire vivre ton API FastAPI dans une vraie interface cliente React.

Le point le plus important à retenir est simple :

le backend garde la logique métier,
le frontend gère l’expérience utilisateur,
et les deux se parlent proprement à travers :
- un client API,
- un contexte d’auth,
- un routage clair,
- des appels réseau bien structurés.

Autrement dit : ce chapitre te fait passer de "j’ai une API" à "j’ai une API qui peut déjà alimenter un produit web".

Pour aller plus loin

Parcours de lecture — pour replacer ce bonus dans le bon ordre de lecture
FAQ, erreurs fréquentes et conseils pratiques — pour retrouver les pièges full-stack les plus probables
Advanced FastAPI — pour revenir au hub du bloc avancé
API de base — pour repartir du socle si tu veux refaire le parcours côté backend sans le bonus frontend

Introduction​

Ce que ce chapitre va accomplir​

Avant de commencer​

Sources et choix pédagogiques​

Architecture visée après ce chapitre​

Repères utiles avant le code​

1. Le frontend et le backend sont deux projets séparés​

2. Le login FastAPI ici attend du x-www-form-urlencoded​

3. Le token doit être centralisé​

4. Le dashboard doit lire l’API, pas simuler des données locales​

5. CORS est un vrai prérequis​

Étape 1 — créer le frontend React​

Pourquoi cette stack ?​

Vite​

react-router-dom​

@tanstack/react-query​

axios​

Étape 2 — ajouter CORS côté backend​

Pourquoi cette étape est indispensable​

Étape 3 — préparer l’environnement frontend​

Pourquoi passer par VITE_API_URL​

Étape 4 — créer src/lib/api.ts​

Ce qu’il faut remarquer​

setAuthToken()​

URLSearchParams​

Le frontend connaît les types utiles​

Étape 5 — créer src/context/AuthContext.tsx​

Pourquoi cette structure est saine​

Étape 6 — créer src/components/ProtectedRoute.tsx​

Pourquoi c’est utile​

Étape 7 — créer src/components/TaskCard.tsx​

Étape 8 — créer src/components/CreateTaskForm.tsx​

Ce que montre ce composant​

Étape 9 — créer src/pages/LoginPage.tsx​

Lien avec les sources​

Étape 10 — créer src/pages/ForgotPasswordPage.tsx​

Ce que montre cette page​

Étape 11 — créer src/pages/DashboardPage.tsx​

Pourquoi ce dashboard est intéressant​

Étape 12 — créer src/App.tsx​

Étape 13 — créer src/main.tsx​

Étape 14 — lancer le frontend​

Vérification guidée​

1. Vérifier le backend​

2. Vérifier le login backend à la main​

3. Ouvrir le frontend​

4. Tenter une connexion​

5. Vérifier le dashboard​

6. Créer une tâche​

7. Tester le mot de passe oublié​

Ce que ce chapitre ne fait pas encore​

Lien plus direct avec les sources frontend​

Ce qu’on a gardé​

Ce qu’on a simplifié​

Bonus — quand passer à un client généré ?​

Erreurs fréquentes​

Erreur 1 — blocage CORS dans le navigateur​

Erreur 2 — login en 422 ou 400​

Erreur 3 — dashboard vide alors que des tâches existent​

Erreur 4 — après refresh, l’utilisateur est déconnecté alors que le token existe​

Erreur 5 — la tâche est créée mais l’UI ne se met pas à jour​

Erreur 6 — VITE_API_URL n’est pas prise en compte​

Bonnes pratiques à retenir​

1. Garde le frontend séparé du backend​

2. Centralise le client API​

3. Centralise la session dans un contexte​

4. Utilise React Query pour les données serveur​

5. Commence simple, puis raffine l’UI ensuite​

Checklist de validation​

Résumé final​

Pour aller plus loin​

Introduction

Ce que ce chapitre va accomplir

Avant de commencer

Sources et choix pédagogiques

Architecture visée après ce chapitre

Repères utiles avant le code

1. Le frontend et le backend sont deux projets séparés

2. Le login FastAPI ici attend du `x-www-form-urlencoded`

3. Le token doit être centralisé

4. Le dashboard doit lire l’API, pas simuler des données locales

5. CORS est un vrai prérequis

Étape 1 — créer le frontend React

Pourquoi cette stack ?

`Vite`

`react-router-dom`

`@tanstack/react-query`

`axios`

Étape 2 — ajouter CORS côté backend

Pourquoi cette étape est indispensable

Étape 3 — préparer l’environnement frontend

Pourquoi passer par `VITE_API_URL`

Étape 4 — créer `src/lib/api.ts`

Ce qu’il faut remarquer

`setAuthToken()`

`URLSearchParams`

Le frontend connaît les types utiles

Étape 5 — créer `src/context/AuthContext.tsx`

Pourquoi cette structure est saine

Étape 6 — créer `src/components/ProtectedRoute.tsx`

Pourquoi c’est utile

Étape 7 — créer `src/components/TaskCard.tsx`

Étape 8 — créer `src/components/CreateTaskForm.tsx`

Ce que montre ce composant

Étape 9 — créer `src/pages/LoginPage.tsx`

Lien avec les sources

Étape 10 — créer `src/pages/ForgotPasswordPage.tsx`

Ce que montre cette page

Étape 11 — créer `src/pages/DashboardPage.tsx`

Pourquoi ce dashboard est intéressant

Étape 12 — créer `src/App.tsx`

Étape 13 — créer `src/main.tsx`

Étape 14 — lancer le frontend

Vérification guidée

1. Vérifier le backend

2. Vérifier le login backend à la main

3. Ouvrir le frontend

4. Tenter une connexion

5. Vérifier le dashboard

6. Créer une tâche

7. Tester le mot de passe oublié

Ce que ce chapitre ne fait pas encore

Lien plus direct avec les sources frontend

Ce qu’on a gardé

Ce qu’on a simplifié

Bonus — quand passer à un client généré ?

Erreurs fréquentes

Erreur 1 — blocage CORS dans le navigateur

Erreur 2 — login en `422` ou `400`

Erreur 3 — dashboard vide alors que des tâches existent

Erreur 4 — après refresh, l’utilisateur est déconnecté alors que le token existe

Erreur 5 — la tâche est créée mais l’UI ne se met pas à jour

Erreur 6 — `VITE_API_URL` n’est pas prise en compte

Bonnes pratiques à retenir

1. Garde le frontend séparé du backend

2. Centralise le client API

3. Centralise la session dans un contexte

4. Utilise React Query pour les données serveur

5. Commence simple, puis raffine l’UI ensuite

Checklist de validation

Résumé final

Pour aller plus loin