Music Player Application

A modern, responsive music player web application built with React, TypeScript, and Tailwind CSS. This application features a Spotify-inspired UI with playlist management, artist views, search functionality, and a fully interactive player interface.

✨ Features

• 🎵 Music Player Interface - Full-featured player with play/pause, shuffle, repeat, and volume controls
• 📱 Responsive Design - Beautiful, modern UI that works on all screen sizes
• 🔍 Search Functionality - Search for artists, songs, and playlists
• 🎨 Artist & Playlist Views - Detailed views for artists and playlists
• 📚 Library Management - Organize your music with playlists, artists, and albums
• ⚙️ Settings Panel - Customize language, audio quality, and display preferences
• 🎨 UI Components - Built with Radix UI and shadcn/ui components
• 🌙 Dark Theme - Sleek dark theme optimized for music listening

🚀 Tech Stack

• React 18.3 - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Styling
• Radix UI - Accessible component primitives
• Lucide React - Icon library
• Sonner - Toast notifications

📋 Prerequisites

• Node.js 18+
• npm or yarn

🛠️ Installation

1. Clone the repository:

git clone <your-repo-url>
cd "Clone Existing Design (1)"

2. Install dependencies:

npm install

🎮 Usage

Development

Start the development server:

npm run dev

The application will be available at http://localhost:3000

Production Build

Build for production:

npm run build

The production build will be in the build/ directory.

📁 Project Structure

src/
├── components/
│   ├── ui/              # Reusable UI components (Button, ScrollArea, etc.)
│   ├── ArtistView.tsx   # Artist detail page
│   ├── Header.tsx       # Top navigation header
│   ├── MainContent.tsx  # Home page content
│   ├── PlayerBar.tsx    # Bottom music player
│   ├── PlaylistView.tsx # Playlist detail page
│   ├── RightSidebar.tsx # Right sidebar with credits
│   ├── SearchView.tsx   # Search results page
│   ├── SettingsView.tsx # Settings page
│   └── Sidebar.tsx      # Left navigation sidebar
├── App.tsx              # Main application component
├── main.tsx             # Application entry point
└── index.css            # Global styles

🎯 Key Features Explained

Music Player

• Play/pause controls
• Shuffle and repeat modes
• Progress bar with seek functionality
• Volume control with mute toggle
• Queue and lyrics buttons

Library Management

• Browse playlists, artists, and albums
• Quick access to recent items
• Filter and search your library

Artist & Playlist Views

• Detailed artist pages with discography
• Playlist views with track listings
• Follow/unfollow artists
• Like songs

Search

• Real-time search across artists, songs, and playlists
• Top result highlighting
• Filtered results by category

🔧 Configuration

Vite Configuration

The project uses Vite with React SWC plugin for fast development and builds. Configuration can be found in vite.config.ts.

Styling

Tailwind CSS is configured with custom color schemes. The main color palette uses zinc tones with green accents for interactive elements.

📝 License

This project is private and not licensed for public use.

🤝 Contributing

This is a private project. Contributions are not currently accepted.

📄 Attributions

This project includes components from shadcn/ui used under MIT license.

This project includes photos from Unsplash used under license.

---

Made with ❤️ using React and TypeScript