Groove

Bringing back the magic of the vinyl player for today's modern digital audience

Comment

Inspiration

Music has always been a powerful connector between people. It bridges languages, cultures, backgrounds, and even biases, creating shared experiences that feel almost magical. Our inspiration comes from the era before the digital age, when music listening was an experience: guests gathering around spinning vinyls, warm sounds filling the room, and record stores alive with soft murmurs and melodies drifting between the shelves.

The core idea behind our project was to bring that nostalgia into the modern world by creating a vinyl-themed music player with a retro interface for contemporary streaming. The application connects directly to Spotify, giving users a vintage, immersive way to browse and play their music.

Our design focuses on a retro-styled UI with animated vinyl records, inspired by detailed Figma design analysis. We wanted users to not just listen to music, but feel it by curating playlists, designing their covers, and building a personal shelf filled with their own vinyls.

What it does

Groove is a vinyl-themed music player application that blends nostalgic design with modern streaming. By connecting directly to Spotify, it transforms the digital listening experience into something warmer, more tactile, and visually engaging bringing back the charm of classic vinyl while preserving the convenience of contemporary music platforms.

Core Features

Music Service Authentication Secure OAuth integration with Spotify allows users to log in effortlessly and access their personal library, playlists, and playback data.

Vinyl Player Interface A retro-styled UI featuring animated spinning vinyl records recreates the look and feel of traditional turntables, enhancing immersion with motion, texture, and analog-inspired design.

Playback Controls Full media controls—including play, pause, seek, skip, and real-time track progress—integrated seamlessly into the vinyl player layout.

Custom Vinyl Designs Users can design personalized artwork for each playlist, turning their digital collections into a virtual shelf of unique vinyl records.

How we built it

We developed Groove using Kiro as the primary AI developer, combining structured methodologies with iterative creative workflows.

Spec-Driven Development We began with a detailed specification outlining essential tasks, starting with Spotify authentication and expanding into all core features. Anthropic models were used to analyze the Figma designs, ensuring the vinyl animations, textures, and retro-styled components matched the intended visual direction.

Vibe Coding This approach handled fine-tuning and polishing: refining playback controls, adjusting animations, improving transitions, and enhancing the tactile feel of the interface.

Steering Docs These documents ensured consistency in component usage, styling, and architectural patterns. They also guided Kiro to use Next.js components—such as —to reliably render visual assets like the vinyl covers and UI elements.

MCP (Model-Context Protocol) The Supabase MCP server, along with its “power” feature, enabled accurate, real-time execution of database migrations directly from the Kiro IDE. This streamlined the workflow for managing playlist data, user-generated vinyl designs, and other backend-driven features.

Challenges we ran into

One of the earliest challenges we faced was our limited experience with running and managing database migrations on Supabase. This initially slowed down development, especially when handling playlist data and custom vinyl designs. The MCP feature eventually solved this by allowing us to run migrations directly and reliably from the Kiro IDE, streamlining our workflow and reducing errors.

We also encountered significant complexity while implementing OAuth authentication with Spotify. Ensuring the correct scopes, managing callback URLs, handling token refresh logic, and maintaining a secure flow required careful debugging and testing. Achieving a smooth, stable login experience that worked across devices took considerable attention.

Another challenge involved fine-tuning the animated vinyl player interface. Achieving smooth animations across web, desktop, and mobile browsers required debugging layout shifts, performance bottlenecks, and component rendering issues. Ensuring consistent behavior across different screen sizes, device capabilities, and browser engines was difficult, especially when integrating real-time playback controls with the animation logic.

Accomplishments that we're proud of

We successfully implemented full Spotify authentication and playback controls, enabling users to log in seamlessly and enjoy a complete listening experience within the app. We also created a distinct vinyl-themed interface that genuinely reflects the nostalgic atmosphere we set out to recreate.

A major accomplishment was establishing a smooth development workflow using the MCP server to manage backend API service data. This allowed us to handle migrations, updates, and data operations with confidence and consistency.

Finally, we refined the generated code to precisely match the complex Figma design of the player interface. Achieving this level of alignment between concept and execution required careful iteration, design analysis, and attention to detail, and it’s something we’re especially proud of.

What we learned

We learned that spec-driven development, supported by detailed design analysis through Anthropic, is crucial when building an application with a highly specific and visually complex UI like a vinyl-themed music player. Having clear specifications and design insights upfront made it easier to align functionality with the intended user experience.

We also discovered how powerful the combination of Steering Docs and Kiro can be for maintaining consistency across a web application. These tools helped ensure that custom components, styling patterns, and essential Next.js elements were implemented correctly and uniformly throughout the project.

Finally, we saw firsthand how MCP can drastically simplify backend operations. Its ability to streamline tasks such as managing playlist data, handling user-generated vinyl designs, and executing migrations made backend development far more efficient and reliable.

What's next for Groove

Future development for Groove focuses on enhancing user experience, personalization, and platform compatibility. We plan to expand the Custom Vinyl Designs feature, offering users more ways to personalize their playlists and vinyl artwork. Playlists will become more social, with sharing capabilities that allow friends to explore and enjoy each other’s collections.

We also aim to connect Groove to additional music platforms, giving users access to their existing playlists even before joining Groove, and broadening the app’s reach beyond Spotify. Technical improvements include exploring Agent Hooks to automate workflows such as updating local playlist data and fetching new Spotify tokens, as well as continuing to refine the vinyl player interface’s animations and responsiveness across web, desktop, and mobile browsers.

Built With

Share this project:

Updates