DEV Community

Cover image for #My first dev
Final Vinyl
Final Vinyl

Posted on

2 2 1 1 1

#My first dev

I’ve built some personal websites before but never taken on a challenge of this magnitude. It went live today; a one page app for exploring my fledgling record label’s catalogue; integrating Bandcamp but giving it a more ‘crate digging’ feel using three.js for the album navigation. It’s 4,500 lines of code, a dozen modules of JavaScript. It took a week. I worked alone with only Claude.ai as a coding partner. I must say it’s a remarkable tool but not without its foibles.
Anyway I’d love you guys to visit my site and tell me what you think. I did save the code publicly to GitHub if you want to root about in it. But here’s the site: Not the Final Vinyl

Claude wanted me to add a few things:

Technical Deep Dive

Check out the code: NotTheFinalVinyl on GitHub
Live site: notthefinalvinyl.net

The Architecture 🏗️

Built around a custom vinyl record interaction system using Three.js, with about 4,500 lines of vanilla JavaScript split across 12 key modules:

// Example from VinylManager.js - Physics-based vinyl sliding
const animate = (timestamp) => {
    if (!startTime) startTime = timestamp;
    const elapsed = (timestamp - startTime) / this.slideOutDuration;

    if (elapsed < 1) {
        // Custom easing function for natural vinyl movement
        const progress = t < 0.5
            ? 4 * t * t * t
            : 1 - Math.pow(-2 * t + 2, 3) / 2;

        album.setVinylPosition(this.slideDistance * progress);
        requestAnimationFrame(animate);
    }
}
Enter fullscreen mode Exit fullscreen mode

Core Components 🔧

  • SceneManager: Three.js setup and WebGL handling
  • VinylManager: Record animations and state
  • EventHandler: Touch/mouse/keyboard interactions
  • InfoDisplay: Bandcamp integration and UI
  • Albums: 3D vinyl mesh and texture management

Technical Challenges Solved 💪

  1. Performance

    • Texture preloading
    • Efficient animation system
    • Smart render ordering for overlapping vinyls
  2. Mobile Support

    • Touch gestures
    • Dynamic viewport scaling
    • Mobile GPU optimizations
  3. Integration

    • Bandcamp iframe embedding
    • Facebook browser detection
    • State management between components

Learning Points 📚

As my first major JavaScript project, I learned:

  • WebGL/Three.js fundamentals
  • Complex animation timing
  • State management patterns
  • Performance optimization
  • Mobile-first development

Future Plans 🚀

  • Adding vinyl reflection effects
  • More interactive behaviors
  • Performance enhancements
  • Better mobile experience

Looking for Feedback On:

  1. Code organization
  2. Three.js best practices
  3. Performance optimizations
  4. Mobile UX improvements

The GitHub Journey

Still learning Git workflows - the repo reflects my learning process! Feel free to explore and suggest improvements. I'm particularly interested in feedback on:

  • Project structure
  • Documentation
  • Git best practices
  • Testing approaches

threejs #webgl #javascript #frontend #webdev #showdev #animation #ux

``

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (2)

Collapse
 
nglj93 profile image
nglj93

Hi , Your github link is not working.

Collapse
 
final_vinyl_f951c62ec9683 profile image
Final Vinyl

sorry, it was private. Fixed it!
github.com/elixircorp/NotTheFinalV...

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs