🚌 MiBondi

---

📱 Demo

MiBondi es una aplicación web progresiva (PWA) que permite consultar los tiempos de arribo de colectivos en Mar del Plata, Argentina. Diseñada con enfoque mobile-first y optimizada para máxima performance.

Características principales:

• 🕐 Arribos en tiempo real - Consulta cuándo llega tu colectivo en segundos
• ⭐ Favoritos inteligentes - Guarda tus paradas y consulta arribos automáticamente
• 🎨 Diseño moderno - Interfaz limpia con modo claro/oscuro
• ⚡ Ultra rápida - Caché multi-capa para respuestas instantáneas
• ♿ Accesible - Cumple con estándares WCAG AAA

---

🚀 Tech Stack

Categoría	Tecnologías
Framework	Next.js 16 + React 19
Lenguaje	TypeScript 5 (Strict Mode)
Estilos	Tailwind CSS v4 + tw-animate-css
Estado	Zustand + TanStack Query
Mapas	MapLibre GL
Animaciones	Motion (Framer Motion)
UI Components	Radix UI + react-modal-sheet
Icons	Lucide React
Package Manager	pnpm

---

🏗️ Arquitectura

Server/Client Components Híbrida

┌─────────────────────────────────────────────────────┐
│                  Next.js 16 App                     │
│  ┌─────────────────┐  ┌─────────────────────────┐   │
│  │ Server Component│  │   Client Component      │   │
│  │  (Static)       │  │   (Interactive)         │   │
│  │                 │  │                         │   │
│  │  - Page layout  │  │   - Favoritos Store     │   │
│  │  - Data fetch   │  │   - Consultar form      │   │
│  │  - SEO          │  │   - Bottom sheet        │   │
│  └─────────────────┘  └─────────────────────────┘   │
└─────────────────────────────────────────────────────┘

Estrategia de Caché Multi-capa

Capa	Tecnología	TTL	Uso
1. Browser	Cache-Control Headers	-	Assets estáticos
2. CDN	Vercel Edge Cache	24h / 1min	Respuestas API
3. Server	Next.js use cache	24h / 1min	Funciones server
4. Client	TanStack Query	Configurable	Estado local

Perfiles de caché:

• Static (24h): Líneas, calles, intersecciones, paradas, recorrido
• Realtime (1min): Arribos de colectivos

---

📦 Instalación

Requisitos previos

• Node.js 20+
• pnpm 8+

Pasos

# 1. Clonar el repositorio
git clone https://github.com/tuusuario/mibondi.git
cd mibondi

# 2. Instalar dependencias
pnpm install

# 3. Configurar variables de entorno
cp .env.example .env.local
# Editar .env.local con tus credenciales

# 4. Iniciar servidor de desarrollo
pnpm dev

Abre http://localhost:3000 en tu navegador.

---

🔐 Variables de Entorno

Crea un archivo .env.local en la raíz del proyecto:

---

🎯 Scripts Disponibles

# Desarrollo
pnpm dev              # Inicia servidor de desarrollo con hot reload

# Producción  
pnpm build            # Build optimizado para producción
pnpm start            # Inicia servidor de producción

# Calidad de código
pnpm lint             # Ejecuta ESLint con reglas de Next.js
pnpm format           # Formatea código con Prettier

---

🎨 Tema de Colores

Color	Hex	Uso
Amarillo	#f9cd4a	Primario, branding, acentos
Turquesa	#289b95	Secundario, éxito
Rosa	#e54f90	Destructivo, eliminar
Error	#d64545	Estados de error
Success	#2e9b6f	Estados de éxito
BG Light	#fbfbf8	Fondo tema claro
BG Dark	#22436f	Fondo tema oscuro
Texto	#22436f / #fbfbf8	Texto según tema

---

⚡ Performance Optimizations

• Zustand Selectors: Subscripciones atómicas para evitar re-renders
• Dynamic Imports: Carga diferida de componentes pesados
• Suspense Boundaries: Loading states progresivos
• Intersection Observer: Solo fetchear datos de elementos visibles
• Debounce: En interacciones para evitar spam de requests
• GPU Acceleration: will-change-transform en animaciones

---

♿ Accesibilidad

• ✅ ARIA labels en todos los elementos interactivos
• ✅ Roles semánticos (list, listitem, article)
• ✅ Focus management con react-aria
• ✅ Contraste WCAG AAA en ambos temas
• ✅ Navegación por teclado completa

---