Skip to main content
L’interface utilisateur de Châtaigne est construite avec une architecture moderne et scalable permettant de gérer efficacement les commandes, les clients et l’administration des restaurants via une interface web intuitive.
Notre architecture frontend adopte une approche feature-based pour une meilleure maintenabilité et scalabilité, en séparant clairement l’état serveur de l’état client pour des performances optimales.

​
Principes Architecturaux Fondamentaux

Feature-Based Architecture

Organisation modulaire par fonctionnalités métier plutôt que par types de fichiers

Séparation des Responsabilités

Distinction claire entre vues, logique métier, services et état

État Hybride

TanStack Query pour l’état serveur, Zustand pour l’état client

​
1. Feature-Based Architecture

Notre architecture suit une approche feature-first qui organise le code par fonctionnalités métier. Cela nous permet de :
Maintenir une autonomie complète de chaque feature
Faciliter le développement en équipe avec moins de conflits
Faciliter la maintenance et l’évolution du code

​
2. Organisation Structurelle

L’application est organisée en modules distincts avec des responsabilités claires :
1

App Router (src/app/)

Gestion du routing Next.js uniquement - les pages exportent simplement les vues des features
2

Features (src/features/)

Modules métier autonomes contenant toute la logique spécifique à un domaine
3

Shared (src/shared/)

Composants UI, hooks, stores, services et utilitaires partagés entre toutes les features

​
3. Gestion d’État Hybride

Notre système sépare intelligemment l’état serveur de l’état client pour éviter les conflits et optimiser les performances :

​
Stack Technique

​
Technologies Principales

Framework

Next.js 15 avec App Router

Language

TypeScript pour la type safety

État Serveur

TanStack Query pour le data fetching

État Client

Zustand pour l’état local

Validation

Zod pour les schémas runtime

​
Outils de Développement

Monitoring

Sentry pour le tracking d’erreurs

Dev Tools

TanStack Query DevTools

​
Principes de Design Clés

1

Modularité

• Architecture feature-based pour l’autonomie des modules
• Composants réutilisables et découplés

• Hooks custom pour la logique partagée
2

Prévisibilité

• Type safety complète avec TypeScript et Zod
• État unidirectionnel et prévisible

• Conventions de nommage cohérentes
3

Performance

• Cache intelligent et synchronisation automatique
• Optimistic updates pour une UX réactive

• Minimisation des re-renders avec une architecture réactive
4

Maintenabilité

• Séparation claire des responsabilités
• Tests facilités par l'isolation des couches

• DevTools intégrés pour un debugging efficace

​
Avantages de cette Architecture

Cette approche feature-based avec gestion d’état hybride nous permet de maintenir une interface utilisateur moderne et scalable :

Autonomie des Features

Chaque module peut évoluer indépendamment sans impacter les autres

Performance Optimale

Cache intelligent et synchronisation automatique des données

Expérience Développeur

Structure prévisible et outils de debugging intégrés

Type Safety Complète

Réduction drastique des erreurs avec TypeScript et Zod