System Architecture

The architecture follows Clean Architecture principles with clear separation of concerns.

Layer Structure

Presentation Layer

React components, Next.js pages and UI elements. Only responsible for displaying data and capturing user interactions.

app/ - Next.js pages and layouts

components/ - Reusable components

components/ui/ - Base shadcn/ui components

Domain Layer

Business logic, TypeScript types and validation rules. Independent of frameworks and external libraries.

types/ - TypeScript interfaces and types

lib/ - Utilities and business logic

hooks/ - Custom React hooks

Data Layer

API access, databases and external services. Implements interfaces defined in the domain layer.

api/ - Next.js route handlers

services/ - External services

content/ - Blog MDX content

Container-Presenter

Separation between components that handle logic (containers) and components that only present data (presenters).

Composition over Inheritance

Use of React composition patterns to create flexible and reusable components.

Repository Pattern

Data access abstraction through well-defined interfaces to facilitate testing and maintenance.

Factory Pattern

Creation of complex objects (like API clients) through factories that encapsulate construction logic.