refactor: breaking changes on dir structure

[Branyoe]

Guía de Estructura Híbrida para el Proyecto

1. Visión General

Nuestro proyecto utiliza una estructura híbrida que combina el App Router de Next.js con una organización basada en características. Esta estructura nos permite mantener la claridad del enrutamiento de Next.js mientras organizamos nuestro código de manera modular y escalable.

2. Estructura de Carpetas Principal

/src
  /app
  /features
  /shared
  /lib
  auth.config.ts

3. Desglose y Reglas

3.1. Directorio /app

Este directorio sigue la estructura del App Router de Next.js.

Reglas:

• Usar grupos de rutas (auth) para páginas autenticadas y (public) para páginas públicas.
• Cada página debe tener su propio directorio con un archivo page.tsx.
• Los layouts compartidos van en layout.tsx en el nivel apropiado.

Ejemplo:

/app
  /(auth)
    /home
      page.tsx
    /user
      /interests
        page.tsx
      layout.tsx
      page.tsx
    layout.tsx
  /(public)
    /sign-in
      page.tsx
    /sign-up
      /career
        page.tsx
      /profile-type
        page.tsx
      /register
        page.tsx
    layout.tsx
  globals.css
  layout.tsx
  page.tsx

3.2. Directorio /features

Agrupa la lógica relacionada con características específicas de la aplicación.

Reglas:

• Cada característica principal tiene su propio subdirectorio.
• Incluir componentes, acciones, hooks y tipos específicos de la característica.

Ejemplo:

/features
  /auth
    /components
      SignInForm.tsx
      SignOutButton.tsx
    /actions
      signIn.ts
      signOut.ts
      signUp.ts
    /types
      AuthTypes.ts
  /user
    /components
      UserAvatar.tsx
      UserOption.tsx
    /data
      userOptions.ts
      interests.ts
    /types
      UserTypes.ts

3.3. Directorio /shared

Contiene componentes, utilidades y acciones utilizadas en toda la aplicación.

Reglas:

• Componentes UI genéricos van en /shared/components/ui.
• Utilidades generales van en /shared/utils.
• Acciones compartidas van en /shared/actions.

Ejemplo:

/shared
  /components
    /ui
      Button.tsx
      Input.tsx
      Select.tsx
    ImageForm.tsx
    InterestCard.tsx
    /Skeletons
      SkeletonImage.tsx
      SkeletonText.tsx
  /utils
    sleep.ts
  /actions
    uploadImage.ts

3.4. Directorio /lib

Para servicios y configuraciones de bibliotecas externas.

Ejemplo:

/lib
  prisma.ts

4. Ejemplos de Uso

4.1. Creación de una nueva página autenticada

Para crear una nueva página de perfil de usuario:

1. Crear el directorio y archivo:

   /app/(auth)/profile/page.tsx

2. Implementar la página usando componentes del directorio features:

   import { UserProfile } from '@/features/user/components/UserProfile';
   
   export default function ProfilePage() {
    return <UserProfile />;
   }

4.2. Añadir una nueva característica

Para añadir una característica de "publicaciones":

1. Crear la estructura en /features:

   /features/posts
    /components
      PostList.tsx
      PostItem.tsx
    /actions
      createPost.ts
      deletePost.ts
    /types
      PostTypes.ts

2. Usar en una página:

   // app/(auth)/posts/page.tsx
   import { PostList } from '@/features/posts/components/PostList';
   import { createPost } from '@/features/posts/actions/createPost';
   
   export default function PostsPage() {
    return (
      <div>
        <h1>Posts</h1>
        <PostList />
        {/* Formulario que usa createPost */}
      </div>
    );
   }

4.3. Utilizar componentes compartidos

import { Button } from '@/shared/components/ui/Button';
import { uploadImage } from '@/shared/actions/uploadImage';

export function ImageUploader() {
  // Implementación usando Button y uploadImage
}

5. Mejores Prácticas

• Mantén los componentes de página (page.tsx) ligeros, delegando la lógica a los componentes en /features.
• Utiliza importaciones absolutas con alias @/ para mejorar la legibilidad.
• Coloca los tipos TypeScript junto a los componentes o en un archivo types.ts dentro del directorio de la característica.
• Para acciones del servidor, usa el directorio /app/api o colócalas junto a los componentes que las utilizan en /features.

6. Resolución de Problemas Comunes

• Si no estás seguro de dónde colocar un componente, pregúntate: "¿Es específico de una característica o es genérico?" Si es genérico, va en /shared.
• Para evitar la duplicación, revisa regularmente /shared y /features en busca de componentes o lógica que puedan reutilizarse.

@LUISPINTO90

[netlify[bot]]

✅ Deploy Preview for miudc ready!

Name	Link
🔨 Latest commit	f237a1e287c4266255a0895855a4a790c8804a84
🔍 Latest deploy log	https://app.netlify.com/sites/miudc/deploys/66ae9a14ef1c930008724e60
😎 Deploy Preview	https://deploy-preview-34--miudc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.