Ajalol Dealer 🏎️

Modern platform for managing and showcasing vehicles (new and used) in the Dominican Republic. This project is designed to offer an ultra-fast experience to end users and a secure, efficient admin panel for inventory management.

💡 General Project Idea

Ajalol Dealer is a digital dealership consisting of two main parts:

1. Public Catalog: An SEO and speed-optimized portal where customers can search, filter, and view available vehicle details.
2. Admin Panel: A secure system (protected by authentication) where administrators can manage the inventory (add, edit, or delete vehicles and upload images).

🛠️ Technologies Used

• Main Framework: Astro (v6) - Used to leverage Server-Side Rendering (SSR), Static Site Generation (SSG), and the “Islands” architecture for unmatched performance.
• UI & Interactive Components: React (v19) - Complex state management on the client side (filters, admin dashboard, forms).
• Styling: Tailwind CSS (v4) - Responsive design with a custom design system (ajalol colors).
• Backend as a Service (BaaS): Firebase (v12)
  • Firestore: NoSQL database for vehicle inventory.
  • Firebase Storage: Storage for vehicle images.
  • Firebase Auth & Admin SDK: Session cookie-based authentication management for enhanced security.
• Image Optimization: browser-image-compression and galleries using photoswipe.

📂 Project Structure

/
├── public/                 # Static assets
├── src/
│   ├── components/
│   │   ├── astro/          # Static Astro components
│   │   └── react/          # Interactive components (Island Architecture)
│   ├── layouts/            # Master templates (Layout.astro)
│   ├── lib/
│   │   └── firebase/       # Firebase configuration (client and server)
│   ├── pages/              # File-based routing
│   │   ├── admin/          # Control panel (protected)
│   │   ├── api/            # Backend endpoints
│   │   ├── vehiculo/       # Vehicle detail views
│   │   └── index.astro     # Home page
│   └── middleware.ts       # Middleware for security and protected routes
├── firebase.json           # Firebase CLI configuration
├── firestore.rules         # Firestore security rules
├── storage.rules           # Storage security rules
└── astro.config.mjs        # Astro configuration

🔒 Security

The project’s security is designed with a multi-layered approach:

1. Middleware Protection (Edge/Server):
   • Panel routes (/admin/* and /api/admin/*) are protected and require a valid session cookie verified by the Firebase Admin SDK.
2. Cloudflare Shield (Proxy Secret):
   • Public endpoints for /api/* and /cdn/* in production require a secret in the headers (X-Ajalol-Proxy-Secret) to prevent direct unauthorized access to the origin, bypassing the CDN.
3. Firebase Rules:
   • Restricted access in firestore.rules and storage.rules ensuring that writes and modifications to the catalog can only be done by users with appropriate privileges.

✨ Implemented Practices & Patterns

• Astro Islands Architecture: Client-side JavaScript is loaded only when strictly necessary (client:load on React components like VehicleFilter).
• Hybrid SSR/SSG: The site uses static rendering/prerendering for public pages to guarantee near-instant load times, while using SSR for the admin panel and APIs.
• State and Form Management: Modular React components (VehicleForm, AdminDashboard) to separate administrative view logic from public rendering.
• SEO Optimization: Sitemap inclusion (@astrojs/sitemap) to facilitate vehicle catalog indexing, alongside dynamic meta tags (description, image) and JSON-LD Structured Data built seamlessly for every vehicle page.

🤖 Latest Features (AI, SEO & Advanced Admin)

• AI-Powered Copywriting: Integration with Google Gemini (2.5 Flash) via a native API endpoint. Allows administrators to auto-generate concise, persuasive sales descriptions based on vehicle specifications.
• Dynamic SEO for Vehicles: The [slug].astro layout now consumes and exposes complete vehicle specifications (Color, Drive Wheel, Condition, Doors) into standardized Google Rich Snippets (JSON-LD Offer/Car).
• Advanced Editing Flow: The Admin Dashboard supports deep-editing of existing vehicles (PUT method). It features an intelligent image management system that seamlessly merges existing CDN-hosted image URLs with new binary uploads, and automatically deletes removed pictures from Google Cloud Storage to optimize storage costs.

🚀 Development Commands