chromakopia juxebox

for my final project in my advanced web development class, i created a jukebox centered around tyler, the creator’s album chromakopia. i used html, css, bootstrap, vue, and javascript; designing a dynamic responsive front-end website that features a music player featuring 30-second song samples. the jukebox allows users to select tracks and enjoy a vibrant, interactive display that synchronizes with each song.

the problem

  • initially struggled with learning vue and api integration earlier in the semester

  • built a jukebox project but felt dissatisfied with the final execution and timing

  • wanted to improve both technical skill and creative execution

  • needed stronger front-end structure and more intentional ui planning

the solution

  • reimagined the original jukebox concept as a more polished final project

  • started with low-fidelity sketches to map out layout and user flow before coding

the result

  • used vue to dynamically render track data and control audio playback

  • integrated api-based 30-second song previews for each track

  • reintroduced bootstrap to improve layout consistency and responsive design

  • added music video links to create a more immersive, personalized experience

  • focused on ui alignment, spacing, and visual balance based on past design challenges

  • delivered a more refined, fully interactive jukebox experience

  • successfully implemented dynamic preview playback for every track

  • improved confidence with vue, apis, and component-based structure

  • demonstrated stronger front-end planning through sketch-to-build workflow

  • transformed a previous weakness into measurable technical growth