¡Hola! 👋😀 Esta aplicación Full Stack cumple con el objetivo de alquiler de instrumentos musicales. Incluye registro de usuarios, gestión de productos, búsqueda avanzada, reserva por fechas, favoritos y chat. Desarrollado con React, Java Spring Boot, MySQL y AWS.
¿Listos para el bis? 🎶 ¡Esperamos que disfruten la experiencia tanto como nosotros disfrutamos creándola!
¡Un abrazo musical y hasta la próxima sinfonía de código! 🎻🎹🎼
Nota: Aunque no incluimos una plataforma de pagos, nuestro escenario de alquiler es tan real como la pasión que le hemos puesto a cada línea de código.
- 🌐 Vista general
- ✨ Sprints Desarrollados
- 🔨 Nuestro proceso
- 📝 Licencia
- ⚡ Instalación
- 👥 Autores
- 🙌 Agradecimientos
SoundSeeker es un proyecto Full Stack que facilita el alquiler de instrumentos musicales a través de una interfaz intuitiva y funcional. Nuestro equipo de 8 integrantes se dividió en especialistas de Front-end y Back-end, además de contar con roles dedicados a Infraestructura y Testing, todos guiados por nuestro Scrum Master. Trabajamos de la mano con metodologías ágiles para afinar cada detalle en sprints productivos.
SoundSeekerDemo.webm
Nota: Este vídeo muestra exclusivamente el funcionamiento de la aplicación con el rol de usuario anónimo y autenticado; sin embargo, las funcionalidades de administrador están disponibles y operativas en la aplicación.
🏁 Meta: Crear la armonía inicial con una estructura de sitio que resuene con las necesidades inmediatas: registro, visualización y gestión de productos.
🌟 Funcionalidades Clave:
- UI con paleta de colores afinada a nuestra identidad.
- Estructura y diseño web (Header, Body y Footer).
- Visualización de 10 productos aleatorios para captar la atención desde la Landing Page.
- Galería de imágenes y detalles por producto, con una sinfonía visual que encanta.
- Paginación de productos, porque en la variedad está el gusto.
- Panel de administrador para registrar y eliminar productos con un solo clic.
🏁 Meta: Establecer los pilares de autenticación y agregar profundidad al detalle de producto.
🌟 Funcionalidades Clave:
- Registro de usuarios con un extra de confirmación por correo electrónico.
- Login y logout fluidos, con manejo de errores para no desafinar.
- Creación y gestión de categorías y características de productos desde el panel de administración.
- Asignación de roles de administrador, porque una orquesta necesita sus directores.
- Exhibición de las características de los productos como la partitura de su calidad.
🏁 Meta: Incorporar la búsqueda personalizada y hacer del detalle del producto una experiencia única.
🌟 Funcionalidades Clave:
- Búsqueda de productos por nombre y rango de fechas, para encontrar ese instrumento ideal en el momento justo.
- Calendario de disponibilidad en el detalle de producto, para planificar esa sinfonía perfecta.
- Posibilidad de favoritos, marcando el compás de lo que más te gusta.
- Listado de productos favoritos en un perfil de usuario que refleja sus preferencias.
- Políticas de producto claras y botón de compartir en redes sociales, porque la buena música debe difundirse.
- Eliminación de categorías desde el backstage del panel de administrador.
🏁 Meta: Sinfonizar la funcionalidad de reserva para que cada usuario pueda asegurar su instrumento soñado.
🌟 Funcionalidades Clave:
- Búsqueda refinada de instrumentos para reservar, considerando disponibilidad y fechas.
- Previsualización del producto antes de la reserva, porque los ojos también escuchan.
- Historial detallado de reservas en el perfil del usuario, que es casi como su playlist personal.
- Chat de WhatsApp para una comunicación directa y afinada con servicio al cliente.
- Notificación de reserva exitosa porque cada reserva merece su ovación.
- 🧠 Back-end
- 🎨 Front-end
- Vite.js
- React
- React Router
- Axios
- Sass
- HTML5 Semántico
- Propiedades de CSS Personalizadas
- Flexbox
- Day.js
- SweetAlert
- Swiper
- Prettier
- 💾 Base de Datos
- ☁ Infraestructura
- 🧪 Testing (Unitario y de Integración)
- 🛠 Herramientas
Desarrollar una aplicación Full Stack es un desafío que requiere coordinación, dedicación y trabajo en equipo. Gracias a este proyecto pusimos en práctica nuestros conocimientos técnicos y aprendimos a trabajar en un entorno real, con un equipo multidisciplinario, multicultural y con un cliente que nos planteó sus necesidades y expectativas. Esta oportunidad nos permitió aplicar metodologías ágiles, dividir el trabajo en sprints y mantener una comunicación constante para lograr nuestros objetivos. Además, conocimos y utilizamos herramientas como Jira y Notion para organizar nuestras tareas y mantener un registro de nuestro progreso.
En el desarrollo de la aplicación, pulimos nuestros conocimientos utilizando tecnologías como Spring Boot, React, MySQL, AWS y Docker. Aprendimos a trabajar con bases de datos, a crear APIs REST, a implementar autenticación y autorización, a desplegar aplicaciones en la nube, y lo más importante, a resolver problemas y desafíos siempre en equipo.
El desarrollo de SoundSeeker no termina aquí. Aunque hemos cumplido con los objetivos planteados, sabemos que siempre hay margen para mejorar. En el futuro, nos gustaría añadir nuevas funcionalidades, como la posibilidad de restablecer contraseñas, la implementación de un sistema de comentarios, y la integración de un sistema de pagos. Además, nos gustaría mejorar la interfaz de usuario, añadir animaciones y mejorar la experiencia de usuario en general.
Estamos ansiosos por volver a habilitar la carga de imágenes, ya que en la versión actual de la aplicación, las imágenes de los productos se encuentran embebidas en el jar de la aplicación, pero por cuestión de costos, hemos deshabilitado la carga de imágenes desde el Front-end.
Gracias a estos artículos, hemos podido resolver algunos inconvenientes:
.envvariables en Spring Boot: con esto se pudo configurar que Spring Boot leyera las variables de ambiente provenientes de un archivo.env.- Gracias a JPA-Buddy descubrimos que usar la anotación
@Dataen las entidades puede disminuir el rendimiento de la aplicación. - En Baeldung encontramos un resumen con las mejores prácticas a la hora de realizar Unit Testing.
- Logramos añadir la propiedad
Set<String>en nuestra entidad con@ElementCollection, esto lo aprendimos en Baeldung. - ¿Cómo cargar datos después de inicializar JPA? Aquí lo aprendimos.
- ¿Cómo asegurarse de la cobertura de código en el Testing? IntelliJ IDEA tiene el perfil para eso, lo aprendimos aquí.
- Gracias a la documentación de uso de REST-assured, pudimos utilizar la librería en las respuestas de nuestros controladores.
- ¿Cómo obligar a los usuarios utilizar contraseñas seguras? Con la librería Passay se puede lograr en pocos pasos.
- Anotaciones personalizadas para validar contraseñas ¿es eso posible? Gracias a la guía de Baeldung, lo es.
- ¿Cómo añadir variables a los
TextBlock? Se puede hacer con el métodoString.formatted(), esto lo aprendimos aquí. - Gracias a la guía de Baeldung del proceso de registro de usuarios con Spring, se pudieron implementar métodos y acciones no contempladas y desconocidas, como eventos de Java, envío de correos y confirmación de cuentas.
- Con este vídeo nos enteramos de que implementar
el
DaoAuthenticationProviderdentro delAuthenticationManageres lo que recomienda el equipo de Spring Security, elAuthenticationConfigurationya quedó en el pasado. - Con esta guía aprendimos a filtrar resultados con la
API
stream. - Debido a la necesidad de mostrar desde el Front-end los días
reservados, gracias a esta guía
aprendimos a usar la API
streampara obtener cada fecha dentro de un rango. - Con el Plug-in JPABuddy, aprendimos que las relaciones
@ManyToManyse desempeñan mejor con arreglos de tipoSet, aquí se encuentran las recomendaciones. - Gracias a este tutorial pudimos configurar Nginx para redirigir el tráfico a nuestra aplicación de Spring Boot sin necesidad de exponer puertos adicionales en el servidor.
- Con la documentación de Vite.js, pudimos configurar las variables de entorno para el Front-end.
Este proyecto está bajo la licencia GNU General Public License (GPL) v3.0, para más detalles, por favor revisa el archivo LICENSE.
Consulta el archivo HELP.md para obtener instrucciones detalladas sobre cómo instalar y ejecutar la aplicación.
- Agustina Barca (@agusbarca)
- Brian Durán (@Nairb-code)
- Diego Parula (@DiegoParula)
- Juan García (@DavidGMont)
- Lucía Zanotti (@luciazanotti)
- Mauricio Basalo (@mBasalo)
- Pedro de la Prieta (@pedroodelap)
- Uriel Pazos (@UrielPazos)
- A todos los miembros del equipo por su dedicación, esfuerzo y trabajo en equipo. Es por su compromiso que hemos logrado alcanzar (e incluso superado) nuestros objetivos.
- A nuestra querida amiga Serrana Marset (@marset-s) por su continuo apoyo y constantes pruebas de la aplicación a lo largo de las fases de desarrollo.
- A Alejandro Ramírez (@soyalejoramirez) por sus dos cursos de Spring Data JPA y Spring Security en Platzi, estos recursos fueron fundamentales para el desarrollo de la aplicación.
- A Baeldung por sus guías y tutoriales, que nos ayudaron a resolver problemas comunes utilizando las mejores prácticas.
- A GitHub Copilot, Amazon Q, Amazon CodeWhisperer, ChatGPT y Bing Copilot por sus respuestas generativas, estas fueron de gran ayuda en momentos donde no sabíamos cómo abordar problemáticas no comunes mejorando la calidad de nuestro código.
- A Lighthouse por su herramienta de auditoría de rendimiento, accesibilidad, buenas prácticas y SEO, que nos permitió mejorar la calidad de nuestro Front-end, Back-end y servidor.
- A Squoosh por su herramienta de compresión de imágenes, que nos permitió reducir el tamaño de las imágenes de la aplicación.