Sébastien TIMONER
Als Experte für Webentwicklung und Teammanagement spezialisiere ich mich auf die Erstellung und Optimierung hochleistungsfähiger digitaler Lösungen. Mit umfassender Expertise in modernen Technologien wie React.js, Node.js, TypeScript, Symfony und Zephyr OS für IoT stelle ich bei offroadLabs den Erfolg komplexer SaaS- und IoT-Projekte von der Konzeption bis zur Produktion für Unternehmen verschiedener Branchen sicher.
Bei offroadLabs biete ich maßgeschneiderte Entwicklungsdienstleistungen, die technische Expertise mit einem kollaborativen Ansatz verbinden. Ob bei der Erstellung einer innovativen SaaS-Lösung, der Entwicklung von IoT-Systemen mit Zephyr OS, der Modernisierung einer bestehenden Anwendung oder der Unterstützung bei der Weiterbildung eines Teams - ich setze mich für die Bereitstellung robuster und leistungsstarker Lösungen ein, die auf die spezifischen Bedürfnisse jedes Projekts zugeschnitten sind.
Ich bin verfügbar für Projekte im Raum Aix-en-Provence oder vollständig remote.
Wie strukturiert man eine moderne Webanwendung? Wie stellt man sicher, dass sie über die Zeit wartbar bleibt? In diesem Leitfaden erstellen wir eine Next.js-Anwendung mit hexagonaler Architektur und robuster Formularvalidierung. Um das Lernen unterhaltsamer zu gestalten, erstellen wir ein Registrierungssystem für die Jedi-Akademie!
Der Quellcode ist auf GitHub verfügbar.
Hexagonale Architektur, auch bekannt als "Ports and Adapters", ist ein Architekturmuster, das die Erstellung von Anwendungen ermöglicht, bei denen Geschäftskomponenten:
Die Architektur ist in drei Hauptschichten unterteilt:
[Inhalt wird fortgesetzt...]
bash
Beantworten Sie bei der Projekterstellung folgende Fragen:
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
Nach der Projekterstellung installieren Sie die Abhängigkeiten:
bash
Bei der Initialisierung von shadcn/ui beantworten Sie folgende Fragen:
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 der notwendigen Komponenten
npx shadcn@latest add form input select textarea button card toast table
bash
src/
├── app/
│ ├── actions/
│ │ └── register-padawan.ts
│ ├── components/
│ │ ├── ui/ # shadcn/ui Komponenten
│ │ ├── jedi-form.tsx
│ │ └── padawan-list.tsx
│ ├── lib/
│ │ └── utils.ts # shadcn/ui Utilities
│ └── 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
Diese Struktur folgt einer klaren hexagonalen Architektur mit:
app/
- Next.js Benutzeroberflächen-Schichtactions/
- Server Actions für Formularverarbeitungcomponents/
- React-Komponenten mit UI/Business-Trennunglib/
- Gemeinsame Utilitiescore/
- Reine Geschäftslogikdomain/
- Modelle, Ports und Geschäftsdiensteusecases/
- Anwendungsfälleinfrastructure/
- Technische Implementierungendb/
- Prisma-Konfiguration und Repository-ImplementierungenDie Domain ist das Herz unserer Anwendung. Hier übersetzen wir Geschäftsregeln in Code, unabhängig von technischen Überlegungen. In unserem Fall repräsentiert die Domain alle Regeln, die die Registrierung an der Jedi-Akademie bestimmen.
Modelle repräsentieren fundamentale Geschäftskonzepte.
typescript
Events repräsentieren wichtige Ereignisse, die in der Domain aufgetreten sind.
typescript
Ports definieren, wie die Domain mit der Außenwelt interagiert.
typescript
Domain-Services kapseln Geschäftslogik, die nicht natürlich in eine Entität passt.
typescript
Anwendungsfälle orchestrieren Interaktionen zwischen verschiedenen Domain-Elementen, um eine Geschäftsfunktionalität zu erreichen.
typescript
Die Infrastruktur implementiert die in der Domain definierten Ports für die Interaktion mit der Außenwelt.
prisma
typescript
Die Eingabedatenvalidierung verwendet Zod, um Konsistenz mit unserer Domain sicherzustellen.
typescript
Jetzt können wir die Datenbank generieren.
bash
Für weitere Untersuchungen bietet Prisma einen Client zur Visualisierung der Datenbank.
bash
typescript
typescript
typescript
Diese Komponenten verwenden shadcn/ui, um eine moderne und zugängliche Benutzeroberfläche zu erstellen, mit:
Alles integriert sich perfekt in unsere hexagonale Architektur, während es in der Präsentationsschicht bleibt, ohne Geschäftslogik.
typescript
typescript
Die hexagonale Architektur hat es uns ermöglicht, eine Anwendung zu erstellen, die:
Um weiterzugehen, könnten Sie:
Denken Sie daran: Gute Architektur ist wie die Macht - sie muss im Gleichgewicht sein! 🌟
[Ende der Übersetzung]