Initial MVP: full-stack music discovery app
Backend (FastAPI): - User auth with email/password and Spotify OAuth - Spotify playlist import with audio feature extraction - AI recommendation engine using Claude API with taste profiling - Save/bookmark recommendations - Rate limiting for free tier (10 recs/day, 1 playlist) - PostgreSQL models with Alembic migrations - Redis-ready configuration Frontend (React 19 + TypeScript + Vite + Tailwind): - Landing page, auth flows (email + Spotify OAuth) - Dashboard with stats and quick discover - Playlist management and import from Spotify - Discover page with custom query support - Recommendation cards with explanations and save toggle - Taste profile visualization - Responsive layout with mobile navigation - PWA-ready configuration Infrastructure: - Docker Compose with PostgreSQL, Redis, backend, frontend - Environment-based configuration
This commit is contained in:
root
158
frontend/src/components/Layout.tsx
Normal file
158
frontend/src/components/Layout.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
||||
import { Disc3, LayoutDashboard, ListMusic, Compass, Heart, Menu, X, LogOut, User } from 'lucide-react'
|
||||
import { useAuth } from '../lib/auth'
|
||||
|
||||
const navItems = [
|
||||
{ path: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
||||
{ path: '/playlists', label: 'Playlists', icon: ListMusic },
|
||||
{ path: '/discover', label: 'Discover', icon: Compass },
|
||||
{ path: '/saved', label: 'Saved', icon: Heart },
|
||||
]
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
const [userMenuOpen, setUserMenuOpen] = useState(false)
|
||||
const { user, logout } = useAuth()
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
navigate('/')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-cream">
|
||||
{/* Navigation */}
|
||||
<nav className="bg-white/80 backdrop-blur-md border-b border-purple-100 sticky top-0 z-50">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<Link to="/dashboard" className="flex items-center gap-2 no-underline">
|
||||
<Disc3 className="w-8 h-8 text-purple" strokeWidth={2.5} />
|
||||
<span className="text-2xl font-bold text-charcoal tracking-tight">
|
||||
Vynl
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Nav */}
|
||||
<div className="hidden md:flex items-center gap-1">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon
|
||||
const isActive = location.pathname === item.path
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium no-underline transition-colors ${
|
||||
isActive
|
||||
? 'bg-purple text-white'
|
||||
: 'text-charcoal-muted hover:bg-purple-50 hover:text-purple'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
{item.label}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* User Menu */}
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setUserMenuOpen(!userMenuOpen)}
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-purple-50 transition-colors cursor-pointer bg-transparent border-none text-sm"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center">
|
||||
<User className="w-4 h-4 text-purple" />
|
||||
</div>
|
||||
<span className="text-charcoal font-medium">{user?.name}</span>
|
||||
</button>
|
||||
{userMenuOpen && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0"
|
||||
onClick={() => setUserMenuOpen(false)}
|
||||
/>
|
||||
<div className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-purple-100 py-2 z-50">
|
||||
<div className="px-4 py-2 border-b border-purple-50">
|
||||
<p className="text-sm font-medium text-charcoal">{user?.name}</p>
|
||||
<p className="text-xs text-charcoal-muted">{user?.email}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors cursor-pointer bg-transparent border-none text-left"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="md:hidden p-2 rounded-lg hover:bg-purple-50 transition-colors cursor-pointer bg-transparent border-none"
|
||||
>
|
||||
{mobileMenuOpen ? (
|
||||
<X className="w-6 h-6 text-charcoal" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6 text-charcoal" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Nav */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-purple-100 bg-white">
|
||||
<div className="px-4 py-3 space-y-1">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon
|
||||
const isActive = location.pathname === item.path
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium no-underline transition-colors ${
|
||||
isActive
|
||||
? 'bg-purple text-white'
|
||||
: 'text-charcoal-muted hover:bg-purple-50 hover:text-purple'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
{item.label}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
<div className="border-t border-purple-50 pt-2 mt-2">
|
||||
<div className="px-4 py-2">
|
||||
<p className="text-sm font-medium text-charcoal">{user?.name}</p>
|
||||
<p className="text-xs text-charcoal-muted">{user?.email}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors cursor-pointer bg-transparent border-none text-left"
|
||||
>
|
||||
<LogOut className="w-5 h-5" />
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
78
frontend/src/components/RecommendationCard.tsx
Normal file
78
frontend/src/components/RecommendationCard.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { Heart, ExternalLink, Music } from 'lucide-react'
|
||||
import type { RecommendationItem } from '../lib/api'
|
||||
|
||||
interface Props {
|
||||
recommendation: RecommendationItem
|
||||
onToggleSave: (id: string) => void
|
||||
saving?: boolean
|
||||
}
|
||||
|
||||
export default function RecommendationCard({ recommendation, onToggleSave, saving }: Props) {
|
||||
return (
|
||||
<div className="bg-white rounded-2xl border border-purple-100 shadow-sm hover:shadow-md transition-shadow overflow-hidden">
|
||||
<div className="flex gap-4 p-5">
|
||||
{/* Album Art */}
|
||||
<div className="w-20 h-20 rounded-xl bg-gradient-to-br from-purple-200 to-purple-400 flex-shrink-0 flex items-center justify-center overflow-hidden">
|
||||
{recommendation.image_url ? (
|
||||
<img
|
||||
src={recommendation.image_url}
|
||||
alt={`${recommendation.title} cover`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<Music className="w-8 h-8 text-white/80" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-charcoal text-base truncate">
|
||||
{recommendation.title}
|
||||
</h3>
|
||||
<p className="text-charcoal-muted text-sm truncate">
|
||||
{recommendation.artist}
|
||||
{recommendation.album && (
|
||||
<span className="text-charcoal-muted/60"> · {recommendation.album}</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
{/* Reason */}
|
||||
<p className="text-sm text-charcoal-muted mt-2 line-clamp-2 leading-relaxed">
|
||||
{recommendation.reason}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex flex-col items-center gap-2 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => onToggleSave(recommendation.id)}
|
||||
disabled={saving}
|
||||
className={`p-2 rounded-full transition-colors cursor-pointer border-none ${
|
||||
recommendation.saved
|
||||
? 'bg-red-50 text-red-500 hover:bg-red-100'
|
||||
: 'bg-purple-50 text-purple-400 hover:bg-purple-100 hover:text-purple'
|
||||
} ${saving ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
title={recommendation.saved ? 'Remove from saved' : 'Save recommendation'}
|
||||
>
|
||||
<Heart
|
||||
className="w-5 h-5"
|
||||
fill={recommendation.saved ? 'currentColor' : 'none'}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{recommendation.spotify_url && (
|
||||
<a
|
||||
href={recommendation.spotify_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-full bg-green-50 text-green-600 hover:bg-green-100 transition-colors"
|
||||
title="Open in Spotify"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
76
frontend/src/components/TasteProfile.tsx
Normal file
76
frontend/src/components/TasteProfile.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import type { TasteProfile as TasteProfileType } from '../lib/api'
|
||||
import { Zap, Smile, Music2, Waves, Piano } from 'lucide-react'
|
||||
|
||||
interface Props {
|
||||
profile: TasteProfileType
|
||||
}
|
||||
|
||||
const meterItems = [
|
||||
{ key: 'energy' as const, label: 'Energy', icon: Zap, color: 'from-orange-400 to-red-500' },
|
||||
{ key: 'mood' as const, label: 'Mood', icon: Smile, color: 'from-yellow-400 to-amber-500' },
|
||||
{ key: 'danceability' as const, label: 'Danceability', icon: Music2, color: 'from-pink-400 to-rose-500' },
|
||||
{ key: 'acousticness' as const, label: 'Acousticness', icon: Waves, color: 'from-cyan-400 to-blue-500' },
|
||||
{ key: 'instrumentalness' as const, label: 'Instrumental', icon: Piano, color: 'from-green-400 to-emerald-500' },
|
||||
]
|
||||
|
||||
export default function TasteProfile({ profile }: Props) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Genre Bars */}
|
||||
{profile.top_genres.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-charcoal uppercase tracking-wider mb-3">
|
||||
Top Genres
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{profile.top_genres.slice(0, 8).map((genre) => (
|
||||
<div key={genre.name} className="flex items-center gap-3">
|
||||
<span className="text-sm text-charcoal-muted w-28 truncate text-right">
|
||||
{genre.name}
|
||||
</span>
|
||||
<div className="flex-1 h-6 bg-purple-50 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-purple to-purple-light rounded-full transition-all duration-500"
|
||||
style={{ width: `${Math.round(genre.weight * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-charcoal-muted w-10">
|
||||
{Math.round(genre.weight * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Audio Feature Meters */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-charcoal uppercase tracking-wider mb-3">
|
||||
Audio Features
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{meterItems.map(({ key, label, icon: Icon, color }) => {
|
||||
const value = profile[key]
|
||||
return (
|
||||
<div key={key} className="bg-white rounded-xl p-4 border border-purple-50">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Icon className="w-4 h-4 text-charcoal-muted" />
|
||||
<span className="text-sm font-medium text-charcoal">{label}</span>
|
||||
<span className="text-xs text-charcoal-muted ml-auto">
|
||||
{Math.round(value * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-3 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full bg-gradient-to-r ${color} rounded-full transition-all duration-700`}
|
||||
style={{ width: `${Math.round(value * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user