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 ! 🌟