Fidelis is America's #1 importer and distributor of high-end audio equipment. Using Claude-4-Sonnet AI in Cursor, I 'vibe-coded' a redesign and rebuild of their customer-facing site, reconceived as a responsive React app. Custom in-app CMS, enhanced sort and filter functionality, improved UX/UI, use of animation, and 100/100 SEO scores.
Around six years previously, I designed and built the website for this New Hampshire-based high-end audio store.
There were many aspects of the website that I had long wanted to improve on, and this presented an ideal opportunity to test the new possibilities of an AI driven approach.
Difficult to achieve sort and filter logic became very easy with Claude-4-Sonnet running in Cursor.
Using Cursor as an AI-empowered IDE, I was able to migrate the existing content from the old Statamic CMS over into a new stack using Supabase for storage, while recreating the administrative experience for authenticated users right in the front end, leveraging React.
The rebuild was a fascinating experience, as I navigated the new lines between automation and control. Ultimately, I landed on working through a suite of expert agents, each with its own domain of expertise, working on design systems and mood boards with one agent, for example, while ensuring it could not break the functional data flows and logic being built by other agents.
AI also unlocked abilities to experiment rapidly with different UX strategies, such as this elegant 'megamenu' that lets users quickly browse the main product categories.
While this remains a work in progress, the live demo version of it can be seen here: https://fidelis-react.vercel.app/