Sébastien TIMONER
Experto en desarrollo web y gestión de equipos técnicos, me especializo en la creación y optimización de soluciones digitales de alto rendimiento. Gracias a un profundo dominio de tecnologías modernas como React.js, Node.js, TypeScript, Symfony y Zephyr OS para IoT, garantizo el éxito de proyectos SaaS e IoT complejos, desde el diseño hasta la implementación, para empresas de diversos sectores, dentro de offroadLabs.
En offroadLabs, ofrezco servicios de desarrollo a medida, combinando experiencia técnica y enfoque colaborativo. Ya sea para crear una solución SaaS innovadora, desarrollar sistemas IoT con Zephyr OS, modernizar una aplicación existente o acompañar el desarrollo de habilidades de un equipo, me comprometo a proporcionar soluciones robustas y eficientes, adaptadas a las necesidades específicas de cada proyecto.
Estoy disponible para proyectos en la zona de Aix-en-Provence o en modalidad totalmente remota.
¿Cómo estructurar una aplicación web moderna? ¿Cómo asegurar que siga siendo mantenible con el tiempo? En esta guía, crearemos una aplicación Next.js utilizando arquitectura hexagonal y validación robusta de formularios. Para hacer el aprendizaje más divertido, ¡crearemos un sistema de registro para la Academia Jedi!
El código fuente está disponible en GitHub.
La Arquitectura Hexagonal, también conocida como "Puertos y Adaptadores", es un patrón arquitectónico que permite crear aplicaciones donde los componentes de negocio están:
La arquitectura se divide en tres capas principales:
[El contenido continúa...]
bash
Al crear el proyecto, responde las siguientes preguntas:
¿Te gustaría usar TypeScript? Sí
¿Te gustaría usar ESLint? Sí
¿Te gustaría usar Tailwind CSS? Sí
¿Te gustaría usar el directorio `src/`? Sí
¿Te gustaría usar App Router? (recomendado) Sí
¿Te gustaría personalizar el alias de importación predeterminado (@/*)? Sí
Usando Next.js versión 15.0.0+ con Turbopack
Una vez creado el proyecto, instala las dependencias:
bash
Al inicializar shadcn/ui, responde las siguientes preguntas:
¿Te gustaría usar TypeScript (recomendado)? Sí
¿Qué estilo te gustaría usar? › Predeterminado
¿Qué color te gustaría usar como color base? › Slate
¿Dónde está tu archivo CSS global? › src/app/globals.css
¿Te gustaría usar variables CSS para colores? › Sí
¿Dónde está ubicado tu tailwind.config.js? › tailwind.config.js
Configura el alias de importación para componentes: › @/components
Configura el alias de importación para utilidades: › @/lib/utils
¿Estás usando React Server Components? › Sí
# Instalar componentes necesarios
npx shadcn@latest add form input select textarea button card toast table
bash
src/
├── app/
│ ├── actions/
│ │ └── register-padawan.ts
│ ├── components/
│ │ ├── ui/ # componentes shadcn/ui
│ │ ├── jedi-form.tsx
│ │ └── padawan-list.tsx
│ ├── lib/
│ │ └── utils.ts # utilidades 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
Esta estructura sigue una clara arquitectura hexagonal con:
app/
- Capa de interfaz de usuario de Next.jsactions/
- Acciones del Servidor para manejo de formularioscomponents/
- Componentes React con separación UI/negociolib/
- Utilidades compartidascore/
- Lógica de negocio puradomain/
- Modelos, puertos y servicios de negociousecases/
- Casos de uso de la aplicacióninfrastructure/
- Implementaciones técnicasdb/
- Configuración de Prisma e implementaciones de repositorioEl dominio es el corazón de nuestra aplicación. Aquí es donde traducimos las reglas de negocio a código, independientemente de cualquier consideración técnica. En nuestro caso, el dominio representa todas las reglas que gobiernan el registro en la Academia Jedi.
Los modelos representan conceptos fundamentales del negocio.
typescript
Los eventos representan hechos importantes que han ocurrido en el dominio.
typescript
Los puertos definen cómo el dominio interactúa con el mundo exterior.
typescript
Los servicios del dominio encapsulan la lógica de negocio que no encaja naturalmente en una entidad.
typescript
Los casos de uso orquestan interacciones entre diferentes elementos del dominio para lograr una funcionalidad de negocio.
typescript
La infraestructura implementa los puertos definidos en el dominio para interactuar con el mundo exterior.
prisma
typescript
Ahora podemos generar la base de datos.
bash
Para exploración adicional, Prisma proporciona un cliente para visualizar la base de datos.
bash
typescript
typescript
typescript
Estos componentes utilizan shadcn/ui para crear una interfaz de usuario moderna y accesible, con:
Todo se integra perfectamente en nuestra arquitectura hexagonal mientras se mantiene en la capa de presentación, sin lógica de negocio.
typescript
typescript
La arquitectura hexagonal nos ha permitido crear una aplicación que es:
Para ir más allá, podrías:
Recuerda: ¡la buena arquitectura es como la Fuerza - debe estar en equilibrio! 🌟
[Fin de la traducción]