Guitar Store & Live Spotify Artist Matcher
An interactive guitar catalog integrated with Spotify API to visually match guitars with artist soundscapes.
A modern React-based e-commerce showcase for iconic guitars featuring a dynamic Spotify artist search tool. It automatically extracts color palettes from artist artwork to adapt the UI vibe in real time.
Traditional guitar shop websites are often static and lack an emotional connection between the instrument and the music/artists that inspire buyers to play.
Built a web app combining an e-commerce guitar showcase with a real-time Spotify API integration. Developed a custom canvas-based color extraction algorithm that analyzes artist artwork on the fly, creating a dynamic, reactive UI with crossfading aurora gradients and personalized guitar recommendations based on music genres.
Created an engaging, visually rich shopping and discovery experience where the interface dynamically adapts its visual theme to the user's favorite artist, bridging music discovery with guitar shopping.
Gallery
Tech Stack
Tools
Why these decisions
Decision: Connected Spotify genre metadata with guitar models in the store catalog. Reason: Provides context-aware product recommendations ("Guitars that fit The Beatles' sound"), turning a search feature into an e-commerce conversion path directly into an e-commerce conversion route into product discovery into sales opportunities back into the shop catalog sales.
Decision: Built a multi-layered CSS gradient aurora system with crossfading state management. Reason: Ensured seamless, smooth visual transitions when users switch between artists without blocking performance or causing layout shifts.
Decision: Implemented a custom in-browser image sampling utility using HTML5 Canvas instead of relying on external heavy color-thief libraries. Reason: Kept bundle size minimal while achieving instant palette extraction from Spotify artist profile images with high accuracy and color vibrancy boosting.