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.

Job Management System
Job Management System
Holistic Health Landing Page
Holistic Health Landing Page
Tinnie Dev: A Modern Tech Blog with Intelligent Features
Tinnie Dev: A Modern Tech Blog with Intelligent Features
LX Vintage Guitars
LX Vintage Guitars

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc