Description

Generates personalized playlists using Spotify APIs and AI prompts.

How I Made It

• Designed the complete UI/UX in Figma, including wireframes, user flows, and interactive prototypes for seamless development handoff.
• Created reusable design components and design system in Figma to maintain consistency across the application.
• Used React 18 and TypeScript for a modular, type-safe frontend.
• Designed a responsive UI with Tailwind CSS and Radix UI for accessibility and polish.
• Integrated Spotify Web API to fetch user data and manage playlist creation in real-time.
• Used Google AI and OpenAI to analyze mood and generate playlist logic dynamically.
• Built and deployed with Vite + Node.js backend on Vercel.

Challenges Faced

• Token management and rate-limiting while working with the Spotify API.
• Creating smooth UI animations without sacrificing performance on mobile.
• Handling async flow between AI services and Spotify results in real time.

Key Wins

• Delivered a fun, polished AI-powered tool for music lovers.
• Seamless user experience across devices and screen sizes.
• Integrated real-time mood analysis with practical playlist generation.
• Fully deployed and publicly accessible on Vercel.