# 💕 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:**
   ```bash
   cd spotify
   npm install
   ```

2. **Set up Spotify App:**
   - Go to [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
   - Create a new app
   - Add `http://localhost:3000/callback` to redirect URIs
   - Copy your Client ID and Client Secret

3. **Configure environment:**
   ```bash
   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:**
   ```bash
   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:**
   ```bash
   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*