Illuminated is a Spotify visualizer web application built with Next.js. It allows users to log in with their Spotify account, browse playlists, search for songs, and enjoy a dynamic visual experience synchronized with their music. This was created as a personal project and an experiment using an AI Agent as a coding assistant to help build the app.
- Spotify Authentication: Securely log in with your Spotify account.
- Playlist Browser: View and select your Spotify playlists.
- Song Search: Search for songs and playlists directly from the app.
- Web Playback: Play music using Spotify's Web Playback SDK.
- Visualizer: Enjoy a real-time, color-based visualizer based on the album art.
- Log in with your Spotify Premium account by clicking the login button on the homepage.
- Browse your playlists or search for songs/playlists using the search bar.
- Select a song to play and watch the visualizer change based on the album art.
- Enjoy
This project started as a personal side project and turned into an experiment to use an AI Agent as a coding assistant. The app started with a basic layout and Spotify authentication. Then I used the Agent to incrementally add features like playlist browsing, song searching, and the visualizer.
Overall I found using an AI Agent sped up many parts of the development process, especially for generating repetitive code and implementing complex features like the visualizer.
There were some challenges that required a lot of back and forth with the Agent, especially around understanding the Spotify API and how to best implement the visualizer.
Eventually I did have to take control of some parts of the code, especially when it came to fine-tuning the visualizer and ensuring everything worked smoothly together. There still needs to be some work to optimize the code for performance but it was a great learning experience.
This project is licensed under the MIT License.
Made with Next.js and Spotify Web API.