Initialisation projet React Router 7 : setup Tailwind, shadcn, Zod

Apprends à lancer ton projet React Router 7 de zéro, avec Tailwind, shadcn/ui et validation Zod. Pose des bases saines pour coder ton e-commerce.

4 min read
Code de la leçon

Continuez votre apprentissage

Accédez aux 9 modules et 76 leçons de cette formation.

599€

Accès à vie · Garantie 30 jours

Pourquoi repartir d’un projet nu ?

  • 0 code « magique » caché dans un boilerplate.
  • Tu comprends chaque dépendance ajoutée.
  • Tu règles toi-même les bugs sans fouiller un template XXL.

Les stacks citées dans la vidéo :

  1. Epic Stack – impressionnante, mais blindée de features inutiles pour notre boutique (SQLite, Playwright, etc.).
  2. Base Stack (Forge 42) – plus légère, mais encore trop de pré-configuration.
  3. Better-T-Stack – générateur clé-en-main, pratique… un peu trop abstrait pour notre objectif.

👉 On part donc d’un dossier vide et on ajoute uniquement ce dont on a besoin.

Étape 1 – créer le squelette React Router 7

Terminal
1
npx create-react-router@latest shop-router

2
cd shop-router

3
npm install

4
npm run dev
  • create-react-router génère un projet Vite + React Router 7.
  • Vite lance le serveur sur localhost:5173, la page par défaut s’affiche.

Étape 2 – pousser sur GitHub (CI à venir)

Terminal
1
git init

2
git add .

3
git commit -m "feat: boot React Router 7"

4
git branch -M main

5
git remote add origin git@github.com:<ton-user>/shop-router.git

6
git push -u origin main

Pourquoi tout de suite ?

  • Tu pourras brancher GitHub Actions dès le module « Déploiement ».
  • Chaque leçon = une PR dédiée, historique clair.

Étape 3 – installer Tailwind CSS + shadcn/ui

  1. shadcn/ui installe et configure Tailwind v4 pour toi :
    Terminal
    1
    npx shadcn-ui@latest init        # choix du thème « stone »
  2. On récupère tous les composants par défaut (boutons, inputs, etc.) :
    Terminal
    1
    npx shadcn-ui@latest add --all
    shadcn ajoute :
    • la police Inter pré-connectée dans app/root.tsx,
    • app/app.css rempli des variables CSS,
    • une cinquantaine de composants Radix stylés.

Étape 4 – première vérification visuelle

app/routes/home.tsx
1
import { Button } from "~/components/ui/button";

2


3
export default function Home() {

4
  return (

5
    <main className="grid place-content-center min-h-screen">

6
      <Button className="text-xl">Bienvenue sur Shop Router !</Button>

7
    </main>

8
  );

9
}

HMR de Vite ↔ Tailwind : la couleur change instantanément.

Étape 5 – ajouter la validation Zod + Conform v3

Terminal
1
npm install zod@3.25 @conform-to/react@ @conform-tozod@3

5.1 – définir un schéma

utils/login-schema.ts
1
import { z } from "zod";

2


3
export const LoginSchema = z.object({

4
  email: z.string().email("Email invalide"),

5
});

5.2 – hook Conform dans la page

app/routes/home.tsx
1
import {

2
  useForm,

3
  getFormProps,

4
  getInputProps,

5
} from "@conform-to/react";

6
import { getZodConstraint, parseWithZod } from "@conform-to/zod";

7
import { Form, useActionData, data, type ActionFunctionArgs } from "react-router";

8
import { Field } from "~/components/forms";          // composant copié d’EpicStack

9
import { Button } from "~/components/ui/button";

10
import { LoginSchema } from "~/utils/login-schema";

11


12
export async function action({ request }: ActionFunctionArgs) {

13
  const fd = await request.formData();

14
  const submission = parseWithZod(fd, { schema: LoginSchema });

15
  if (submission.status !== "success") {

16
    return data({ result: submission.reply() }, { status: 400 });

17
  }

18
  return data({ result: submission.reply() });

19
}

20


21
export default function Home() {

22
  const actionData = useActionData<typeof action>();

23


24
  const [form, fields] = useForm({

25
    lastResult: actionData?.result,

26
    constraint: getZodConstraint(LoginSchema),

27
    onValidate({ formData }) {

28
      return parseWithZod(formData, { schema: LoginSchema });

29
    },

30
  });

31


32
  return (

33
    <Form method="POST" {...getFormProps(form)} className="w-80 space-y-5">

34
      <Field

35
        labelProps={{ children: "Email" }}

36
        inputProps={getInputProps(fields.email, { type: "email" })}

37
        errors={fields.email.errors}

38
      />

39
      <Button className="w-full" type="submit">

40
        Continuer

41
      </Button>

42
    </Form>

43
  );

44
}

Explications :

  • useForm gère l’état, la validation client et la synchro avec la réponse serveur.
  • Field (issu de l’EpicStack) affiche label + input + erreurs, accessibilité comprise.
  • action() re-valide côté serveur et renvoie 400 si besoin.

Résultat : un champ e-mail qui clignote rouge dès qu’il est invalide… sans écrire une seule ligne de useState.

Étape 6 – commit / PR « Initialisation »

Terminal
1
git checkout -b 7-1-initialisation-projet

2
git add .

3
git commit -m "feat: Tailwind + shadcn + Zod + Conform + formulaire email"

4
git push -u origin 7-1-initialisation-projet

Crée la Pull Request, vérifie les fichiers ajoutés (composants shadcn, forms.tsx, etc.) puis merge vers main.

Ce que tu as maintenant

  • Un projet React Router 7 nu, propre, versionné.
  • Tailwind CSS + shadcn/ui prêts pour styler ton e-commerce.
  • Zod + Conform configurés pour tous les formulaires futurs.
  • Un premier champ e-mail validé client + serveur.

Prochaine étape 👉 initialiser Prisma + PostgreSQL pour stocker tes produits et utilisateurs.

Inclus
Quiz interactifTestez vos connaissances
Validez votre compréhension du module avec notre quiz interactif personnalisé.
1

Comprendre les concepts fondamentaux

Quelle est la principale différence entre les composants client et serveur dans React ?

Les composants client s'exécutent uniquement dans le navigateur
Les composants serveur peuvent utiliser useState
2

Optimisation des performances

Quelle technique est recommandée pour éviter les rendus inutiles dans React ?

Utiliser React.memo pour les composants fonctionnels
Ajouter plus d'états locaux
3

Architecture des données

Quel hook permet de gérer les effets de bord dans un composant React ?

useEffect
useState

Débloquez ce quiz et tous les autres contenus