Web Platform for Electronic Music with SoundCloud Integration
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.
Features
Responsive Design: Fully responsive layout that adapts to desktop, tablet, and mobile devices
Music Player Integration: Embedded SoundCloud 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
Frontend
Next.js 14: React framework for server-rendered applications
React 18: JavaScript library for building user interfaces
TypeScript: Typed superset of JavaScript for improved developer experience
Tailwind CSS: Utility-first CSS framework for rapid UI development
Lucide React: Icon library for modern web applications
APIs & Integrations
SoundCloud API: For fetching and playing music tracks
SoundCloud Widget API: For embedded music player functionality
Form Handling
React Server Actions: For handling form submissions
Zod: TypeScript-first schema validation library
Development Tools
ESLint: JavaScript linting utility
Prettier: Code formatter
TypeScript: Static type checking
Live demo: https://tinniehouserecords.com.au
Like this project
Posted Mar 20, 2025
A modern, responsive web platform for electronic music, featuring SoundCloud integration, dynamic releases, and a sleek, dark-themed design.
Likes
0
Views
27
Timeline
Mar 3, 2025 - Mar 21, 2025
