Technology Stack

Complete list of technologies, frameworks, and libraries powering the platform

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.x

Package 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