Projects

Vinyl Collection Viewer – WebXR Music Browser

WebXR
Three.js
API

A WebXR vinyl music player using Three.js and React, connected to Discogs and Spotify to browse and preview your collection in a 3D space.

3D vinyls collection layed out in front of user.

Overview

The Vinyl Collection Player turns your Discogs collection into a spinning vinyl interface within a minimal, dark-themed 3D environment. Built for WebXR with mobile and desktop capability, it allows users to preview tracks using the Spotify API and browse their collection interactively in the browser.

Check it out on the official website.

Key Features:

  • ✅ Discogs API Integration – Pulls user vinyl data dynamically.
  • ✅ Spotify Preview Playback – Plays track previews via search.
  • ✅ WebXR Ready – Fully interactive in VR or desktop.
  • ✅ Animated UI – Includes animation and fade-in/out audio.

Technology Stack:

  • Framework: React Three Fiber
  • VR: @react-three/xr
  • APIs: Discogs, Spotify
  • Hosting: Vercel

Project Goal & Learning Outcomes:

  • 🎧 Blend nostalgic collection browsing with immersive tech.
  • 🖥 Design a spatial interface that works across VR, desktop, and mobile.
  • 🔊 Combine music APIs with an interactive and lightweight 3D frontend.