Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Jesus-Puertos/h-ayuntamiento/llms.txt

Use this file to discover all available pages before exploring further.

​
Core Framework

​
Astro 5.16.6

The Meta-Framework for Content-Driven Websites 
"astro": "^5.16.6"
  • Server-Side Rendering (SSR): Configured with output: 'server' for dynamic content
  • Partial Hydration: Ships zero JavaScript by default, hydrates only interactive components
  • File-Based Routing: Automatic routes from /src/pages
  • Built-in i18n: Native multilingual support (es, en, nah-MX)
  • Component Agnostic: Works with React, Vue, Svelte, or plain HTML
See Architecture for how Astro powers the platform.

​
UI Framework

​
React 19.2.3

For Interactive Components 
"react": "^19.2.3",
"react-dom": "^19.2.3",
"@types/react": "^19.2.8",
"@types/react-dom": "^19.2.3"
Used for:
  • Authentication UI (AuthButtons.tsx)
  • Tourism onboarding wizard (TurismoOnboarding.tsx)
  • Interactive forms and modals
  • Real-time components with Supabase subscriptions
Integration: Via @astrojs/react adapter 
"@astrojs/react": "^4.4.2"
Components use client:* directives for selective hydration: 
<AuthButtons client:load />
<TurismoOnboarding client:visible />

​
Backend & Database

​
Supabase 2.93.2

Open-source Firebase Alternative 
"@supabase/supabase-js": "^2.93.2"
Features Used:
  • Authentication: OAuth (Google, Facebook), email/password
  • Database: PostgreSQL with real-time subscriptions
  • Storage: Media and asset uploads
  • Row-Level Security: Fine-grained access control
Tables:
  • user_profiles - User information and avatars
  • user_preferences - Tourism preferences from onboarding
  • user_routes - Generated personalized routes
  • user_badges - Gamification achievements
  • user_favorites - Saved attractions
See Supabase Integration for complete API reference.

​
Styling

​
Tailwind CSS 4.1.18

Utility-First CSS Framework 
"tailwindcss": "^4.1.18",
"@tailwindcss/vite": "^4.1.18"
Configuration: Via Vite plugin in astro.config.mjs 
vite: {
  plugins: [tailwindcss()]
}
Additional Tailwind Utilities: 
"tailwind-merge": "^3.4.0",        // Merge Tailwind classes
"tailwind-animations": "^1.0.1",   // Pre-built animations
"tw-animate-css": "^1.4.0"         // CSS animations
Usage Example: 
<button className="px-6 py-3 bg-gradient-to-r from-orange-600 to-orange-500 text-white rounded-xl font-bold hover:shadow-lg transition">
  Click me
</button>

​
Class Variance Authority

"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1"
For building variant-based component APIs: 
import { cva } from 'class-variance-authority';

const button = cva('px-4 py-2 rounded', {
  variants: {
    intent: {
      primary: 'bg-orange-500 text-white',
      secondary: 'bg-gray-200 text-gray-900'
    }
  }
});

​
Animation & Interaction

​
Motion 12.34.3

Framer Motion for React 
"motion": "^12.34.3"
Used for:
  • Page transitions
  • Component entrance animations
  • Interactive gestures

​
GSAP 3.14.2

GreenSock Animation Platform 
"gsap": "^3.14.2"
For complex timeline-based animations:
  • Hero section animations
  • Scroll-triggered reveals
  • SVG animations

​
React Three Fiber 9.5.0

3D Graphics with Three.js 
"@react-three/fiber": "^9.5.0",
"three": "^0.182.0"
Used for 3D visualizations and interactive experiences.

​
Use Gesture 10.3.1

"@use-gesture/react": "^10.3.1"
Touch and gesture handling for mobile interactions.

​
UI Components & Libraries

​
Lucide React 0.562.0

Beautiful Icon Library 
"lucide-react": "^0.562.0"

import { ChevronRight, User, MapPin } from 'lucide-react';

<ChevronRight className="w-4 h-4" />

​
Tabler Icons 3.36.1

"@tabler/icons": "^3.36.1",
"@tabler/icons-react": "^3.36.1"
Additional icon set for extended coverage.

​
Sonner 1.7.4

Toast Notifications 
"sonner": "^1.7.4"

import { toast } from 'sonner';

toast.success('¡Ruta guardada!');

​
Sileo 0.1.5

State Management 
"sileo": "^0.1.5"
Lightweight state management for client-side state.

​
PhotoSwipe 5.4.4

Gallery Lightbox 
"photoswipe": "^5.4.4"
For image galleries and lightbox experiences.

​
Utilities

​
Nanoid 5.1.6

Unique ID Generator 
"nanoid": "^5.1.6"
Generates URL-safe unique identifiers: 
import { nanoid } from 'nanoid';

const shareCode = nanoid(10); // "V1StGXR8_Z"
Used for generating share codes for tourism routes.

​
QRCode 1.5.4

QR Code Generation 
"qrcode": "^1.5.4"
Generates QR codes for ticket sharing: 
import QRCode from 'qrcode';

const qrDataUrl = await QRCode.toDataURL(`https://zongolica.gob.mx/ruta/${shareCode}`);

​
HTML to Image 1.11.13

Screenshot Generation 
"html-to-image": "^1.11.13"
Converts DOM nodes to images for ticket downloads.

​
Canvas Confetti 1.9.3

Celebration Effects 
"canvas-confetti": "^1.9.3"
Confetti animations for achievement unlocks.

​
Satori 0.25.0

HTML to Image (SSR) 
"satori": "^0.25.0",
"@resvg/resvg-js": "^2.6.2"
Generates Open Graph images at build/request time.

​
Typography

​
Poppins Font

"@fontsource/poppins": "^5.2.7"
Self-hosted font for consistent typography: 
import '@fontsource/poppins/400.css';
import '@fontsource/poppins/600.css';
import '@fontsource/poppins/700.css';

​
Deployment

​
Vercel Adapter

"@astrojs/vercel": "^9.0.4"
Integrates Astro with Vercel’s serverless platform: 
import vercel from '@astrojs/vercel';

export default defineConfig({
  output: 'server',
  adapter: vercel()
});
Features:
  • Automatic deployments from Git
  • Serverless functions for dynamic routes
  • Edge network CDN
  • Environment variable management
  • Analytics and monitoring

​
Development Tools

​
TypeScript

Strict Type Safety 
// tsconfig.json
{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
Path Aliases: @/* maps to ./src/* for clean imports: 
import { supabase } from '@/lib/supabase';
import AuthButtons from '@/components/AuthButtons.tsx';

​
Playwright 1.55.0

End-to-End Testing 
"@playwright/test": "^1.55.0"
Test script: 
npm run test:routes  # Build + E2E tests

​
Package Scripts

{
  "scripts": {
    "dev": "astro dev",              // Local development server
    "build": "astro build",          // Production build
    "preview": "astro preview",      // Preview production build
    "astro": "astro",                // Astro CLI
    "test:routes": "astro build && playwright test"
  }
}

​
Version Requirements

Node.js: 18.x or higher required for Astro 5.xPackage Manager: npm, pnpm, or yarn

​
Next Steps

Architecture

Understand the system architecture

Folder Structure

Explore the project file organization

Supabase

Database and backend integration

Components

Component architecture and patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us