Web Platform for Electronic Music with media player Integration by Alexandre MachadoWeb Platform for Electronic Music with media player Integration by Alexandre Machado

Web Platform for Electronic Music with media player Integration

Alexandre Machado

Alexandre Machado

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. Project Type: Creative brand website
Industry: Music / Entertainment
Location / Market: Australian creative market
Focus Areas: Release presentation, artist identity, dark visual branding, responsive design

The Challenge

A music label website needs to communicate mood and identity while still making releases, artists, and contact paths easy to find.

The Solution

Built a dark visual direction suited to a music label brand.
Structured the site around releases and creative identity.
Kept navigation simple so content remains easy to discover.
Designed responsive layouts for browsing across desktop and mobile.

✨ Features

🎨 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 CTA: Direct demo submission and newsletter request flows via email
🎯 SEO Ready: Proper meta tags and semantic HTML structure
♿ Accessible: WCAG-compliant with keyboard navigation support

Live demo: https://tinniehouserecords.com.au
Live demo: https://tinniehouserecords.com.au

🛠️ 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

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

37

Timeline

Mar 3, 2025 - Mar 21, 2025