PimPam Buga es una aplicación web que funciona como una plataforma de carpooling o ridesharing. La idea es conectar a personas que necesitan viajar con otras que tienen un destino similar para que puedan compartir un vehículo y dividir los gastos de gasolina y peajes.
Los usuarios pueden registrarse con una cuenta de correo electrónico y una contraseña. Una vez dentro, el usuario puede buscar un viaje especificando el origen y destino, la fecha y el número de pasajeros que necesita. La aplicación mostrará los viajes disponibles que coinciden con los criterios de búsqueda del usuario. El usuario puede elegir el viaje que más le conviene y ponerse en contacto con el conductor a través de la plataforma para acordar los detalles del viaje.
Los conductores también pueden publicar sus viajes en la aplicación, especificando los detalles del trayecto y el número de asientos disponibles. Los pasajeros interesados en el viaje pueden contactar al conductor a través de la aplicación y acordar los detalles del viaje.
PimPam Buga tiene muchos beneficios para los usuarios:
- Reducción de los costos de transporte: los usuarios pueden dividir los costos de gasolina y peajes entre ellos, lo que hace que el viaje sea más económico
- Menor impacto ambiental: al compartir un vehículo se reduce la cantidad de emisiones de CO2, lo que ayuda a preservar el medio ambiente
- Mayor comodidad: los usuarios pueden viajar en un vehículo cómodo y seguro, lo que hace que el viaje sea más agradable que viajar en transporte público
- Mayor comodidad: los usuarios pueden viajar en un vehículo cómodo y seguro, lo que hace que el viaje sea más agradable que viajar en transporte público
- ReactJS
- React-router-dom
- React-Hook-form
- ExpressJS
- Mongoose (Base de datos)
- Socket IO
- Cloudinary
- JWT
- Material UI
- Express-validator
- Express-Morgan
- Pagina inicial
La pagina inicial contiene una barra de Navegación, visible durante todo el uso de la aplicacion. Controla el estado de login de los usuarios y les permite, entre otras cosas:
- Registrarse
- Iniciar Sesión
En la home tenemos el buscador y una serie de textos sobre la aplicación. Podemos:
- buscar un viaje existente por origen, destino, fecha y asientos disponibles.
- visualizar la disponibilidad de algunas rutas pre-determinadas.
Screenshot:
- Form de registro de un nuevo usuario
Form creado utilizando un modal, que permite registrar un nuevo usuario recogiendo algunos datos básicos utilizando React Hook Form para contorlar errores y/o campos requeridos.
Screenshot:
- Form de login del usuario
Form creado utilizando un modal, con validaciones a lado del client y servidor utilizando React Hook Form para contorlar errores y/o campos requeridos.
Screenshot:
- Búsqueda de viajes, lista de resultados y detalle del viaje
Al buscar un viaje desde la pagina principal de la aplicación, se devuelve una lista de los viajes disponibles, incluyendo:
- origen
- destino
- hora de inicio
- hora de llegada
- nombre y foto del conductor
- precio
- plazas disponibles
Al hacer click sobre un viaje, es posible ver el detalle del mismo, visualizar los puntos de origen y destino en google maps,
Si el usuario tiene una sesión activa, será posible chatear con el conductor, o inscribirse como participante al viaje, siempre que este tenga plazas disponibles.
Screenshots:
- Perfil del usuario
En la pagina del perfil del usuario se encuentran enlaces de utilidad, como por ejemplo la gestión de los datos personales.
-
Visualizar los datos del usuario, subir o cambiar la imagen del perfil, determinar cuales son los hábitos como conductor y seleccionar marca o modelo del propio coche.
-
Tus viajes: es posible visualizar en la misma sección los viajes creados como conductor y las reservas de viajes como pasajero. También podemos cancelar las reservas si fuera necesario.
Screenshots:
- Crear nuevo viaje
Mediante esta función, es posible crear un nuevo viaje como conductor, ofreciendo a los otros usuarios la posibilidad de inscribirse como huéspedes, y pagando una cantidad de dinero para aprovechar el servicio.
Screenshot:
- Notificaciones
Cuando un usuario reserva plaza o cancela su reserva en un viaje activo, el conductor recibe una notificación. En el menu del usuario aparecerá un icono de estado, que permite saber si hay notificaciones sin leer. En el mismo menu, un numero al lado del enlace identifica cuantas notificaciones estás sin leer. Una vez dentro de la opción de mensajes, puedes marcar estos como leídos y eliminarlos.
Screenshots:
- Chat
El chat permite interacció directa entre los usuarios. Cuando vemos un viaje de otro usuario, podemos abrir chat con éste para hablar sobre el viaje, condiciones, etc antes de reservar. El componente principal del chat es un floating div unido a la navbar lo que hace que, al igual que ésta, aparezca y esté presnete siempre que un usuario esté logueado, permitiendo acceder a los chats desde cualquier opción.
Screenshots:
El componente que queremos destacar es la creación de un nuevo viaje, newTrip.js.
Es un modal que se abre sobre cualquier pantalla pulsando el icono + (crear viaje) desde la navbar.
El componente es un formulario creado en react hook forms, que utiliza el componente especial Controller para importar varios campos específicos basados en componente de Material UI customizados.
Estos son:
- Un datepicker para poder elegir fecha y hora de salida, y hora de llegada
- Un componente autocomplete custom que, cuando detecta que has escrito más de tres caracteres, realiza una petición a backend con el texto introducido. Backend recoge esta petición y realiza a su vez una llamada a la API de **Radar **(una alternativa gratuita a google maps).
Radar devuelve un array de localizaciones que se acercan al string introducido por el usuario. Backend elimina opciones indeseadas y duplicados, formatea el output a un formato español (Radar lo da en inglés) y devuelve a frontend un array de opciones, que frontend recoge y dinámicamente coloca como opciones de autocomplete.
Al rellenar los campo y hacer submit del form, el front pasa a backend el texto seleccionado, y backend de nuevo llama a Radar, convirtiendo el texto en coordenadas GPS que guardamos en BBDD. Esto nos permitirá hacer búsquedas por cercanía y por coordenadas. Tanto el texto de la localización de origen/destino como sus coordenadas quedan guardadas en BBDD y se pueden utilizar en las búsquedas
Fernando Rosal
Paulo Dutra Duffy
Albert Bosch
Miriam Castelló
Alex Acevedo
Antonio Colella
🎉️🎉️🎉️ Gracias a todos los profesores que nos han permitido llevar a cabo esta aventura!