Estructura del proyecto

Nota: Este es contenido de ejemplo/marcador de posición con fines de demostración.

Descubre cómo está organizado el código base y dónde encontrar cada cosa.

Descripción general del monorepo

Este proyecto utiliza Turborepo para gestionar un monorepo con varias aplicaciones y paquetes.

project-root/
├── apps/                    # Aplicaciones
│   ├── web/                # Aplicación principal de Next.js
│   ├── e2e/                # Pruebas E2E con Playwright
│   └── dev-tool/           # Utilidades de desarrollo
├── packages/               # Paquetes compartidos
│   ├── features/          # Paquetes de funcionalidades
│   ├── ui/                # Componentes de interfaz
│   ├── supabase/          # Utilidades de Supabase
│   └── billing/           # Integraciones de facturación
├── tooling/               # Herramientas de desarrollo
├── supabase/              # Esquema y migraciones de la base de datos
└── docs/                  # Documentación

Aplicación principal (apps/web)

La aplicación principal de Next.js:

apps/web/
├── app/                    # App Router de Next.js
│   ├── (marketing)/       # Páginas públicas
│   ├── (auth)/            # Autenticación
│   ├── home/              # Aplicación principal
│   │   ├── (user)/        # Cuenta personal
│   │   └── [account]/     # Cuentas de equipo
│   ├── admin/             # Panel de administración
│   └── api/               # Rutas de API
├── components/            # Componentes compartidos
├── config/                # Archivos de configuración
├── lib/                   # Funciones de utilidad
├── public/                # Recursos estáticos
└── supabase/              # Configuración de Supabase

Estructura de rutas

Rutas de marketing ((marketing))

Páginas públicas:

app/(marketing)/
├── page.tsx               # Página de inicio
├── pricing/               # Página de precios
├── blog/                  # Blog
└── docs/                  # Documentación

Rutas de autenticación ((auth))

Páginas de autenticación:

app/(auth)/
├── sign-in/
├── sign-up/
├── password-reset/
└── verify/

Rutas de la aplicación (home)

Aplicación principal:

app/home/
├── (user)/                # Contexto de la cuenta personal
│   ├── page.tsx          # Panel personal
│   ├── settings/         # Configuración del usuario
│   └── projects/         # Proyectos personales
└── [account]/            # Contexto de la cuenta de equipo
    ├── page.tsx          # Panel del equipo
    ├── settings/         # Configuración del equipo
    ├── projects/         # Proyectos del equipo
    └── members/          # Miembros del equipo

Estructura de los paquetes

Paquetes de funcionalidades (packages/features/)

Funcionalidades modulares:

packages/features/
├── accounts/              # Gestión de cuentas
├── auth/                  # Autenticación
├── team-accounts/         # Funcionalidades de equipo
├── billing/               # Facturación y suscripciones
├── admin/                 # Funcionalidades de administración
└── notifications/         # Sistema de notificaciones

Paquete de interfaz (packages/ui/)

Componentes de interfaz compartidos:

packages/ui/
└── src/
    ├── components/        # Componentes de Shadcn UI
    │   ├── button.tsx
    │   ├── input.tsx
    │   ├── dialog.tsx
    │   └── ...
    └── utils/             # Utilidades de interfaz

Paquete de Supabase (packages/supabase/)

Utilidades de base de datos:

packages/supabase/
├── schema/                # Esquemas declarativos
│   ├── accounts.schema.ts
│   ├── auth.schema.ts
│   └── ...
├── src/
│   ├── clients/          # Clientes de Supabase
│   ├── hooks/            # Hooks de React
│   └── middleware/       # Middleware de autenticación
└── migrations/           # Migraciones SQL

Archivos de configuración

Nivel raíz

project-root/
├── package.json           # package.json raíz
├── turbo.json             # Configuración de Turborepo
├── pnpm-workspace.yaml    # Espacio de trabajo de PNPM
└── tsconfig.json          # Configuración base de TypeScript

Nivel de aplicación

apps/web/
├── next.config.js         # Configuración de Next.js
├── tailwind.config.ts     # Tailwind CSS
├── tsconfig.json          # Configuración de TypeScript
└── .env.local             # Variables de entorno

Configuración de funcionalidades

apps/web/config/
├── paths.config.ts        # Rutas
├── billing.config.ts      # Configuración de facturación
├── feature-flags.config.ts # Feature flags
├── personal-account-navigation.config.tsx
└── team-account-navigation.config.tsx

Convenciones de nomenclatura

Archivos

• Páginas: page.tsx (convención de Next.js)
• Layouts: layout.tsx
• Componentes: kebab-case.tsx
• Utilidades: kebab-case.ts
• Tipos: types.ts o component-name.types.ts

Directorios

• Segmentos de ruta: [param] para rutas dinámicas
• Grupos de rutas: (group) para organizar
• Carpetas privadas: _components, _lib
• Rutas paralelas: @folder

Organización del código

feature/
├── page.tsx               # Página de la ruta
├── layout.tsx             # Layout de la ruta
├── loading.tsx            # Estado de carga
├── error.tsx              # Límite de error
├── _components/           # Componentes privados
│   ├── feature-list.tsx
│   └── feature-form.tsx
└── _lib/                  # Utilidades privadas
    ├── server/            # Código del lado del servidor
    │   ├── loaders.ts
    │   └── actions.ts
    └── schemas/           # Esquemas de validación
        └── feature.schema.ts

Rutas de importación

Utiliza los alias de ruta de TypeScript:

// Importaciones absolutas desde los paquetes
import { Button } from '@kit/ui/button';
import { createClient } from '@kit/supabase/server-client';

// Importaciones relativas dentro de la aplicación
import { FeatureList } from './_components/feature-list';
import { loadData } from './_lib/server/loaders';

Buenas prácticas

1. Mantén privado el código específico de cada ruta - Utiliza _components y _lib
2. Comparte el código reutilizable - Extráelo a paquetes
3. Coloca juntos los archivos relacionados - Mantén los archivos cerca de donde se usan
4. Usa una nomenclatura coherente - Sigue los patrones establecidos
5. Organiza por funcionalidad - No por tipo de archivo

Cómo orientarte