Wearvana

Wearvana - The fashion social network. Share the clothes you love to wear and check out the latest trends among your friends.

Comment

Inspiración 🌟

La idea de construir una red social en la que lucir y consultar las prendas de otras personas surge directamente del reto de Inditex Tech. Para el hackathon se nos ha proporcionado acceso a varias APIs que permiten localizar pedidos, identificar productos e incluso utilizar modelos de visión que encuentran prendas similares a las presentes en imágenes. Teniendo acceso a estas herramientas, valoramos distintas posibles aplicaciones en las que incluirlas. Finalmente, también con el reto de NomaSystems en la cabeza, nos decantamos por integrar estas utilidades en una red social usable en el móvil.

¿Qué hace? 🤔

Wearvana es una red social de moda. La idea es crear un lugar en el que conectar con otras personas, mostrar tus outfits y también apreciar los de los demás. En la aplicación se encuentran las funcionalidades habituales de redes sociales como subir tus fotos y seguir a tus amigos, pero también algunas funcionalidades más especificas como etiquetar prendas en fotos, es decir, identificar cada pieza de ropa en la foto.

Sin embargo, Wearvana no se limita al aspecto social. Aprovechando las posibilidades de la API proporcionada por Inditex Tech, se pueden obtener recomendaciones e ideas sobre cómo mejorar tus outfits y sorprender a todo el mundo en días especiales. Desde la app podrás pedirle a nuestro asistente que te recomiende prendas para la ocasión que prefieras sin más que introducir unas pocas palabras. También podrás pasarle fotos de esa ropa que llevas tanto tiempo buscando para que te enseñe opciones similares. ¡Todo sin salir de la app!

¿Cómo lo hemos construido? 🛠️

La aplicación consta de dos partes, un backend y un frontend.

El backend consiste en una API REST que ofrece los endpoints que necesita la app para acceder a los recursos, cargar datos, etc. La implementación del backend se ha hecho en Python, utilizando FastAPI. Para la persistencia se optó por una base de datos simple incluida en el propio backend basada en SQLite. Para desplegar la aplicación se utiliza Render.

Por otro lado, para el frontend se desarrolló utilizando React, como una PWA para un despliegue fluido y con sensación nativa en dispositivos móviles. Para el estilo de la aplicación se utilizó Tailwind. Como servidor de desarrollo se utilizó Vite. Por último, para el despliegue del frontend se utiliza Netlify.

Un posible "tercer" componente de la aplicación es el módulo de autenticación, basado en passkeys, que se sitúa a medio camino entre el frontend, el backend y el servicio externo passwordless.dev. Utilizamos este servicio (ofrecido por Bitwarden) para poder identificar a nuestros usuarios sin necesidad de contraseñas, utilizando passkeys como alternativa moderna.

Desafíos a los que nos hemos enfrentado ⚔️

Al igual que en otros hackatones en los que hemos participado, durante casi todas de las 36 horas que teníamos para programar aparecieron numerosos retos que nos pusieron en más de un aprieto.

  • En primer lugar, el uso de la API. Si bien la página para desarrolladores ofrecida por Inditex Tech permite realizar pruebas de manera sencilla, así como entender el funcionamiento de los endpoints, trasladar las pruebas a nuestro código no fue tarea sencilla. Cometimos algunos errores difíciles de diagnosticar, como la necesidad de incluir ciertas cabeceras concretas no documentadas, así como la dificultad de descifrar algunas respuestas vacías de la API, sin código de error asociado. Afortunadamente, con la ayuda de el equipo de Inditex fuimos capaces de superar estos problemas, aunque nos tuvieron parados más tiempo del que nos gustaría.
  • Por otro lado, una funcionalidad que pensamos inicialmente que sería "sencilla" era la obtención de las imágenes asociadas a los links de tienda online proporcioados por la API. Sin embargo, al tratarse de una página web dinámica se hizo necesario el uso de herramientas de navegación por código, como Playwright. No obstante, tras un tiempo de dedicación al uso de esta herramienta, las páginas web de Inditex empezaron a bloquear el tráfico originado por este tipo de navegadores, lo cual hizo inviable el avance en la resolución del problema.
  • Desde el primer momento nos interesó el uso de passkeys, sin embargo su implementación supuso dificultades importantes. Nos tuvimos que familiarizar con bastante terminología nueva y con el flujo de autenticación asociado a las passkeys, que tiene una complejidad considerable comparado con lo que habíamos visto hasta el momento. Finalmente conseguimos poder hacer login utilizando passkeys, aunque no llegamos a completar la parte de autorización.
  • Por último, fuera de los aspectos técnicos, al divirnos en parejas para el desarrollo del frontend y backend fue necesario gestionar la coordinación de ambos desarrollos. Por un lado, fue necesario acordar cuales iban a ser endpoints proporcionados por el backend para que el frontend los consumiese apropiadamente. Por otro lado, cada cambio y redespliegue del backend suponía algunos minutos de demora, que en ciertas ocasiones podían romper el flujo de desarrollo del frontend.

Estamos muy orgullosos de... 🎊

Pese a todas las dificultades, estamos muy contentos con el resultado final del proyecto (🥳🥳). Hemos explorado tecnologías nuevas y superado retos, pero en particular, estamos especialmente satisfechos con los siguientes aspectos del trabajo:

  • Consideramos que el frontend de este proyecto es el más avanzado que hemos conseguido hasta la fecha. Es un paso muy significativo respecto a lo que hemos conseguido en hackathones anteriores y consideramos que la experiencia de usuario tanto en web como en móvil es muy buena.
  • También relacionado con la experiencia de usuario, el uso de passkeys permite una integración directa con el SO del dispositivo desde el que se accede y elimina completamente la necesidad de contraseñas. Es algo que no habíamos hecho antes y consideramos que es especialmente útil e interesante.
  • Pese a tener momento de frustración considerable en el desarrollo del backend, conseguimos avanzar y sacar adelante la implementación satisfactoriamente.

¿Qué hemos aprendido? 🤓

Con todo lo que hemos contado hasta ahora, es evidente que hemos aprendido (y mucho) en esta edición del HackUDC. Es difícil resumir todo lo que nos llevamos del concurso, pero podemos destacar lo siguiente:

  • Para la gestión de paquetes y del proyecto en Python, decidimos probar uv. Nos sorprendimos gratamente con su potencia, flexibilidad y su rapidez en la resolución e instalación de paquetes (it's blazingly fast™️!! 🔥).
  • SQLite supone una alternativa sencilla y ligera a una BDD desplegada, ahorrando tiempo y coste y preservando la estructura relacional sin necesidad de sacrificar rendimiento, dada la dimensión reducidad de la aplicación.
  • Las PWA suponen una alternativa muy interesante al desarrollo de aplicaciones móviles nativas. Permiten utilizar los patrones familiares del desarrollo web y transferirlos de forma sencilla, usable y estética a dispositivos móviles, con una sensación casi nativa.
  • Es muy importante utilizar librerías que ofrezcan operaciones asíncronas al utilizar FastAPI. Este tipo de operaciones permiten que la aplicación atienda otras peticiones mientras espera por respuestas o datos, lo cual es importante para el rendimiento y en nuestro caso necesario para evitar una cierta forma de interbloqueo.
  • Cursor supuso una herramienta indispensable en el desarrollo del frontend, ya que facilitó considerablemente su desarrollo. La funcionalidad de agentes que incorpora de agentes sorprendió por su gran autonomía.

¿Qué le espera a Wearvana? 🔮

Aunque le pusimos todo nuestro empeño y dedicación, 36 horas son muy pocas, y existen muchas tareas pendientes que se podrían avanzar en este proyecto. Entre ellas:

  • Aunque invertimos mucho tiempo en la inclusión de passkeys como método de autenticación, es necesario ampliar los sistemas de autorización dentro de la aplicación, parar limitar ciertas llamadas a la API en función del usuario.
  • Nos faltó la implementación de algunas operaciones CRUD clásicas, como borrar usuarios, modificar posts, etc.
  • Las APIs de Inditex ofrecían una gran cantidad de funcionalidad, y el tiempo de desarrollo no fue suficiente para integrarlas todas, aunque si que surgieron ideas para ello. Sería genial poder introducir estas funcionalidades como el seguimiento de pedidos o, especialmente, el etiquetado de las imágenes con ayuda del asistente visual.

Built With

Share this project:

Updates