Gard'Kaz · CatalogueRetour au site

Pour l'équipe technique

Guide d'intégration

Cette façade est front-only : toutes les données viennent de src/lib/mock/data.ts. Voici comment la brancher sur le vrai back-end.

Arborescence

Organisation des dossiers de la façade.

src/
├── app/                       # routes Next.js (App Router)
│   ├── page.tsx                # accueil public
│   ├── connexion/
│   ├── inscription/
│   ├── espace/                 # zone connectée
│   │   ├── nouvelle-garde/
│   │   ├── historique/
│   │   ├── messages/
│   │   └── profil/
│   └── composants/             # cette documentation (à exclure du build client final)
├── components/
│   ├── ui/                     # design system (Button, Primitives, Toast, Lambrequin)
│   └── catalogue/               # composants internes de cette doc
└── lib/
    └── mock/data.ts            # données de démo à remplacer par de vrais appels API

Écran → Composant → Données → Endpoint

Pour chaque écran, le composant UI utilisé, le type TypeScript attendu et l'endpoint à brancher.

ÉcranComposantDonnées attenduesEndpoint à brancher
Accueil — avis voisinsCard + Avatar + Badgetype Avis = { id: string; auteur: string; avatar: string; note: number; texte: string }[]GET /api/avis
InscriptionTextField + TextArea + Buttontype InscriptionPayload = { email: string; nom: string; ville: string; motDePasse: string }POST /api/auth/inscription
ConnexionTextField + Buttontype ConnexionPayload = { email: string; motDePasse: string }POST /api/auth/connexion
Tableau de bord — mes gardesTabs + Card + Badge + Skeletontype Garde = { id: string; title: string; gardien: string; from: string; to: string; status: GardeStatus }[]GET /api/gardes
Nouvelle gardeSelectField + TextArea + Toggle + Buttontype NouvelleGardePayload = { type: string; from: string; to: string; animaux: string[]; instructions: string }POST /api/gardes
HistoriqueCard + Badge + EmptyStateGarde[] filtré sur status 'terminee' | 'annulee'GET /api/gardes?status=terminee,annulee
MessagesAvatar + TextArea + Buttontype Message = { id: string; auteur: string; texte: string; envoyeLe: string }[]GET /api/conversations/:id/messages
ProfilAvatar + TextField + Toggle + Stattype Profil = { nom: string; ville: string; avatar: string; kazPoints: number; notifications: boolean }GET /api/profil

Remplacer le mock par un fetch réel

Même contrat de retour (data / loading / error) : aucun composant d'écran à modifier, seul le hook de données change.

// avant — données mockées (démo front-only)
import { GARDES } from '@/lib/mock/data';

export function useGardes() {
  return { data: GARDES, loading: false, error: null };
}
// après — vrai fetch, même contrat de retour (rien à changer côté UI)
import { useEffect, useState } from 'react';
import type { Garde } from '@/lib/mock/data';

export function useGardes() {
  const [data, setData] = useState<Garde[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let active = true;
    fetch('/api/gardes')
      .then((res) => {
        if (!res.ok) throw new Error('Erreur serveur');
        return res.json();
      })
      .then((json) => active && setData(json))
      .catch((err) => active && setError(err.message));
    return () => {
      active = false;
    };
  }, []);

  return { data, loading: data === null && !error, error };
}

Conventions

Règles à respecter pour garder la façade cohérente avec le reste de l'app.

  • Props toujours typées (TypeScript strict, pas de any).
  • Aucun appel réseau dans les composants de src/components/ui/** — le fetch vit dans les pages ou des hooks dédiés.
  • Chaque écran gère explicitement 3 états : loading (Skeleton), error (toast + message), success (contenu réel).
  • Les variantes visuelles viennent du catalogue (/composants) — pas de style ad hoc en dehors des tokens Tailwind.

Commandes

Installation et lancement du projet.

pnpm install
pnpm dev
pnpm build

Checklist d'intégration

0/6 étapes cochées — état conservé localement dans cette page.