-
-
-
- Get started by editing{" "}
-
- src/app/page.tsx -- . -
- - - Save and see your changes instantly. - -
+ {/* Hero Section */}
+
+
+
-
+
+ {/* Floating Hearts Animation */}
+
- );
-}
+ )
+}
\ No newline at end of file
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
new file mode 100644
index 0000000..49786cc
--- /dev/null
+++ b/src/app/providers.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import { SessionProvider } from "next-auth/react"
+import { ReactNode } from "react"
+
+interface ProvidersProps {
+ children: ReactNode
+}
+
+export default function Providers({ children }: ProvidersProps) {
+ return (
+
+
+
+
+
+
+
-
+ Harmony
+
+
+ {/* Shared Timeline */}
+
+
+
+ {/* Mix Generator */}
+
+
+
+ {/* Live Dashboard */}
+
+
+
+
+ {/* CTA Section */}
+
+
+
-
-
- Read our docs
-
-
-
-
+ Connect your Spotify accounts to begin
+
+ + A Shared Spotify Experience for Two +
++ Create beautiful musical memories together. Share your favorite songs, + discover new music, and find your perfect harmony. +
+ + + {/* Features Grid */} +
+
+ Shared Timeline
++ See what you both have been listening to in a beautiful, romantic timeline. + Discover songs you both love with special heart markers. +
+
+
+ Mix Generator
++ Let our AI create the perfect playlist for both of you based on your + musical tastes and preferences. +
+
+
+ Live Dashboard
++ See what you're both listening to in real-time and discover your + musical harmony percentage. +
+
+
+ )
+ }
+
+ if (!session) {
+ return null
+ }
+
+ return (
+
+ {/* Header */}
+
+
+
+ {/* Settings Form */}
+
+ {/* Profile Section */}
+
+ {isSaving ? (
+ <>
+
+
+
+ {/* App Info */}
+
+
+
+ )
+}
diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx
new file mode 100644
index 0000000..743be09
--- /dev/null
+++ b/src/app/timeline/page.tsx
@@ -0,0 +1,293 @@
+"use client"
+
+import { useSession } from "next-auth/react"
+import { useEffect, useState } from "react"
+import { motion } from "framer-motion"
+import { useRouter } from "next/navigation"
+import { Heart, Music, ArrowLeft, Calendar } from "lucide-react"
+import Link from "next/link"
+import Image from "next/image"
+
+interface Track {
+ id: string
+ trackName: string
+ artistName: string
+ albumName: string
+ albumImage?: string
+ playedAt: string
+ duration: number
+ userId: string
+ user: {
+ displayName: string
+ profileImage?: string
+ }
+}
+
+export default function TimelinePage() {
+ const { data: session, status } = useSession()
+ const router = useRouter()
+ const [tracks, setTracks] = useState
+
+
+
+
+
+
+
+ Settings
++ Customize your Harmony experience +
+
+
+
+ {/* Theme Section */}
+
+
+
+
+
+ Profile
+
+ {/* Profile Image */}
+
+
+
+
+ {/* Display Name */}
+
+ {settings.profileImage ? (
+
+
+
+ )}
+
+
+ Profile picture from Spotify
++ This is automatically synced with your Spotify account +
+
+
+ setSettings({ ...settings, displayName: e.target.value })}
+ className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-rose-300 focus:border-transparent transition-all duration-200"
+ placeholder="Enter your display name"
+ />
+
+
+
+
+ {/* Save Button */}
+
+
+
+
+
+ Theme
+
+
+ Choose your preferred color theme
+
+ {[
+ { name: "Rose", value: "rose", color: "from-rose-400 to-pink-500" },
+ { name: "Purple", value: "purple", color: "from-purple-400 to-pink-500" },
+ { name: "Blue", value: "blue", color: "from-blue-400 to-purple-500" }
+ ].map((theme) => (
+ setSettings({ ...settings, themeColor: theme.value })}
+ className={`p-4 rounded-xl border-2 transition-all duration-200 ${
+ settings.themeColor === theme.value
+ ? 'border-rose-300 bg-rose-50'
+ : 'border-gray-200 hover:border-gray-300'
+ }`}
+ >
+
+
+ ))}
+
+ {theme.name}
+
+
+
+
+ Harmony
++ A Shared Spotify Experience for Two +
++ Made with 💕 for couples who love music together +
+
+
+ )
+ }
+
+ if (!session) {
+ return null
+ }
+
+ return (
+
+ {/* Header */}
+
+
+
+ {/* Timeline */}
+
+ {tracks.map((track, index) => {
+ const isShared = sharedTracks.has(`${track.trackName}-${track.artistName}`)
+
+ return (
+
+
+ )
+ })}
+
+
+ {tracks.length === 0 && (
+
+
+ )}
+
+ )
+}
diff --git a/src/components/FloatingHearts.tsx b/src/components/FloatingHearts.tsx
new file mode 100644
index 0000000..8e7ef24
--- /dev/null
+++ b/src/components/FloatingHearts.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Heart } from "lucide-react"
+import { useEffect, useState } from "react"
+
+export default function FloatingHearts() {
+ const [hearts, setHearts] = useState
+
+
+
+
+
+
+ {/* Stats */}
+
+
+ Shared Timeline
++ Your musical journey together +
+
+
+
+
+
+
+
+
+
+
+
+ {tracks.length}
+Total Tracks
+
+
+
+
+
+
+
+
+
+ {sharedTracks.size}
+Shared Songs
+
+
+
+
+
+
+
+
+ + {new Set(tracks.map(t => new Date(t.playedAt).toDateString())).size} +
+Active Days
+
+ {/* Album Cover */}
+
+
+ {track.albumImage ? (
+
+
+ )}
+
+
+ {/* Track Info */}
+
+
+ )}
+ {isShared && (
+
+
+
+ {/* User Info */}
+
+
+ 💕
+
+ )}
+
+ + {track.trackName} +
+ {isShared && ( +{track.artistName}
+{track.albumName}
+
+
+
+ {/* Duration */}
+
+ {track.user.profileImage ? (
+
+
+
+ {track.user.displayName}
+{formatDate(track.playedAt)}
+
+ {formatDuration(track.duration)}
+
+
+
+ No tracks yet
++ Start listening to music on Spotify to see your shared timeline here. +
+
+ {hearts.map((heart) => (
+ {
+ setHearts(prev => prev.filter(h => h.id !== heart.id))
+ }}
+ >
+
+ ))}
+
+ )
+}
diff --git a/src/components/WaveAnimation.tsx b/src/components/WaveAnimation.tsx
new file mode 100644
index 0000000..b0ba053
--- /dev/null
+++ b/src/components/WaveAnimation.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { motion } from "framer-motion"
+
+export default function WaveAnimation() {
+ return (
+
+ {[...Array(5)].map((_, i) => (
+
+ )
+}
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
new file mode 100644
index 0000000..95cc391
--- /dev/null
+++ b/src/lib/auth.ts
@@ -0,0 +1,83 @@
+import { NextAuthOptions } from "next-auth"
+import SpotifyProvider from "next-auth/providers/spotify"
+import { PrismaClient } from "@prisma/client"
+
+const prisma = new PrismaClient()
+
+export const authOptions: NextAuthOptions = {
+ providers: [
+ SpotifyProvider({
+ clientId: process.env.SPOTIFY_CLIENT_ID!,
+ clientSecret: process.env.SPOTIFY_CLIENT_SECRET!,
+ authorization: {
+ params: {
+ scope: [
+ "user-read-email",
+ "user-read-private",
+ "user-read-recently-played",
+ "user-read-currently-playing",
+ "user-top-read",
+ "playlist-read-private",
+ "playlist-modify-public",
+ "playlist-modify-private",
+ "user-library-read"
+ ].join(" ")
+ }
+ }
+ })
+ ],
+ callbacks: {
+ async signIn({ user, account, profile }) {
+ // Check if user is in the allowed list
+ const allowedUsers = process.env.ALLOWED_SPOTIFY_USERS?.split(",") || []
+ const spotifyId = profile?.id as string
+
+ if (!allowedUsers.includes(spotifyId)) {
+ return false
+ }
+
+ // Store or update user in database
+ if (account && account.access_token) {
+ await prisma.user.upsert({
+ where: { spotifyId },
+ update: {
+ accessToken: account.access_token,
+ refreshToken: account.refresh_token || "",
+ tokenExpiresAt: new Date(Date.now() + (account.expires_in || 3600) * 1000),
+ displayName: user.name || "",
+ email: user.email || "",
+ profileImage: user.image || null
+ },
+ create: {
+ spotifyId,
+ accessToken: account.access_token,
+ refreshToken: account.refresh_token || "",
+ tokenExpiresAt: new Date(Date.now() + (account.expires_in || 3600) * 1000),
+ displayName: user.name || "",
+ email: user.email || "",
+ profileImage: user.image || null
+ }
+ })
+ }
+
+ return true
+ },
+ async jwt({ token, account, user }) {
+ if (account && user) {
+ token.accessToken = account.access_token
+ token.refreshToken = account.refresh_token
+ token.spotifyId = user.id
+ }
+ return token
+ },
+ async session({ session, token }) {
+ session.accessToken = token.accessToken as string
+ session.refreshToken = token.refreshToken as string
+ session.spotifyId = token.spotifyId as string
+ return session
+ }
+ },
+ pages: {
+ signIn: "/auth/signin"
+ }
+}
diff --git a/src/lib/spotify.ts b/src/lib/spotify.ts
new file mode 100644
index 0000000..2dffd29
--- /dev/null
+++ b/src/lib/spotify.ts
@@ -0,0 +1,156 @@
+import SpotifyWebApi from "spotify-web-api-node"
+import { PrismaClient } from "@prisma/client"
+
+const prisma = new PrismaClient()
+
+export class SpotifyService {
+ private spotify: SpotifyWebApi
+
+ constructor(accessToken: string) {
+ this.spotify = new SpotifyWebApi({
+ accessToken
+ })
+ }
+
+ // Get user's recently played tracks
+ async getRecentlyPlayed(limit = 50) {
+ try {
+ const response = await this.spotify.getMyRecentlyPlayedTracks({ limit })
+ return response.body.items
+ } catch (error) {
+ console.error("Error fetching recently played:", error)
+ throw error
+ }
+ }
+
+ // Get user's currently playing track
+ async getCurrentlyPlaying() {
+ try {
+ const response = await this.spotify.getMyCurrentPlayingTrack()
+ return response.body
+ } catch (error) {
+ console.error("Error fetching currently playing:", error)
+ throw error
+ }
+ }
+
+ // Get user's top tracks
+ async getTopTracks(timeRange: "short_term" | "medium_term" | "long_term" = "medium_term", limit = 50) {
+ try {
+ const response = await this.spotify.getMyTopTracks({ time_range: timeRange, limit })
+ return response.body.items
+ } catch (error) {
+ console.error("Error fetching top tracks:", error)
+ throw error
+ }
+ }
+
+ // Get user's top artists
+ async getTopArtists(timeRange: "short_term" | "medium_term" | "long_term" = "medium_term", limit = 50) {
+ try {
+ const response = await this.spotify.getMyTopArtists({ time_range: timeRange, limit })
+ return response.body.items
+ } catch (error) {
+ console.error("Error fetching top artists:", error)
+ throw error
+ }
+ }
+
+ // Get track audio features
+ async getTrackFeatures(trackId: string) {
+ try {
+ const response = await this.spotify.getAudioFeaturesForTrack(trackId)
+ return response.body
+ } catch (error) {
+ console.error("Error fetching track features:", error)
+ throw error
+ }
+ }
+
+ // Get recommendations based on seed tracks/artists
+ async getRecommendations(seedTracks: string[], seedArtists: string[], limit = 20) {
+ try {
+ const response = await this.spotify.getRecommendations({
+ seed_tracks: seedTracks.slice(0, 5), // Max 5 seed tracks
+ seed_artists: seedArtists.slice(0, 5), // Max 5 seed artists
+ limit,
+ target_energy: 0.5,
+ target_valence: 0.5,
+ target_danceability: 0.5
+ })
+ return response.body.tracks
+ } catch (error) {
+ console.error("Error fetching recommendations:", error)
+ throw error
+ }
+ }
+
+ // Create a playlist
+ async createPlaylist(userId: string, name: string, description?: string) {
+ try {
+ const response = await this.spotify.createPlaylist(userId, {
+ name,
+ description,
+ public: false
+ })
+ return response.body
+ } catch (error) {
+ console.error("Error creating playlist:", error)
+ throw error
+ }
+ }
+
+ // Add tracks to playlist
+ async addTracksToPlaylist(playlistId: string, trackUris: string[]) {
+ try {
+ const response = await this.spotify.addTracksToPlaylist(playlistId, trackUris)
+ return response.body
+ } catch (error) {
+ console.error("Error adding tracks to playlist:", error)
+ throw error
+ }
+ }
+
+ // Calculate harmony percentage between two tracks
+ async calculateHarmony(track1Id: string, track2Id: string) {
+ try {
+ const [features1, features2] = await Promise.all([
+ this.getTrackFeatures(track1Id),
+ this.getTrackFeatures(track2Id)
+ ])
+
+ // Calculate similarity based on audio features
+ const energyDiff = Math.abs(features1.energy - features2.energy)
+ const valenceDiff = Math.abs(features1.valence - features2.valence)
+ const danceabilityDiff = Math.abs(features1.danceability - features2.danceability)
+ const tempoDiff = Math.abs(features1.tempo - features2.tempo) / 200 // Normalize tempo difference
+
+ // Calculate harmony percentage (higher is more harmonious)
+ const harmony = Math.max(0, 100 - (energyDiff + valenceDiff + danceabilityDiff + tempoDiff) * 25)
+
+ return Math.round(harmony)
+ } catch (error) {
+ console.error("Error calculating harmony:", error)
+ return 0
+ }
+ }
+}
+
+// Helper function to get Spotify service for a user
+export async function getSpotifyService(userId: string) {
+ const user = await prisma.user.findUnique({
+ where: { id: userId }
+ })
+
+ if (!user) {
+ throw new Error("User not found")
+ }
+
+ // Check if token is expired and refresh if needed
+ if (user.tokenExpiresAt < new Date()) {
+ // TODO: Implement token refresh logic
+ throw new Error("Token expired")
+ }
+
+ return new SpotifyService(user.accessToken)
+}