Que Plan

Presentación del proyecto

Estado actual · Rol usuario · Septiembre 2026

Resumen ejecutivo

Que Plan es una app de descubrimiento ciudadano para Zacatlán, Chignahuapan y Tetela. Hasta ahora se ha construido el rol usuario completo: inicio, exploración, búsqueda, guardados, perfil gamificado y perfiles de negocio. La interfaz es mobile-first con estética moderna y microinteracciones (reacciones, carruseles, bottom sheets).

6

rutas de usuario

3

ciudades activas

9

perfiles de negocio

2

integraciones reales

Mapa de rutas del rol usuario

Estas son las pantallas que el usuario final puede visitar hoy.

Inicio

MockTiene lógica
/

Pantalla principal con selector de ciudad, plan del día en carrusel, ruta del día, eventos filtrables y sección Cerca de ti.

Lógica: Cambio de ciudad, filtros de eventos, selección múltiple de ciudades en Cerca de ti y carrusel con autoplay/swipe.

Ver pantalla

Explorar

MockTiene lógica
/explorar

Feed vertical estilo TikTok con tarjetas de lugares, experiencias, restaurantes, hoteles y eventos. Incluye detalle en bottom sheet y acciones de like/guardar.

Lógica: Filtros por categoría, scroll snap, detalle emergente y navegación a perfiles de negocio. Nota: los likes/guardados en el feed son estado local del componente; no persisten en Supabase.

Ver pantalla

Buscar

MockTiene lógica
/buscar

Buscador general con filtros por tipo y sugerencias populares. Busca sobre ciudades, negocios, experiencias y eventos.

Lógica: Búsqueda client-side con normalización de acentos, filtros por tipo y navegación a resultados.

Ver pantalla

Guardados

BackendTiene lógica
/guardados

Colección personal de planes y eventos guardados y me gusta. Requiere sesión para persistir en backend.

Lógica: CRUD real en Supabase (tabla saved_places). Si no hay sesión, muestra estado de invitado.

Ver pantalla

Perfil

LocalStorageTiene lógica
/perfil

Perfil gamificado tipo videojuego: nivel, XP, logros, misiones, bitácora de rutas y control de sesión.

Lógica: Progreso en localStorage, estadísticas derivadas de rutas completadas, guardados y me gusta. Auth real.

Ver pantalla

Perfil de negocio

MockTiene lógica
/negocio/$id

Página pública de cada negocio: portada en carrusel, identidad, descripción, horario, ofertas, servicios y contacto.

Lógica: Loader de TanStack Router con notFound() si el id no existe. Galería con autoplay, swipe y lightbox.

Ver pantalla

¿Dónde hay lógica y dónde no?

Clasificación por área funcional.

Autenticación

Lógica real

Registro, login, logout y Google OAuth con Supabase Auth. El hook useAuth expone usuario y estado de carga.

Guardados / Me gusta

Lógica real

Se guardan en la tabla saved_places de Supabase con user_id, place_id y action. Funciona solo con sesión activa.

Progreso y logros

Parcial / local

La lógica de XP, nivel y logros existe, pero se almacena en localStorage. No se sincroniza con backend si el usuario cambia de dispositivo.

Datos de contenido

Mock / estático

Ciudades, eventos, experiencias, restaurantes, hoteles y perfiles de negocio son datos estáticos en el código. No hay CMS ni base de datos de contenido.

Búsqueda

Parcial / local

La búsqueda funciona sobre el índice local. No hay backend de búsqueda ni geolocalización real del usuario.

Rutas / navegación

Lógica real

Navegación completa con TanStack Router: rutas protegidas por sesión en Guardados, loader en /negocio/$id y notFound().

Hallazgos importantes

  • Inconsistencia en likes/guardados: el feed de Explorar guarda likes/guardados solo en estado local del componente. El detalle inmersivo de planes/eventos sí persiste en Supabase.
  • Botones decorativos: "Seguir ruta", "Agregar a mi ruta", "Compartir" y "Notificaciones" aún no tienen funcionalidad real.
  • Progreso solo en este dispositivo: XP, nivel y logros viven en localStorage; cambiar de navegador o borrar caché los reinicia.
  • No hay sistema de roles: no existe aún un rol negocio/admin. Todos los perfiles de negocio son datos estáticos.

Inventario de funcionalidades

  • Autenticación con email y Google
  • Guardar y dar me gusta (persistente)
  • Perfil gamificado con niveles y logros
  • Explorar tipo feed vertical con detalle
  • Buscador con filtros y sugerencias
  • Perfiles de negocio con galería y lightbox
  • Carrusel de planes del día con autoplay
  • Selector de ciudad y sección Cerca de ti
  • Animaciones de reacción (like/guardar)
  • Navegación inferior estilo app móvil
  • ·Panel de administración de negocios
  • ·Subida de imágenes reales por negocio
  • ·Geolocalización y mapas interactivos
  • ·Reservas y pagos en línea
  • ·CMS o base de datos de contenido
  • ·Sincronización de progreso en la nube

Próximos pasos sugeridos

  1. Decidir el rol negocio/admin: ¿quién creará y editará perfiles, experiencias y eventos?
  2. Migrar contenido a backend: mover negocios, eventos y ciudades de archivos estáticos a tablas de Supabase.
  3. Sincronizar progreso: guardar XP, nivel y logros del usuario en la base de datos.
  4. Geolocalización real: usar la ubicación del dispositivo para ordenar “Cerca de ti” por distancia.
  5. Reservas: agendar experiencias y enviar notificaciones.