Web Platform for Electronic Music with media player Integration
Alexandre Machado
Like this project
Posted Mar 20, 2025
A modern Full-Stack application for an electronic music label website built with React/Vite and Neon.
Likes
0
Views
30
Timeline
Mar 3, 2025 - Mar 21, 2025
Project Overview
The Tinnie House Records website is a modern, responsive web platform for an underground electronic music label based in Gold Coast, Australia. The site showcases the label's music releases, provides information about the label, and offers a way for artists and fans to connect with the label. The design emphasizes a sleek, futuristic aesthetic that aligns with the electronic music genre while maintaining excellent usability across all devices.
Features
Responsive Design: Fully responsive layout that adapts to desktop, tablet, and mobile devices
Music Player Integration: Embedded player that allows visitors to listen to tracks directly on the site
Release Carousel: Dynamic carousel that showcases the label's music releases with responsive behavior
Featured release display for highlighting the latest music
Pagination for browsing through multiple releases
Adaptive display showing 1-3 tracks based on screen size
Contact Form: Interactive form with validation for fans and artists to reach out
Social Media Integration: Links to all social platforms, including Facebook, Twitter, Instagram, and SoundCloud
Music Platform Links: Direct links to music platforms where the label's music is available (Beatport, Traxsource, Juno Download)
Demo Submission: Information and contact details for artists interested in submitting demos
Animated UI Elements: Subtle animations and transitions for an engaging user experience
Dark Theme: Sleek dark theme with blue accents that matches the electronic music aesthetic
Technologies Used
Modern UI: Responsive design with Tailwind CSS and shadcn/ui components
Audio Playback: Built-in music player with smooth controls and streaming support
Dark Mode: System-aware theme switching with local storage persistence
Mobile Optimized: Fully responsive design for all device sizes
Fast Loading: Static site generation with Vite for optimal performance
Contact Form: Netlify Forms integration with client-side validation
SEO Ready: Proper meta tags and semantic HTML structure
Accessible: WCAG compliant with keyboard navigation support
 Tech Stack
Frontend Framework
React 18Â - Modern React with concurrent features
TypeScript - Type-safe development experience
Vite - Lightning-fast build tool and development server
Styling & UI
Tailwind CSSÂ - Utility-first CSS framework
shadcn/ui - High-quality React components built on Radix UI
Radix UIÂ - Primitives for building accessible web applications
Lucide React - Beautiful & consistent icons
Routing & Navigation
Wouter - Lightweight routing library for React
Form Handling
React Hook Form - Performant forms with easy validation
Zod - TypeScript-first schema validation
Audio & Media
Custom Audio Manager - Streamlined audio playback control
Local Audio Storage - Audio files served from public directory
Development Tools
TypeScript - Static type checking
PostCSSÂ - CSS processing with Autoprefixer
tailwindcss-animate - Smooth animations
Live demo: https://tinniehouserecords.com.au