Skip to main content

Visión General Frontend

El frontend de AlojaPlus está construido con **Next.js ** utilizando el nuevo App Router, TypeScript para type safety, Chakra UI para componentes, y Redux Toolkit para manejo de estado global. La aplicación está optimizada para performance y experiencia de usuario.

Stack Tecnológico​

Core Framework​

{
  "next": "^15.2.4",
  "react": "^18",
  "typescript": "^5",
  "node": "18+"
}

UI & Styling​

{
  "@chakra-ui/react": "^2.8.2",
  "@chakra-ui/next-js": "^2.2.0",
  "@emotion/react": "^11.11.4",
  "framer-motion": "^10.18.0",
  "tailwindcss": "^3.4.1"
}

Estado y Data Fetching​

{
  "@reduxjs/toolkit": "^2.6.1",
  "redux-persist": "^6.0.0",
  "@tanstack/react-query": "^5.59.20",
  "axios": "^1.7.2"
}

IA y Servicios​

{
  "@google/genai": "^1.13.0",
  "@stripe/react-stripe-js": "^3.7.0",
  "crypto-js": "^4.2.0"
}

Estructura del Proyecto​

src/
├── app/                          # App Router (Next.js )
│   ├── admin/                   # Dashboard principal
│   │   ├── chatbot/            # Asistente IA
│   │   ├── owner/              # Funciones propietario
│   │   ├── tenant/             # Funciones inquilino
│   │   ├── properties/         # Gestión propiedades
│   │   ├── users/              # Gestión usuarios
│   │   ├── contracts/          # Contratos
│   │   ├── plans/              # Suscripciones
│   │   └── settings/           # Configuración
│   ├── auth/                   # Autenticación
│   │   ├── sign-in/           # Inicio sesión
│   │   ├── forgot-password/   # Recuperar contraseña
│   │   ├── reset-password/    # Resetear contraseña
│   │   └── plans/             # Planes de suscripción
│   ├── layout.tsx             # Layout principal
│   ├── page.tsx               # Página home
│   └── providers.tsx          # Providers globales
├── components/                 # Componentes reutilizables
│   ├── globals/               # Componentes globales
│   ├── sidebar/               # Navegación lateral
│   ├── navbar/                # Barra navegación
│   ├── chatBot/               # Asistente IA
│   ├── charts/                # Gráficos
│   ├── dashboard/             # Dashboard components
│   ├── properties/            # Componentes propiedades
│   ├── plans/                 # Componentes suscripciones
│   └── signin/                # Componentes auth
├── containers/                # Contenedores páginas
│   ├── AdminContainer/        # Admin dashboard
│   ├── Auth/                  # Autenticación
│   ├── PropertiesContainer/   # Propiedades
│   ├── UsersContainer/        # Usuarios
│   └── ProfileContainer/      # Perfil usuario
├── store/                     # Estado global
│   ├── index.ts              # Configuración store
│   └── slices/               # Redux slices
│       ├── authSlice.ts      # Autenticación
│       ├── menuSlice.ts      # Menús
│       └── tempDataSlice.ts  # Datos temporales
├── hooks/                     # Custom hooks
│   ├── useApi.tsx            # API calls
│   ├── useRedux.tsx          # Redux helpers
│   ├── useSubscription.tsx   # Suscripciones
│   └── useNotifications.tsx  # Notificaciones
├── services/                  # Servicios API
│   ├── request.ts            # Cliente HTTP
│   ├── gemini.tsx            # IA Gemini
│   └── property.ts           # Propiedades API
├── utils/                     # Utilidades
│   ├── cryptoUtils.ts        # Encriptación
│   ├── validation.ts         # Validaciones
│   └── helpers.ts            # Helpers generales
├── types/                     # Tipos TypeScript
│   ├── auth.ts               # Tipos autenticación
│   ├── property.ts           # Tipos propiedades
│   └── navigation.ts         # Tipos navegación
└── theme/                     # Tema Chakra UI
    └── theme.ts              # Configuración tema

Principios de Desarrollo​

Component Architecture​

  • Componentes reutilizables y modulares
  • Separación clara entre UI y lógica de negocio
  • Composición sobre herencia
  • Props tipadas con TypeScript

Performance Optimization​

  • Lazy loading de componentes
  • Memoización estratégica
  • Code splitting automático
  • Optimización de imágenes con Next.js

Developer Experience​

  • TypeScript para type safety
  • ESLint y Prettier para código consistente
  • Hot reloading para desarrollo rápido
  • Testing automatizado

User Experience​

  • Responsive design mobile-first
  • Accesibilidad (a11y) integrada
  • Tiempo de carga optimizado
  • Feedback visual inmediato