> ## Documentation Index
> Fetch the complete documentation index at: https://blog.mapptech.com.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend Development

> Guidelines for building frontend applications (microfrontends) within the apps/ directory, including folder structure, component usage, and shared hooks.

## Microfrontend Setup (`apps/`)

Each application within the `/apps/` directory represents a distinct **business context** or microfrontend, following a **Microfrontend Architecture**.

<Info>
  **Benefits of This Microfrontend Approach:**

  * Independent development and testing cycles per application.
  * Allows for separate deployment schedules if needed.
  * Promotes team autonomy focused on specific business domains.
  * Enforces clear boundaries while maximizing core logic reuse from `packages/core`.
</Info>

* `apps/radicacion`: Handles the document intake process.
* `apps/asignacion`: Manages case routing and assignments.

All apps **must** import and reuse logic from `packages/*` where applicable (actions, hooks, config). All UI elements **must** be constructed using components from the `mappnext/ds-tw` library to ensure visual consistency.

***

## Frontend Folder Layout (Recommended Structure)

Within each Next.js application (`apps/*`), routes using the App Router can benefit from the following structure, promoting the **Container/Presentational Component Pattern** and **Separation of Concerns**.

```text /apps/[appName]/app/[routeName]/ theme={null}
app/
└── [routeName]/            # e.g., 'crear-expediente'
    ├── components/         # Presentational components: Focus on rendering UI based on props/context. Compose mappnext/ds-tw components. **MUST NOT** contain complex logic or data fetching. (Mandatory for UI pieces)
    ├── containers/         # **(Optional - Use for complexity/structure)** Container components: Group related components, manage local state/logic for a feature block, fetch data for the block. Improves structure. Can be Server or Client Components.
    ├── providers/          # **(Optional - Use for shared state)** React Context providers: Manage state shared across multiple components using the **Provider Pattern**.
    └── page.tsx            # **Route entry point & Primary Orchestrator:** Acts as the top-level container for the route. Handles layout, initial data fetching. Composes components/containers/providers.
```

<Tip>
  **Adapt Structure to Complexity:**

  * **Simple Pages:** `page.tsx` acts as the main container, directly rendering presentational components (`components/`).
  * **Complex Pages/Features:**
    * Use `containers/` to encapsulate feature-specific logic and composition, applying the **Container Component Pattern**.
    * Use `providers/` for shared state management across a component tree (React's **Provider Pattern**).
  * **Always:** Keep `components/` purely presentational and use `mappnext/ds-tw` for UI elements.
</Tip>

***

## UI Component Library (`mappnext/ds-tw`)

* **Mandatory Usage:** All user interface elements (buttons, inputs, modals, layout structures, etc.) **must** be imported and used from the external `mappnext/ds-tw` library.
* **Consistency:** This ensures visual and behavioral consistency across all microfrontends.
* **Avoid Custom Styles:** Do not write custom CSS or Tailwind classes for elements that have a corresponding component in the design system library, unless absolutely necessary for layout positioning not covered by the library's components/props.
* **Import Path:** `import { Button } from 'mappnext/ds-tw/atoms/Button';` (Adjust path based on actual library structure).

***

## Shared Hooks (`packages/hooks`)

* The `packages/hooks` directory contains reusable React hooks.
* Use these hooks for cross-cutting concerns (e.g., form handling, API call state management, debouncing) that can be shared across different frontend applications (`apps/*`).
* Before creating a new hook within an application, check if a suitable one already exists in `@hooks`.
* Import using the alias: `import { useFormValidation } from '@hooks/forms';`

```
```