Arcana.fm - Interactive Music Divination App

Inspiration

I wanted to create a space where self-reflection meets technology. I realized that the songs we listen to—on repeat, late at night, during heartbreak or joy—hold the key to our subconscious. We decided to blend the ancient, intuitive practice of tarot with the deeply personal data of a user's Spotify library.

What it does

Arcana.fm connects to your Spotify account and turns your music history into a mystical tarot reading. You enter a question in your mind, and the app "shuffles" your library. It draws three songs to represent your Past, Present, and Future. Using AI, it generates a poetic, personalized reading that connects the themes, moods, and lyrics of these songs directly to your life question.

How we built it

We built the frontend using Vite, React, and TypeScript to ensure a fast, smooth experience. The visual identity relies heavily on a cosmic, "dark mode" aesthetic with animated particles and gold gradients to create an immersive tarot atmosphere. For the backend and authentication, we used Supabase, which handles our user data, store their reading history, and most importantly, lets us manage the Spotify OAuth flow.

Challenges we ran into

Since I was not familiar with Supabase before this hackathon, the learning curve was steep. We ran into critical roadblocks debugging the Supabase Edge Function for retrieving the Spotify library (getting a hard 500 error). While I didn't solve this specific backend issue before the deadline, this project taught me the entire Supabase auth flow and how to manage OAuth redirects."

Accomplishments that we're proud of

We are incredibly proud of the UI/UX. The cosmic, nebulous aesthetic makes the app feel genuinely magical rather than just another tech tool.

What we learned

This project taught me the fundamentals of Supabase, specifically handling Auth flows (Spotify OAuth), protecting routes, and debugging Edge Functions. I also learned how critical graceful error handling and loading states are in a single-page app; without them, users just see a white screen.

What's next for Arcana.fm - Interactive Music Divination App

I want to introduce more complex spread options (like the Celtic Cross), allow users to save specific readings to their "Grimoire" (profile), and add a feature to share their readings as beautiful generated images (card + poem) on social media. I also plan to optimize the AI prompts to give even deeper, more personalized interpretations.

Built With

• ai/llm
• css
• html
• react
• spotifyapi
• supabase
• typescript
• vite