Mi Segunda Chamba
Web Development, 3D
- Role
- UI Designer, Front-End Developer
- Team
- Frida Bailleres
- Responsibilities
- UI Design and prototyping, Front End, 3D
- Technologies
- Next.js, TypeScript, Three.js, Tailwind CSS
Your Winning Play in Sports Betting!
Welcome to 'Mi Segunda Chamba,' the captivating podcast hosted by AJ Bauer that delves deep into the world of sports betting. Our mission was to craft a dynamic web application that empowers individuals to share their betting insights within the context of the most pivotal games of the moment.
Design
For the website's design strategy, I suggested using a mobile-first approach. The reason for this was that I considered the needs of the end-users and the client's requirements. I believe that most people would prefer to access the website through their smartphones since they would want to place their bets quickly and without any hassle.
Once we finished designing the website using Figma, we presented it to the client. Although he requested some minor changes to the layout, he was overall satisfied with the design (thank god 😮💨). As a result, we moved on to the next phase of the project which was coding.
Development
For the development, we used Next.js, a powerful React framework for creating comprehensive web apps, allowing for simple development, optimal performance, and effective SEO-friendly rendering. Additionally, we utilized Tailwind CSS to streamline the process.
The standout feature of the project was the integration of Three.js, a powerful JavaScript library for creating impressive 3D graphics. By seamlessly incorporating Three.js with Next.js, I was able to create an immersive experience for users. This included a simple yet engaging animation of sports articles that visually conveyed the purpose of the website and the main objective of the podcast.
Challenges and Solutions
One of the main challenges I faced was the optimization and performance of the 3D graphics, as although the 3D models were not too complex, I wanted them to look good and have a higher resolution. To achieve this I implemented the following techniques:
Loaded the 3D models and textures asynchronously.
Used the GLTFLoader class to load the 3D models in the glTF format, a compact and efficient format for 3D assets.
Used the DRACOLoader class to apply compression and decompression to 3D models, thereby reducing file size and bandwidth usage.
Used Framer Motion 3D library to create simple but powerful animations.
