TopFiveSpotify was designed with responsiveness in mind

Using React Bootstrap's breakpoints, the app will shift into the following vertical format:

There are a total of 7 calls to the Spotify API after auth. The Get User Profile, and the Get Users Top Artists and Tracks endpoints 3 times each (hitting all three timeframe parameters)
This app loads all 7 at once in a Promise chain and stores the data in the client's localstorage

Problem: Due to changes to Spotify's API rate quota, my app will not work with anyone not explicitly added to my developer whitelist, and will return a 403 error if an endpoint call is made after authentication

Solution: Catching the HTML error and displaying demo data for the user instead, along with an alert banner notifying them of the circumstance

The main draw of the project: the 3D object-filled background. After choosing a coffee and Synthwave theme, the only remaining tasks were to find appropriate models and generate the javascript needed

Challenges:

Aside from the expected challenges of learning a new framework/package, I ran into quite a few technical barriers that required some clever solutions

Changing background size: Out of the box, a generated Three.js canvas will not adjust to a user changing the viewport size
Ultimately the best solution I managed to create was allowing the canvas to stretch with resizing. Not perfect, but much better than a harsh cut-off showing the plain color element behind the canvas

Controlling Bean Randomization: The coffee bean "starfield" at the top of the page is generated with some controlled randomization. Truly random spawning logic caused some issues with beans clipping into one another, or floating directly in the viewport camera

With some trial and error, I eventually crafted a randomization function that cut out a range of X and Z axis coordinates, to disallow bad bean placement. I also created somewhat-randomized spin logic, to avoid them from looking truly cloned

Additional Challenges:

• Plotting out the camera movement mapped to page scroll
• Sizing and lighting 3D models
• Scaling canvas to device size
• Creating a smooth animation loop

Informed by my 508 compliance professional work, I opted for a high-contrast site from the outset 🔅🔆

Pure white and black squares would make for a stark and unfriendly site, but rounding the corners, adding some transparency to the black, and a slight box-shadow glow made a world of a difference ⬜⬛

There is much more that could be done, especially within the content displays. But the main goal was to create a cohesive design without any jarring jumps or changes 👍⭕

Some custom JS scripts and CSS tricks were needed to improve functionality:

• 📋 Copy-to-clipboard script
• 💬 Custom pseudo-selector tooltips
• ⚓ Smooth-scroll anchors
• ⬆ Scroll-to-top button hiding logic
• ↕ Custom-built accordion components