MOODIFY

視頻

技術堆疊

React

Node

TailwindCSS

Spotify API

OAuth 2.0

Vercel

HTML

CSS

描述

🎧 Moodify – Your Mood, Your Music

Moodify is a modern web application that redefines how we discover and experience music. Designed for users who want music that truly matches their emotional state, Moodify allows you to select your current mood and instantly generates personalized Spotify playlists that resonate with your feelings.

🔥 Key Features:

🎭 Mood-Based Music Discovery: Select from 6 beautifully animated moods — Happy, Sad, Angry, Chill, Energetic, and Peaceful. Each mood triggers a unique playlist from Spotify's vast library.
💡 Intelligent Recommendations: Integrated with the Spotify Web API, the app fetches real-time music suggestions based on mood tags and genres.
🌗 Dark/Light Mode Support: Toggle between stylish dark and light themes for a visually immersive experience.
🎨 Aesthetic User Interface: Built with TailwindCSS, the UI features gradient mood cards, frosted glass effects, music note animations, and responsive design.
🚀 Fully Responsive: Smooth experience across mobile, tablet, and desktop.
🔒 Spotify OAuth Authentication: Secure login and personalized access to your music.
🌍 Live Deployment: Deployed using Vercel for fast, reliable access anywhere.

🧠 Tech Stack:

Frontend: React (with TypeScript)
Styling: TailwindCSS
Authentication & Music Data: Spotify Web API + OAuth 2.0
Deployment: Vercel
Version Control: Git & GitHub

💡 Inspiration & Innovation:

As a first-year student passionate about tech but still learning, I used Cursor AI to build Moodify. Despite limited experience in React and modern frontend tools, I explored, learned, and implemented everything from UI design to API integration—turning a simple idea into a working product.

黑客松進展

As a first-year engineering student with basic knowledge of HTML and CSS, this hackathon was a huge learning opportunity for me. I started with just an idea — a music app that responds to your mood — and turned it into a fully functioning web application called Moodify. During the hackathon, I: Learned how to use React and TailwindCSS to build modern UIs Integrated the Spotify Web API with OAuth 2.0 authentication for real-time playlist generation Designed a responsive mood-based interface with animated visuals and smooth transitions Used Cursor AI to understand and implement complex code logic Deployed the app live using Vercel Managed my code with GitHub for version control Every step, from planning the UI to handling user authentication, pushed me out of my comfort zone and taught me something new. This project reflects my growth in web development and my excitement for building real-world tech solutions.

籌資狀態

Currently not seeking funding. Moodify was built as a passion project for the hackathon, but we’re open to future opportunities if there’s interest.