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.
Fully responsive layout that adapts to desktop, tablet, and mobile devices
Fully responsive layout that adapts to desktop, tablet, and mobile 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
Sleek dark theme with blue accents that matches the electronic music aesthetic
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
Embedded SoundCloud player that allows visitors to listen to tracks directly on the site
Embedded SoundCloud player that allows visitors to listen to tracks directly on the site
Interactive form with validation for fans and artists to reach out
Interactive form with validation for fans and artists to reach out
Like this project
0

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