🅿 EasyParker PWA

Progressive Web App moderna para encontrar y reservar parqueo en Guayaquil en menos de 90 segundos.

Ver Demo en Vivo

Características Principales

Modo Conductor

Característica	Descripción
Mapa Interactivo	Visualiza parqueos en tiempo real con marcadores de colores según disponibilidad
Búsqueda Avanzada	Filtra por precio, distancia, verificación y accesibilidad PMR
Código QR	Genera QR único para acceso rápido al parqueo
Extensión de Tiempo	Extiende tu reserva sin salir del parqueo
Cancelación Fácil	Cancela reservas activas con confirmación
Favoritos	Guarda tus parqueos favoritos con persistencia
Chat en Tiempo Real	Comunícate directamente con anfitriones
Calificaciones	Califica tu experiencia con anfitriones
Reportes	Reporta problemas o usuarios

Modo Anfitrión

Característica	Descripción
Dashboard	Panel de control con estadísticas de ganancias, reservas y calificación
Gestión de Garajes	Crea, edita y administra múltiples propiedades
Billetera Virtual	Visualiza ganancias, transacciones y retira fondos
Solicitudes en Tiempo Real	Acepta o rechaza reservas con notificaciones instantáneas
Notificaciones con Sonido	Alertas audiovisuales para nuevas solicitudes
Chat con Conductores	Mensajería directa con clientes
Calificación de Conductores	Evalúa la experiencia con cada cliente
Sincronización Cross-Tab	Estado sincronizado entre pestañas del navegador

Sistema de Eventos

Característica	Descripción
Eventos Cercanos	Detecta eventos próximos (conciertos, shows)
Precios Dinámicos	Tarifa surge automática durante eventos
Escolta VIP	Servicio opcional de acompañamiento ($1.00 extra)
Horarios Extendidos	Slots nocturnos para eventos (hasta 3am)

🔐 Sistema de Autenticación

Característica	Descripción
Registro/Login	Autenticación con email y contraseña
Perfiles de Usuario	Foto, nombre, verificación, estadísticas
Rutas Protegidas	Acceso controlado a funciones autenticadas
Cambio de Modo	Alterna entre Conductor y Anfitrión

PWA & Offline

Característica	Descripción
Instalable	Instala como app nativa en cualquier dispositivo
Funciona Offline	Acceso básico sin conexión a internet
Notificaciones Push	Recordatorios antes de que expire tu reserva

Stack Tecnológico

Frontend

React 18.3 - Librería UI con hooks modernos
Vite 5.4 - Build tool ultra-rápido
TypeScript 5.5 - Tipado estático

Estilos

Tailwind CSS 3.4 - Utility-first CSS
Lucide React - Iconografía moderna

Mapas & Geolocalización

Leaflet - Mapas interactivos
react-leaflet - Integración React
OpenStreetMap - Tiles gratuitos

Estado & Navegación

Context API - Gestión de estado global (10 contextos)
React Router DOM v6 - Navegación SPA
localStorage - Persistencia de datos

PWA & Offline

Service Worker - Cache y offline
Web App Manifest - Instalación nativa
Web Notifications API - Notificaciones push

Generación QR

qrcode.react - Códigos QR dinámicos
html-to-image - Exportar comprobantes como imagen

Estructura del Proyecto

easyparker-pwa/
├── public/
│   ├── manifest.json       # PWA Manifest
│   ├── sw.js               # Service Worker
│   └── logo/               # Iconos de la app
├── src/
│   ├── pages/
│   │   ├── Home.tsx        # Landing con eventos y sugerencias
│   │   ├── Buscar.tsx      # Mapa + filtros + lista
│   │   ├── Detalle.tsx     # Detalle de parqueo con reseñas
│   │   ├── Reservar.tsx    # Flujo de reserva completo
│   │   ├── MisReservas.tsx # Historial + QR + acciones
│   │   ├── Favoritos.tsx   # Parqueos guardados
│   │   ├── Profile.tsx     # Perfil de usuario con ratings
│   │   ├── Mensajes.tsx    # Lista de chats (conductor)
│   │   ├── ChatView.tsx    # Vista de chat individual
│   │   ├── Events.tsx      # Página de eventos
│   │   ├── SignUp.tsx      # Registro/Login
│   │   └── host/           # Páginas modo anfitrión
│   │       ├── HostDashboard.tsx  # Panel principal
│   │       ├── HostGarage.tsx     # Gestión de garajes
│   │       ├── HostWallet.tsx     # Billetera
│   │       ├── HostMensajes.tsx   # Lista de chats
│   │       └── HostChatView.tsx   # Chat individual
│   ├── components/
│   │   ├── layout/         # Header, BottomNav, Layout
│   │   ├── ui/             # Button, Card, Modal, Badge, NotificationToast
│   │   ├── parking/        # MapView, ParkingCard, FilterBar
│   │   ├── chat/           # ChatHeader, ChatBubble, ChatInput, ConversationList
│   │   ├── rating/         # RatingModal
│   │   ├── report/         # ReportModal
│   │   ├── profile/        # ProfileStats, VerifiedBadge
│   │   ├── host/           # HostLayout, HostBottomNav
│   │   └── reviews/        # ReviewCard, ReviewList
│   ├── context/
│   │   ├── AuthContext.tsx         # Autenticación
│   │   ├── ParkingContext.tsx      # Parqueos + garajes reclamados
│   │   ├── ReservaContext.tsx      # Reservas del conductor
│   │   ├── HostContext.tsx         # Estado del anfitrión
│   │   ├── ChatContext.tsx         # Mensajería en tiempo real
│   │   ├── RatingContext.tsx       # Sistema de calificaciones
│   │   ├── ReportContext.tsx       # Sistema de reportes
│   │   ├── ProfileContext.tsx      # Perfiles de usuario
│   │   ├── FavoritesContext.tsx    # Favoritos
│   │   └── NotificationContext.tsx # Notificaciones globales
│   ├── data/               # parkings.ts, events.ts, chatMock.ts, usersMock.ts
│   ├── types/              # Interfaces TypeScript
│   └── utils/              # timeSlots.ts, pricingUtils.ts
├── package.json
├── tailwind.config.js
├── vite.config.ts
└── tsconfig.json

🗺️ Rutas de la Aplicación

Rutas Públicas

Ruta	Página	Descripción
`/`	Splash	Pantalla de carga inicial
`/onboarding`	Onboarding	Tutorial de bienvenida
`/signup`	SignUp	Registro/Login
`/events`	Events	Eventos próximos

Rutas Conductor (Protegidas)

Ruta	Página	Descripción
`/home`	Home	Landing con mapa mini y eventos
`/buscar`	Buscar	Mapa completo + filtros + lista
`/parqueo/:id`	Detalle	Info completa, galería, reseñas
`/reservar/:id`	Reservar	Selección de fecha/hora, pago
`/mis-reservas`	MisReservas	Historial, QR, extensión
`/favoritos`	Favoritos	Parqueos guardados
`/mensajes`	Mensajes	Lista de conversaciones
`/mensajes/:id`	ChatView	Chat individual
`/perfil/:userId?`	Profile	Perfil propio o de otro usuario

Rutas Anfitrión (Protegidas)

Ruta	Página	Descripción
`/host/dashboard`	HostDashboard	Panel con estadísticas y solicitudes
`/host/garage`	HostGarage	Gestión de propiedades
`/host/wallet`	HostWallet	Billetera y transacciones
`/host/mensajes`	HostMensajes	Lista de chats
`/host/mensajes/:id`	HostChatView	Chat con conductor

📱 Guía de Usuario

🔍 Buscar y Reservar (Conductor)

Inicia sesión o regístrate
Ve a Buscar desde el menú inferior
Usa el mapa o aplica filtros (precio, distancia, PMR)
Toca un parqueo para ver detalles
Selecciona horas y completa el pago
Recibe tu código QR de acceso

🏠 Publicar mi Garaje (Anfitrión)

Inicia sesión y toca Modo Anfitrión
Ve a Mis Garajes
Toca + Crear Nuevo o Reclamar Existente
Completa la información
Activa Recibiendo Reservas en el Dashboard
Acepta solicitudes cuando lleguen

💬 Chat en Tiempo Real

Al crear una reserva, se genera un chat automáticamente
Accede desde Mensajes en el menú
Los mensajes se sincronizan al instante entre pestañas
Toca el avatar para ver el perfil del otro usuario

⭐ Calificar y Reportar

Después de una reserva completada, aparece el botón Calificar
Elige estrellas y escribe un comentario
Para reportar, toca Reportar y describe el problema

Sistema de Diseño

Paleta de Colores

Color	Hex	Uso
🔵 Primary	`#0B1F60`	Acciones principales, texto
🟢 Success	`#10b981`	Disponibilidad, verificado, anfitrión
🟡 Warning	`#f59e0b`	Pocas plazas, alertas
🔴 Danger	`#ef4444`	Sin plazas, errores, rechazos
🟣 Accent	`#5A63F2`	Enlaces, CTAs secundarios

Responsive

Mínimo: 320px (iPhone SE)
Óptimo: 375px - 428px (iPhones modernos)
Máximo: 768px (tablets)

Accesibilidad

Contraste WCAG AA
Botones táctiles 44px mínimo
Labels en formularios
Alt text en imágenes

Datos de Demostración

Tipo	Cantidad
Parqueos	35 ubicaciones en Guayaquil
Usuarios Mock	6 conductores + 4 anfitriones
Reseñas	Diferenciadas por tipo
Reservas Demo	Activas y completadas
Eventos	2 eventos próximos (Chayanne, Burger Show)

Performance

Métrica	Valor
Build Time	~15s
Bundle JS	~500 KB
Bundle CSS	~50 KB
Gzip Total	~170 KB
First Load	< 3s
Flujo Completo	< 90s

Instalación

# Clonar repositorio
git clone https://github.com/Sam-24-dev/easyparker-pwa.git

# Entrar al directorio
cd easyparker-pwa

# Instalar dependencias
npm install

# Iniciar desarrollo
npm run dev

La aplicación estará disponible en http://localhost:5173

Scripts Disponibles

npm run dev      # Servidor de desarrollo
npm run build    # Build de producción
npm run preview  # Preview del build
npm run lint     # Ejecutar ESLint

Deploy

Vercel (Recomendado)

npm run build
# El directorio dist/ está listo para deploy

Variables de Entorno

No se requieren variables de entorno para la demo.

🤝 Contribuir

Fork el repositorio
Crea una rama (git checkout -b feature/nueva-funcionalidad)
Commit tus cambios (git commit -m 'Add: nueva funcionalidad')
Push a la rama (git push origin feature/nueva-funcionalidad)
Abre un Pull Request

📄 Licencia

Hecho por Samir Caizapasto con ❤️ en Guayaquil, Ecuador

Name		Name	Last commit message	Last commit date
Latest commit History 33 Commits
public		public
scripts		scripts
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
DEPLOYMENT.md		DEPLOYMENT.md
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

🅿 EasyParker PWA

Ver Demo en Vivo

Características Principales

Modo Conductor

Modo Anfitrión

Sistema de Eventos

🔐 Sistema de Autenticación

PWA & Offline

Stack Tecnológico

Frontend

Estilos

Mapas & Geolocalización

Estado & Navegación

PWA & Offline

Generación QR

Estructura del Proyecto

🗺️ Rutas de la Aplicación

Rutas Públicas

Rutas Conductor (Protegidas)

Rutas Anfitrión (Protegidas)

📱 Guía de Usuario

🔍 Buscar y Reservar (Conductor)

🏠 Publicar mi Garaje (Anfitrión)

💬 Chat en Tiempo Real

⭐ Calificar y Reportar

Sistema de Diseño

Paleta de Colores

Responsive

Accesibilidad

Datos de Demostración

Performance

Instalación

Scripts Disponibles

Deploy

Vercel (Recomendado)

Variables de Entorno

🤝 Contribuir

📄 Licencia

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages