Ajalol Dealer 🏎️

Plataforma moderna para la gestión y exhibición de vehículos (nuevos y usados) en la República Dominicana. Este proyecto está diseñado para ofrecer una experiencia ultra-rápida a los usuarios finales y un panel de administración seguro y eficiente para la gestión del inventario.

💡 Idea General del Proyecto

Ajalol Dealer es un concesionario digital que consta de dos partes principales:

1. Catálogo Público: Un portal optimizado para SEO y velocidad donde los clientes pueden buscar, filtrar y ver los detalles de los vehículos disponibles.
2. Panel de Administración: Un sistema seguro (protegido mediante autenticación) donde los administradores pueden gestionar el inventario (añadir, editar o eliminar vehículos y subir imágenes).

🛠️ Tecnologías Utilizadas

• Framework Principal: Astro (v6) - Utilizado para aprovechar el Server-Side Rendering (SSR), Static Site Generation (SSG) y la arquitectura de “Islas” para un rendimiento inigualable.
• UI y Componentes Interactivos: React (v19) - Gestión de estado compleja en el lado del cliente (filtros, panel de control, formularios).
• Estilos: Tailwind CSS (v4) - Diseño responsivo con un sistema de diseño personalizado (colores ajalol).
• Backend as a Service (BaaS): Firebase (v12)
  • Firestore: Base de datos NoSQL para el inventario de vehículos.
  • Firebase Storage: Almacenamiento para las imágenes de los vehículos.
  • Firebase Auth y Admin SDK: Gestión de autenticación basada en cookies de sesión para mayor seguridad.
• Optimización de Imágenes: browser-image-compression y galerías usando photoswipe.

📂 Estructura del Proyecto

/
├── public/                 # Recursos estáticos
├── src/
│   ├── components/
│   │   ├── astro/          # Componentes estáticos de Astro
│   │   └── react/          # Componentes interactivos (Arquitectura de Islas)
│   ├── layouts/            # Plantillas maestras (Layout.astro)
│   ├── lib/
│   │   └── firebase/       # Configuración de Firebase (cliente y servidor)
│   ├── pages/              # Enrutamiento basado en archivos
│   │   ├── admin/          # Panel de control (protegido)
│   │   ├── api/            # Endpoints del backend
│   │   ├── vehiculo/       # Vistas de detalles del vehículo
│   │   └── index.astro     # Página de inicio
│   └── middleware.ts       # Middleware para seguridad y rutas protegidas
├── firebase.json           # Configuración del CLI de Firebase
├── firestore.rules         # Reglas de seguridad de Firestore
├── storage.rules           # Reglas de seguridad de Storage
└── astro.config.mjs        # Configuración de Astro

🔒 Seguridad

La seguridad del proyecto está diseñada con un enfoque multicapa:

1. Protección de Middleware (Edge/Servidor):
   • Las rutas del panel (/admin/* y /api/admin/*) están protegidas y requieren una cookie de sesión válida verificada por el SDK de Firebase Admin.
2. Cloudflare Shield (Secreto Proxy):
   • Los endpoints públicos para /api/* y /cdn/* en producción requieren un secreto en los encabezados (X-Ajalol-Proxy-Secret) para evitar el acceso directo y no autorizado al origen, eludiendo el CDN.
3. Reglas de Firebase:
   • Acceso restringido en firestore.rules y storage.rules asegurando que las escrituras y modificaciones en el catálogo solo puedan ser realizadas por usuarios con los privilegios adecuados.

✨ Prácticas y Patrones Implementados

• Arquitectura de Islas de Astro: El JavaScript en el lado del cliente se carga solo cuando es estrictamente necesario (client:load en componentes de React como VehicleFilter).
• Híbrido SSR/SSG: El sitio utiliza renderizado/prerenderizado estático para las páginas públicas para garantizar tiempos de carga casi instantáneos, mientras que usa SSR para el panel de administración y las APIs.
• Gestión de Estado y Formularios: Componentes de React modulares (VehicleForm, AdminDashboard) para separar la lógica de las vistas administrativas de la renderización pública.
• Optimización SEO: Inclusión de Sitemap (@astrojs/sitemap) para facilitar la indexación del catálogo de vehículos, junto con etiquetas meta dinámicas (description, image) y Datos Estructurados JSON-LD construidos sin problemas para cada página de vehículo.

🤖 Últimas Características (IA, SEO y Admin Avanzado)

• Copywriting impulsado por IA: Integración con Google Gemini (2.5 Flash) a través de un endpoint API nativo. Permite a los administradores generar automáticamente descripciones de ventas concisas y persuasivas basadas en las especificaciones del vehículo.
• SEO Dinámico para Vehículos: El layout [slug].astro ahora consume y expone especificaciones completas de los vehículos (Color, Tracción, Condición, Puertas) en Google Rich Snippets estandarizados (JSON-LD Offer/Car).
• Flujo de Edición Avanzado: El panel de administración soporta la edición profunda de vehículos existentes (método PUT). Cuenta con un sistema inteligente de gestión de imágenes que fusiona sin problemas las URLs de imágenes alojadas en CDN existentes con nuevas subidas binarias, y elimina automáticamente las fotos descartadas de Google Cloud Storage para optimizar los costos de almacenamiento.

🚀 Comandos de Desarrollo