Architecture

Architecture du projet

Arborescence

src/app/
├── features/                     # vues/pages liées à une route
│   ├── cart/                     # Page panier
│   ├── home/                     # Page d'accueil
│   ├── page404/                  # Page 404
│   ├── product/
│   │   ├── products/             # Page catalogue produits
│   │   └── modal/                # Modale de détail produit
│   └── userPage/
│       ├── user-page/            # Page utilisateur
│       └── user-page-detail/     # Détail utilisateur connecté
├── shared/                       # éléments réutilisables
│   ├── card-product/             # Carte produit (aperçu)
│   ├── card-product-detail/      # Détail produit
│   ├── footer/                   # Pied de page
│   ├── header/                   # Navigation
│   ├── services/
│   │   ├── cart-service/         # Gestion du panier (CartService)
│   │   ├── product-service/      # Appels API produits (ProductService)
│   │   └── user-service/         # Authentification / utilisateur (UserService)
│   └── types.ts                  # Interfaces partagées (Product, User, CartInt...)
├── app.ts                        # Composant racine
├── app.routes.ts                 # Déclaration des routes (client)
├── app.routes.server.ts          # Déclaration des routes (SSR)
├── app.config.ts                 # Configuration de l'application
└── app.config.server.ts          # Configuration SSR

Aperçu de l'arborescence réelle (VS Code)

Principes suivis

• Séparation des responsabilités : les vues (features/) orchestrent, les composants réutilisables (shared/) affichent.
• Typage strict : toutes les données sont typées via les interfaces de shared/types.ts (Product, User, CartInt, loginData).
• Services dédiés : un service par ressource (ProductService, CartService, UserService dans shared/services/), responsable des appels HTTP et de la gestion des erreurs.
• Style utilitaire : TailwindCSS pour tout le style, pas de CSS custom sauf cas particulier documenté.

Gestion d'état

Angular Signals, pas RxJS BehaviorSubject :

• ProductService expose productListSignal / productSignal (mis à jour via tap() sur les appels HTTP).
• CartService expose cartSignal (état du panier), avec persistance dans le localStorage (saveToLocalStorage() / loadFromLocalStorage()).
• UserService expose userSignal (utilisateur courant / connecté).

Gestion des erreurs API

• Chaque appel HTTP est encapsulé dans un service et utilise catchError (RxJS) pour intercepter les erreurs réseau ou HTTP.
• Un état de chargement (loading) et un état d'erreur (error) sont exposés par les services aux composants, qui affichent respectivement LoaderComponent ou ErrorMessageComponent.
• Aucune erreur ne doit être silencieuse : logs en console + message utilisateur clair.