SĂ©bastien TIMONER
Expert en dĂ©veloppement web et gestion dâĂ©quipes techniques, je me spĂ©cialise dans la crĂ©ation et lâoptimisation de solutions numĂ©riques performantes. GrĂące Ă une maĂźtrise approfondie de technologies modernes comme React.js, Node.js, TypeScript, Symfony et Zephyr OS pour l'IoT, jâassure la rĂ©ussite de projets SaaS et IoT complexes, de la conception Ă la mise en production, pour des entreprises de divers secteurs, au sein d'offroadLabs.
Chez offroadLabs, je propose des services de dĂ©veloppement sur mesure, alliant expertise technique et approche collaborative. Que ce soit pour crĂ©er une solution SaaS innovante, dĂ©velopper des systĂšmes IoT avec Zephyr OS, moderniser une application existante, ou accompagner la montĂ©e en compĂ©tences dâune Ă©quipe, je mâengage Ă fournir des solutions robustes et performantes, adaptĂ©es aux besoins spĂ©cifiques de chaque projet.
Je suis disponible pour des missions autour dâAix-en-Provence ou en full remote.
Comment structurer une application web moderne ? Comment s'assurer qu'elle reste maintenable au fil du temps ? Dans ce guide, nous allons créer une application Next.js en utilisant une architecture hexagonale, une validation de formulaires robuste. Pour rendre l'apprentissage plus ludique, nous créerons un systÚme d'inscription à l'Académie Jedi !
Le code source est disponible sur GitHub.
L'Architecture Hexagonale, aussi connue sous le nom de "Ports and Adapters", est un modÚle d'architecture qui permet de créer des applications dont les composants business sont :
L'architecture se divise en trois couches principales :
bash
Lors de la création du projet, répondez aux questions suivantes :
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? Yes
Using Next.js version 15.0.0+ with Turbopack
Une fois le projet créé, installez les dépendances :
bash
Lors de l'initialisation de shadcn/ui, répondez aux questions suivantes :
Would you like to use TypeScript (recommended)? Yes
Which style would you like to use? âș Default
Which color would you like to use as base color? âș Slate
Where is your global CSS file? âș src/app/globals.css
Would you like to use CSS variables for colors? âș Yes
Where is your tailwind.config.js located? âș tailwind.config.js
Configure the import alias for components: âș @/components
Configure the import alias for utils: âș @/lib/utils
Are you using React Server Components? âș Yes
# Installation des composants nécessaires
npx shadcn@latest add form input select textarea button card toast table
bash
src/
âââ app/
â âââ actions/
â â âââ register-padawan.ts
â âââ components/
â â âââ ui/ # Composants shadcn/ui
â â âââ jedi-form.tsx
â â âââ padawan-list.tsx
â âââ lib/
â â âââ utils.ts # Utilitaires shadcn/ui
â âââ page.tsx
âââ core/
â âââ domain/
â â âââ models/
â â â âââ padawan.ts
â â âââ ports/
â â â âââ padawan-repository.ts
â â âââ services/
â â â âââ padawan-eligibility.ts
â â âââ validation/
â â â âââ padawan-schema.ts
â â âââ events/
â â âââ padawan-registered.ts
â âââ usecases/
â âââ register-padawan.ts
âââ infrastructure/
âââ db/
âââ prisma/
â âââ migrations/
â âââ schema.prisma
âââ prisma.ts
âââ repositories/
âââ prisma-padawan-repository.ts
Cette structure suit une architecture hexagonale claire avec :
app/
- Couche interface utilisateur Next.jsactions/
- Server Actions pour gérer les formulairescomponents/
- Composants React avec une séparation UI/métierlib/
- Utilitaires partagéscore/
- Logique métier puredomain/
- ModÚles, ports et services métierusecases/
- Cas d'utilisation de l'applicationinfrastructure/
- Implémentations techniquesdb/
- Configuration Prisma et implĂ©mentation des repositoriesLe domaine est le cĆur de notre application. C'est ici que nous traduisons les rĂšgles mĂ©tier en code, indĂ©pendamment de toute considĂ©ration technique. Dans notre cas, le domaine reprĂ©sente toutes les rĂšgles qui rĂ©gissent l'inscription Ă l'AcadĂ©mie Jedi.
Les modÚles représentent les concepts métier fondamentaux.
typescript
Les événements représentent des faits importants qui se sont produits dans le domaine.
typescript
Les ports définissent comment le domaine interagit avec le monde extérieur.
typescript
Les services encapsulent la logique métier qui ne correspond pas naturellement à une entité.
typescript
Les cas d'utilisation orchestrent les interactions entre les différents éléments du domaine pour réaliser une fonctionnalité métier.
typescript
L'infrastructure implémente les ports définis dans le domaine pour interagir avec le monde extérieur.
prisma
typescript
La validation des données d'entrée utilise Zod pour assurer la cohérence avec notre domaine.
typescript
Maintenant, nous pouvons générer la db.
bash
Pour aller plus loin, prisma fournit un client permettant de visualiser la db.
bash
typescript
typescript
typescript
Ces composants utilisent shadcn/ui pour créer une interface utilisateur moderne et accessible, avec :
Le tout s'intÚgre parfaitement dans notre architecture hexagonale en restant au niveau de la couche présentation, sans logique métier.
typescript
typescript
L'architecture hexagonale nous a permis de créer une application :
Pour aller plus loin, vous pourriez :
N'oubliez pas : une bonne architecture est comme la Force - elle doit ĂȘtre en Ă©quilibre ! đ