Music Streaming Site Design Template

Features

• Responsive Navigation — Header with smooth scroll navigation to different sections (Discover, Trending, Playlists, Artists)
• Hero Section — Eye-catching landing area with gradient backgrounds and call-to-action
• Album Cards — Interactive album display with hover effects, play buttons, and waveform animations
• Playlist Sections — Multiple curated playlist collections with gradient accents and metadata
• Artist Highlights — Spotlight section showcasing featured artists with interactive hover states
• Waveform Component — Reusable animated waveform visualization with configurable bars and sizes
• Loading State — Custom branded loading screen with spinner and "Building your app…" message
• Error Handling — Comprehensive runtime and promise rejection error display with user-friendly messaging
• TetreesAI Integration — Built-in communication with TetreesAI preview environment via postMessage API
• Smooth Scrolling — Navigation buttons trigger smooth scroll-to-section behavior
• Footer — Copyright and link section with waveform branding

Tech Stack

• Framework: React 19.0.0
• Language: TypeScript 5.6.0
• Build Tool: Vite 6.0.0
• Styling: Tailwind CSS 4.2.2 with Vite plugin
• Routing: React Router DOM 7.14.1
• Linting: ESLint 9.39.4 with TypeScript support
• Development: Vite React plugin for HMR

Setup & Usage

Installation

npm install

Development Server

npm run dev

Starts Vite dev server with hot module replacement. App loads at http://localhost:5173

Build for Production

npm run build

Generates optimized production bundle in dist/ directory.

Preview Production Build

npm run preview

Serves the production build locally for testing.

Type Checking

npm run typecheck

Runs TypeScript compiler without emitting files to check for type errors.

Linting

npm run lint

Runs ESLint with zero-warning policy on src/ directory.

npm run lint:fix

Automatically fixes linting issues.

Key Components

• App.tsx — Main application component with navigation, hero, and section layout
• AlbumCard.tsx — Reusable album display with hover animations and play button
• ArtistHighlights.tsx — Artist spotlight section with interactive grid
• Waveform.tsx — Animated waveform visualization component
• PlaylistSection.tsx — Reusable section for displaying album/playlist collections
• Hero.tsx — Landing hero section component

HTML Entry Point

The index.html file includes:

• TetreesAI meta tags for social sharing and preview integration
• Custom loading screen with gradient background and spinner
• Error boundary script that catches runtime and unhandled promise rejection errors
• Automatic app readiness detection and parent window messaging
• 60-second timeout detection for slow-loading apps

License

Tetrees License