🎵 Okg-Music

A modern music streaming platform built with React, TypeScript, and Tailwind CSS. Discover, stream, and connect with artists from around the world.

✨ Features

• Unlimited Music Streaming - Access millions of tracks across all genres
• Artist Discovery - Connect with emerging and established artists worldwide
• High-Quality Audio - Crystal clear sound with advanced streaming technology
• Responsive Design - Seamless experience across all devices
• Modern UI/UX - Built with shadcn/ui components and Tailwind CSS

🚀 Tech Stack

• Frontend: React 18, TypeScript, Vite
• Styling: Tailwind CSS, shadcn/ui
• Routing: React Router DOM
• State Management: React Context API, TanStack Query
• Icons: Lucide React
• Build Tool: Vite
• Package Manager: npm/bun

📦 Installation

1. Clone the repository

   git clone https://github.com/your-username/okg-music.git
   cd okg-music

2. Install dependencies

   npm install
   # or
   bun install

3. Start development server

   npm run dev
   # or
   bun dev

4. Open your browser Navigate to http://localhost:5173

🛠️ Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run build:dev - Build for development
• npm run preview - Preview production build
• npm run lint - Run ESLint

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui components
│   ├── Header.tsx      # Navigation header
│   ├── Player.tsx      # Music player
│   └── ...
├── contexts/           # React contexts
├── hooks/              # Custom React hooks
├── pages/              # Route components
│   ├── Index.tsx       # Home page
│   ├── Discover.tsx    # Music discovery
│   ├── Artists.tsx     # Artists page
│   └── ...
├── assets/             # Static assets
└── lib/                # Utility functions

🎨 Key Components

• Music Player - Full-featured audio player with controls
• Artist Cards - Interactive artist profiles and information
• Track Items - Individual song components with play functionality
• Playlist Management - Create and manage custom playlists
• Genre Cards - Browse music by genre categories

🌐 Pages

• Home - Landing page with hero section and features
• Discover - Explore new music and trending tracks
• Artists - Browse and follow your favorite artists
• Pricing - Subscription plans and pricing information
• Login - User authentication

🎯 Getting Started

1. Visit the home page to explore the platform
2. Navigate to "Discover" to browse music
3. Check out "Artists" to find new talent
4. Use the music player to control playback
5. Explore different genres and create playlists

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with shadcn/ui components
• Icons by Lucide
• Powered by Vite and React

---

Made with ❤️ for music lovers everywhere