Near Bites es una aplicación web dinámica que utiliza geolocalización para ayudar a los usuarios a encontrar restaurantes cercanos. Además de ofrecer la posibilidad de filtrar resultados y gestionar reservas, Near Bites integra funciones de interacción como añadir restaurantes a favoritos, gestionar roles de usuarios (incluyendo propietarios y administradores), y un sistema completo de comentarios y valoraciones.
- 📍 Funcionalidades Principales
- 🚀 Tecnologías Utilizadas
- 🛠️ Estructura del Proyecto
- 🔍 Lógica de la Aplicación
- 🎯 Retos Técnicos y Soluciones
- 👨💻 Habilidades Adquiridas
- ❤️ Agradecimientos
- 🤝 Contribuciones
- Geolocalización en Tiempo Real: La aplicación detecta la ubicación del usuario para mostrar los restaurantes cercanos, con posibilidad de ajustar el radio de búsqueda.
- Comentarios y Valoraciones: Los usuarios pueden dejar reseñas en los restaurantes, ayudando a otros a tomar decisiones informadas.
- Favoritos y Lista de Deseos: Guarda los restaurantes favoritos y agrega otros a tu lista de deseos para reservas futuras.
- Interacción entre Usuarios: Los usuarios pueden ver perfiles de otros, estadísticas, y seguirse entre sí, fomentando una comunidad activa.
- Chat en Tiempo Real: Implementación de un sistema de chat en tiempo real utilizando Socket.IO, donde los usuarios pueden comunicarse, recibir notificaciones y aceptar o rechazar conversaciones, evitando spam y mejorando la experiencia de usuario.
- Bandeja de Entrada de Chats: Una interfaz que permite a los usuarios acceder a sus conversaciones y gestionar sus notificaciones.
- Reservas Dinámicas: Permite realizar reservas en tiempo real, gestionando horarios y disponibilidad automáticamente.
- Gestión de Roles: Los usuarios pueden tener roles especiales como
owner, con acceso a herramientas de administración para gestionar la apariencia y datos de su restaurante, yadminque gestiona y administra las distintas cuentas y sus permisos. - Panel de Control para Propietarios y Administradores: Los propietarios tienen un panel donde pueden modificar fácilmente los datos de su restaurante (imágenes, turnos, ofertas, etc.), mientras que los administradores pueden gestionan usuarios y permisos con un solo click.
Este proyecto ha sido desarrollado utilizando una combinación de tecnologías modernas que permiten una experiencia de usuario ágil y dinámica:
-
HTML: Lenguaje de marcado utilizado para estructurar el contenido de la aplicación web.
-
CSS: Herramienta para estilizar y mejorar la apariencia visual de la interfaz de usuario.
-
Javascript: Lenguaje de programación utilizado para la lógica de la aplicación, gestión de eventos y manipulación del DOM.
-
React Context: Mecanismo de React que permite compartir estados y funciones entre componentes sin necesidad de pasar props manualmente, facilitando la gestión global de datos en la aplicación.
-
axios: Librería para realizar solicitudes HTTP de manera sencilla, utilizada para interactuar con el servidor y la API.
-
Vite: Como el bundler para ofrecer una experiencia de desarrollo rápida y eficiente.
-
React: Para la construcción de la interfaz de usuario, utilizando componentes reutilizables y un enfoque modular.
-
Express: Manejo del backend, con un enfoque RESTful en las APIs.
-
MongoDB y Mongoose: Base de datos NoSQL utilizada para gestionar la información de usuarios, restaurantes, comentarios, y reservas.
-
Socket.IO: Librería que permite la comunicación en tiempo real entre el cliente y el servidor. Utilizada para implementar un sistema de chat en tiempo real que mejora la interacción entre usuarios a través de notificaciones instantáneas y gestión de mensajes.
-
Leaflet: Librería para la integración de mapas interactivos y geolocalización.
-
Cloudinary: Servicio utilizado para la gestión y almacenamiento de imágenes.
-
React Spinners: Para la integración de loaders y mejorar la experiencia de usuario mientras se cargan los datos.
El proyecto está dividido en dos repositorios para organizar mejor las responsabilidades del frontend y backend:
-
Frontend (Este Repositorio): Contiene todo el código relacionado con la interfaz de usuario y la experiencia del cliente, construido con React, Vite y otras herramientas de desarrollo frontend.
/src/components: Componentes reutilizables de React como las tarjetas de restaurantes, formularios de comentarios, y el panel de control de usuarios./src/pages: Vistas principales de la aplicación como la página de inicio, la página de favoritos y el panel de administración./src/services: Configuración de Axios para gestionar las solicitudes HTTP al backend./src/context: Manejadores de estado globales (como el de autenticación y roles) que permiten compartir datos y funciones entre componentes./src/assets: Imágenes y recursos estáticos utilizados en la interfaz./src/styles: Distintos archivos .css usados./src/utils: Funcionalidades recurrentes.
-
Backend (Repositorio Separado): Toda la lógica del servidor, incluyendo las rutas de la API, la configuración de MongoDB y la gestión de roles, se encuentra en este repositorio.
- En este repositorio se manejan las conexiones con la base de datos, la autenticación de usuarios, las reservas, los comentarios, la gestión de restaurantes y el control de acceso basado en roles (usuarios, propietarios y administradores).
- Integración de servicios de terceros como Cloudinary para el manejo de imágenes y Leaflet para los mapas y geolocalización.
La aplicación está diseñada para ser completamente interactiva y adaptable a las necesidades de cada usuario:
- Geolocalización Dinámica: A través de la API de geolocalización del navegador, Near Bites obtiene la ubicación actual del usuario y le muestra los restaurantes más cercanos.
- Sistema de Filtrado: Los usuarios pueden ajustar el radio de búsqueda y aplicar filtros adicionales como disponibilidad, tipo de comida, y calificación.
- Gestión de Reservas: Near Bites controla la disponibilidad de cada restaurante, integrando un sistema de turnos dinámico que permite gestionar las reservas en tiempo real.
- Gestión de Roles: Implementa un sistema de autorización basado en roles, permitiendo que los propietarios gestionen la información de sus restaurantes y los administradores supervisen y editen roles de usuarios.
- Sistema de Chat: La aplicación permite a los usuarios chatear entre sí en tiempo real. Las notificaciones se envían para que los usuarios acepten o rechacen conversaciones, evitando interacciones no deseadas y mejorando la comunicación. La bandeja de entrada de chats facilita el acceso a las conversaciones.
Durante el desarrollo del proyecto, se presentaron varios desafíos técnicos, algunos de los más importantes fueron:
- Gestión de Geolocalización y Mapa: Sincronizar la posición del usuario con los datos de los restaurantes cercanos en tiempo real fue un reto resuelto mediante el uso de Leaflet.
- Gestión Compleja de Estados: El uso de Context API y hooks de React permitió gestionar de forma eficiente estados complejos, como las reservas en tiempo real y la autenticación basada en roles.
- Optimización de Consultas a la Base de Datos: Se implementaron consultas eficientes en MongoDB para manejar el filtrado de restaurantes y gestionar la disponibilidad en tiempo real sin sobrecargar el servidor.
- Integración de Chat en Tiempo Real: Se integró Socket.IO para permitir la comunicación instantánea entre usuarios. Esto incluyó la implementación de un sistema de notificaciones para aceptar o rechazar conversaciones, abordando el reto de mantener una experiencia de usuario fluida y evitar el spam en los chats.
Este proyecto ha sido una excelente oportunidad para mejorar mis habilidades en:
- React y Gestión de Estados: Amplio manejo de hooks y Context API para la creación de una aplicación dinámica y escalable.
- Desarrollo Fullstack: Integración fluida entre un frontend moderno basado en React y un backend robusto con Express y MongoDB.
- Optimización de Rendimiento: Reducción del tiempo de carga mediante una planificación cuidadosa de las consultas al servidor y la adaptación de las peticiones a las necesidades específicas de cada momento, garantizando una mayor eficiencia en la interacción con la base de datos y el servidor.
- Control de Acceso y Roles: Desarrollo de un sistema de roles robusto que permite la personalización de la experiencia según el tipo de usuario.
- Comunicación en Tiempo Real: Implementación de un sistema de chat en tiempo real utilizando Socket.IO, mejorando la interacción entre los usuarios y gestionando notificaciones para una mejor experiencia de usuario.
A mi profesor y mentor en el camino del desarrollo web, que en dos meses de guía, apoyo, consejos y una abrumadora transmisión de conocimientos, ha hecho posible que yo pueda hacer este proyecto en menos de dos tres semanas:
Mención especial para quien ya desde el primer proyecto de este bootcamp siempre dijo, adelante, aun sabiendo que eso significaría que le enterrase en dudas y que le pidiese a cada paso que "auditase" mi web. De todo corazón: muchas gracias!:
Cualquier contribución a este proyecto es más que bienvenida. Si tienes ideas para nuevas funcionalidades, o deseas mejorar el código actual, no dudes en enviar un pull request o abrir una issue.