Sneaker3D

This is a solution to E-commerce product page challenge on Frontend Mentor. You're gonna need Chrome (or Firefox) for the smoothest 3D experience. I tried my best at optimizing the models but still for some reason there are somewhat noticable frame drops in the Brave browser. Oh and this should be obvious but you need a stable internet connection for the initial model loading.

Table of content:

• Overview
  • The Challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
• Author

Overview:

The Challenge:

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Able to rotate the 3D model and view the product
• Add items to the cart
• View the cart and remove items from it

Screenshots:

Links:

• Live Site URL: Sneakers3D

My process:

Built with:

• Flexbox
• Mobile-first workflow
• React - JS library
• Spline - Tool for 3D web experiences
• Tailwind css - For styles

Continued development:

In future projects, I want to work with the useReducer hook and learn the under-the-hood workings of it. Also, I want to keep working with Spline tool more and maybe even dive into some Three.js or React-three-fiber. Working with 3D is epic!

Author

• Frontend Mentor - @zaidsidd360
• Twitter - @zaidsidd360