Catalogue en ligne - ASO 70
Application web de location de matériel événementiel développée avec Next.js.
Contexte et objectifs
Développement d'un catalogue en ligne de location de matériel événementiel pour ASO 70. Ce projet de 12 semaines a été l'occasion d'approfondir mes connaissances en développement web moderne, notamment avec l'apprentissage de React et Next.js en autodidacte.
J'ai choisi d'utiliser React et Next.js car ce sont des outils idéaux pour développer des applications web modernes, performantes et évolutives. Next.js permet notamment d'optimiser le chargement des pages (rendu côté serveur, génération statique), d'améliorer le SEO, et d'offrir une expérience utilisateur fluide. Ce choix technologique s'inscrit dans une démarche d'efficacité et de professionnalisation du projet.
Objectifs principaux
- Créer une application web moderne et performante
- Mettre en place une architecture évolutive et maintenable
- Acquérir une expertise en React et Next.js
Architecture et Organisation
Feature Based Architecture
L'organisation du code suit une approche "Feature Based" plutôt qu'une organisation par technologie. Cette structure permet d'isoler les fonctionnalités et facilite la maintenance en regroupant tous les fichiers liés à une même fonctionnalité au même endroit.
src/
├── features/
│ │ ├── catalog/
│ │ │ ├── _components/
│ │ │ │ ├── ProductCard.tsx
│ │ │ │ └── ...
│ │ │ ├── _services/
│ │ │ │ └── ...
│ │ │ ├── category/
│ │ │ │ ├── _components/
│ │ │ │ │ └── ...
│ │ │ │ ├── _services/
│ │ │ │ │ └── ...
│ │ │ │ └── CategoryPage.tsx
│ │ │ └── CatalogPage.tsx
├── components/
├── hooks/
├── utils/
└── app/
├── catalog/
│ ├── category/
│ │ └── page.tsx
│ └── page.tsx
├── page.tsx
├── layout.tsx
└── ...
Les fichiers ou composants partagés entre plusieurs sous-features sont placés dans le dossier de la feature parente. Par exemple, si ProductCard.tsx est utilisé à la fois dans la page "catalog" et dans la page "category" (qui est une sous-feature de "catalog"), il sera placé dans catalog/_components. Ainsi, tous les enfants de "catalog" peuvent l'utiliser, mais pas les autres features. Pour garantir le respect de cette règle, il est possible de configurer des règles ESLint qui préviennent en cas de transgression.
Séparer les pages (/app) et les features (/features) permet de garder une arborescence claire : seuls les fichiers de pages et de layouts se trouvent dans /app, ce qui évite toute pollution de l'arborescence des routes. L'arborescence des features réplique exactement celle des pages, ce qui facilite la navigation dans le code.
Les fichiers ou utilitaires communs à tout le projet (hooks, composants, helpers…) sont placés dans des dossiers partagés à la racine du projet.
Enfin, j'utilise la convention d'ajouter un _ devant le nom des dossiers techniques au sein d'une feature (_components, _services…), ce qui permet de distinguer facilement les sous-features (ex : category) des dossiers techniques.
Services Intégrés
Compétences développées
Détails du projet
Rôle
Développeur Full Stack
Équipe
Projet individuel
Technologies
Date
2025
Résultats
- Application performante et évolutive
- Architecture modulaire facilitant la maintenance
- Expérience utilisateur fluide et intuitive
- Base solide pour les évolutions futures
Envie d'en savoir plus ?
Ce projet vous intéresse ? N'hésitez pas à me contacter pour plus d'informations ou pour discuter d'opportunités similaires.
Me contacter