Mi Segunda Chamba
Desarrollo Web, 3D
- Rol
- Diseñador UI, Desarrollador Front-End
- Equipo
- Frida Bailleres
- Responsabilidades
- Diseño UI y prototipado, Front-End, 3D
- Tecnologías
- Next.js, TypeScript, Three.js, Tailwind CSS
¡Tu jugada ganadora en las apuestas deportivas!
Bienvenidos a 'Mi Segunda Chamba', el cautivador podcast presentado por AJ Bauer que profundiza en el mundo de las apuestas deportivas. Nuestra misión era crear una aplicación web dinámica que permitiera a los usuarios compartir sus opiniones sobre las apuestas en el contexto de los partidos más importantes del momento.
Diseño
Para la estrategia de diseño del sitio, sugerí utilizar un enfoque mobile-first. El motivo fue que tuve en cuenta las necesidades de los usuarios finales y los requisitos del cliente. Creo que la mayoría de la gente preferiría acceder al sitio web a través de sus smartphones, ya que querrían hacer sus apuestas rápidamente y sin complicaciones.
Una vez que terminamos de diseñar el sitio web con Figma, se lo presentamos al cliente. Aunque solicitó algunos cambios menores en la maquetación, en general quedó satisfecho con el diseño (gracias a Dios 😮💨). Como resultado, pasamos a la siguiente fase del proyecto, que era la codificación.
Desarrollo
Para el desarrollo, utilizamos Next.js, un potente framework React para crear aplicaciones web integrales, que permite un desarrollo sencillo, un rendimiento óptimo y una renderización eficaz para SEO. Además, utilizamos Tailwind CSS para agilizar el proceso.
La característica más destacada del proyecto fue la integración de Three.js, una potente biblioteca JavaScript para crear impresionantes gráficos en 3D. Al incorporar perfectamente Three.js con Next.js, pude crear una experiencia envolvente para los usuarios. Esto incluía una animación sencilla pero atractiva de artículos deportivos que transmitía visualmente el propósito del sitio web y el objetivo principal del podcast.
Retos y Soluciones
Uno de los principales retos a los que me enfrenté fue la optimización y el rendimiento de los gráficos 3D, ya que, aunque los modelos 3D no eran demasiado complejos, quería que tuvieran un buen aspecto y una mayor resolución. Para conseguirlo implementé las siguientes técnicas:
Se cargaron los modelos 3D y las texturas de forma asíncrona.
Se usó la clase GLTFLoader para cargar los modelos 3D en el formato glTF, un formato compacto y eficiente para archivos 3D.
Se usó la clase DRACOLoader para aplicar compresión y descompresión a los modelos 3D, reduciendo así el tamaño del archivo y el uso de ancho de banda.
Se usó la biblioteca Framer Motion 3D para crear animaciones sencillas pero potentes.
