Skip to main content

​
Microfrontend Setup (apps/)

Each application within the /apps/ directory represents a distinct business context or microfrontend, following a Microfrontend Architecture.
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.
  • 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.
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. 
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.
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.

​
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';