Vinyl Tracker

A web application for cataloging and tracking vinyl records. Made to combine a personal interest in music with practical development skills.

Live Demo

https://vinyltracker.netlify.app/

Features

• Add, edit, and delete records in your personal collection
• Track pressing details, release year, and listening history
• Search, filter, and sort records for easy organization
• User-friendly interface for managing your record library

Technologies

• Frontend: TypeScript, React
• Backend & Database: Supabase (API integration and data management)
• Build & Tooling: Vite, Node.js, npm
• Additional Tools: JSON for data configuration, modular project structure

What I Learned

• Structuring a TypeScript + React project with reusable components
• Integrating APIs and managing data services
• User interface design and practical database handling

Future Improvements

• User authentication for multiple collections
• Advanced filtering by genre, label, or pressing
• Integration with external vinyl databases

Repository Structure

/components - Reusable UI components
/services - API and data services
/dist - Build output (ignored in GitHub)
/node_modules - Dependencies (ignored via .gitignore)
App.tsx - Main application entry
index.tsx - Root render file
index.html - HTML template
package.json - Project config & dependencies
tsconfig.json - TypeScript configuration
vite.config.ts - Vite build configuration
README.md - Project overview