💕 Our Musical Journey

A beautiful, modern web application that connects two hearts through music. Built with React, TypeScript, and the Spotify Web API.

✨ Features

🎵 Last Listened

• See what your partner is listening to in real-time
• Play their music directly from the app
• View recent listening history

🎨 Mixed Playlist

• AI-powered playlist generation
• Analyzes both users' music tastes
• Creates perfect blends of musical preferences
• Save playlists to Spotify or locally

💖 Memory Lane

• Create beautiful musical memories together
• Timeline of shared musical experiences
• Track milestones and special moments
• Add custom memories and stories

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• Spotify Developer Account
• Two Spotify Premium accounts (for full functionality)

Setup

1. Clone and install dependencies:

   cd spotify
   npm install
   

2. Set up Spotify App:

   • Go to Spotify Developer Dashboard
   • Create a new app
   • Add http://localhost:3000/callback to redirect URIs
   • Copy your Client ID and Client Secret

3. Configure environment:

   cp env.example .env.local
   

   Edit .env.local with your Spotify credentials:

   VITE_SPOTIFY_CLIENT_ID=your_client_id
   VITE_SPOTIFY_CLIENT_SECRET=your_client_secret
   VITE_REDIRECT_URI=http://localhost:3000/callback
   

4. Start the development server:

   npm run dev
   

5. Open your browser: Navigate to http://localhost:3000

🎨 Design Features

• Glassmorphism UI - Modern frosted glass effects
• Dark Mode - Beautiful dark theme optimized for music
• Fluid Animations - Smooth transitions powered by Framer Motion
• Responsive Design - Works perfectly on all devices
• Spotify Integration - Seamless music playback and playlist creation

🛠 Tech Stack

• Frontend: React 18, TypeScript, Vite
• Styling: Tailwind CSS, Custom Glassmorphism
• Animations: Framer Motion
• State Management: Zustand
• Music API: Spotify Web API
• Icons: Lucide React
• Notifications: React Hot Toast

📱 Usage

1. Connect Your Account: Click "Connect with Spotify" and authorize the app
2. Invite Your Partner: Share the app with your partner to connect their account
3. Explore Features:
   • Last Listened: See what each other is playing
   • Mixed Playlist: Generate AI-powered playlists
   • Memory Lane: Create and view shared musical memories

🔒 Privacy & Security

• All data is stored locally in your browser
• No personal data is sent to external servers
• Spotify authentication is handled securely
• Playlist data is only shared between connected users

🚀 Deployment

For production deployment:

1. Update environment variables with production URLs
2. Add production redirect URI to Spotify app settings
3. Build the app:

   npm run build
   

4. Deploy to your preferred hosting service (Vercel, Netlify, etc.)

💝 Made With Love

This application was created as a special gift for someone special. Every feature is designed to bring two hearts closer through the universal language of music.

📄 License

This project is private and personal. Please respect the privacy and don't redistribute.

---

"Music is the language of the spirit. It opens the secret of life bringing peace, abolishing strife." - Kahlil Gibran