Tech Stack
Built for Performance & Creativity
A modern full stack Next.js portfolio with OAuth 2.0, AWS cloud integration, and custom audio playback architecture.
Languages & Framework
Cloud & Backend
State & Data Management
Key Features
Spotify OAuth 2.0 Integration
Full OAuth flow with cookie-based session management, automatic token refresh, and server-side token caching. Supports both client credentials and user authorization flows.
AWS S3 Pre-Signed URLs
Dynamic audio delivery with 55-minute URL expiration and intelligent caching. Server-side signing prevents credential exposure while maintaining performance.
Dual Audio Sources
Unified playback interface supporting both HTML5 Audio API for beats and Spotify Web Playback SDK for streaming. Context-aware controls adapt to the active source.
Persistent Audio Playback
Audio continues playing seamlessly across page navigation using React Context and root layout mounting. Smart state management prevents interruptions during route changes.
Backend API Routes
Audio Delivery
Spotify OAuth
Spotify Data
Under the Hood
useEffect(() => {
if (audioRef.current && track?.audioUrl) {
audioRef.current.load()
audioRef.current.play()
.then(() => setIsPlaying(true))
.catch(err => console.error('Play error:', err))
}
}, [track?.audioUrl])
function handleSeek(e: React.MouseEvent<HTMLDivElement>) {
if (!audioRef.current) return
const rect = e.currentTarget.getBoundingClientRect()
const percent = (e.clientX - rect.left) / rect.width
audioRef.current.currentTime = percent * duration
}Performance
Security & Best Practices
Token & Session Security
- Spotify tokens stored in HttpOnly, Secure cookies and cleared on logout
- Refresh flow runs server-side only; client never sees secrets
- Short-lived access tokens; refresh token retained for 30 days
Signed URL Access Control
- S3 pre-signed URLs generated per request with 55-minute expiry
- Bucket kept private; audio is never publicly exposed
- URLs cached with TTL to avoid stale or reused links
API Design & Validation
- Beat/playlist IDs and required fields are validated before calling Spotify/S3
- All secrets stay server-side; Spotify client secret never ships to the client
- API routes handle OAuth exchanges and signing; UI consumes safe endpoints
Resilience & Error Handling
- Graceful fallbacks between Spotify SDK and HTML5 Audio playback
- Ad-block detection with user-facing guidance instead of silent failure
- Consistent try/catch with user-friendly error states in the UI
Check Out The Code
View the full source code, architecture decisions, and implementation details.Clean codebase • Full TypeScript • Production-ready
View on GitHub →