121 lines
3.4 KiB
Markdown
121 lines
3.4 KiB
Markdown
# 💕 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*
|