A modern, feature-rich web music player built with cutting-edge technologies for the ultimate listening experience.
- 🎧 Modern Music Player: Sleek, intuitive interface for seamless music playback
- 📱 Responsive Design: Optimized for desktop, tablet, and mobile devices
- 🎶 Queue Management: Add songs to queue with flexible playback controls
- 🔗 Spotify Integration: Import your Spotify playlists directly into Sonix
- 💾 Cloud Storage: Save and sync your music library across devices
- 🎨 Beautiful UI: Smooth animations and modern design elements
- ⚡ Fast Performance: Optimized for speed and responsiveness
- Framework: Next.js - React framework for production
- Language: TypeScript - Type-safe JavaScript
- Styling: Tailwind CSS - Utility-first CSS framework
- Animations: Framer Motion - Production-ready motion library
- Backend: Firebase - Backend-as-a-Service platform
- API Integration: Spotify Web API for playlist imports
- Node.js (v16 or higher)
- npm or yarn
- Firebase account
- Spotify Developer account (for playlist import feature)
-
Clone the repository
git clone https://github.com/yourusername/sonix.git cd sonix -
Install dependencies
npm install # or yarn install -
Set up environment variables
Create a
.env.localfile in the root directory:# Database Configuration DATABASE_URL=postgres://username:password@host:port/database?sslmode=no-verify # JWT Configuration JWT_SECRET=your_jwt_secret_key_here # Spotify API Configuration SPOTIFY_CLIENT_ID=your_spotify_client_id SPOTIFY_CLIENT_SECRET=your_spotify_client_secret # Firebase Configuration NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project_id.firebasestorage.app NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id
-
Run the development server
npm run dev # or yarn dev -
Open your browser
Navigate to http://localhost:3000 to see the application.
- Play, pause, skip, and repeat functionality
- Volume control with mute option
- Progress bar with seek functionality
- Shuffle mode for randomized playback
- Add individual songs or entire playlists to queue
- Reorder queue items with drag-and-drop
- View upcoming tracks
- Clear queue or remove specific items
- Connect your Spotify account securely
- Browse and import your existing playlists
- Sync playlist metadata and track information
- Maintain playlist organization from Spotify
- User accounts and authentication via Firebase Auth
- Cloud storage for playlists and user preferences
- Real-time synchronization across devices
- Offline capability for downloaded content
rajiv81205-sonix/
├── README.md
├── drizzle.config.ts
├── firebase.js
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── tsconfig.json
├── vercel.json
├── .env.example
├── app/
│ ├── globals.css
│ ├── layout.tsx
│ ├── page.tsx
│ ├── api/
│ │ ├── auth/
│ │ │ ├── googleLogin/
│ │ │ │ └── route.ts
│ │ │ ├── login/
│ │ │ │ └── route.ts
│ │ │ ├── register/
│ │ │ │ └── route.ts
│ │ │ ├── update-profile/
│ │ │ │ └── route.ts
│ │ │ └── verify/
│ │ │ └── route.ts
│ │ ├── dashboard/
│ │ │ ├── addToPlaylist/
│ │ │ │ └── route.ts
│ │ │ ├── deleteSong/
│ │ │ │ └── route.ts
│ │ │ ├── getAlbumUrl/
│ │ │ │ └── route.ts
│ │ │ ├── getNewReleases/
│ │ │ │ └── route.ts
│ │ │ ├── getPlaylist/
│ │ │ │ └── route.ts
│ │ │ ├── getSongUrl/
│ │ │ │ └── route.ts
│ │ │ ├── getUserPlaylists/
│ │ │ │ └── route.ts
│ │ │ ├── makePlaylist/
│ │ │ │ └── route.ts
│ │ │ ├── search/
│ │ │ │ └── route.ts
│ │ │ └── searchAlbum/
│ │ │ └── route.ts
│ │ ├── debug-jiosaavn/
│ │ │ └── route.ts
│ │ ├── room/
│ │ │ └── create-room/
│ │ │ └── route.ts
│ │ └── spotify/
│ │ ├── addSong/
│ │ │ └── route.ts
│ │ └── import/
│ │ └── route.ts
│ ├── auth/
│ │ ├── login/
│ │ │ └── page.tsx
│ │ └── register/
│ │ └── page.tsx
│ ├── dashboard/
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── playlist/
│ │ │ └── [id]/
│ │ │ └── page.tsx
│ │ ├── profile/
│ │ │ └── page.tsx
│ │ ├── room/
│ │ │ ├── page.tsx
│ │ │ └── [id]/
│ │ │ └── page.tsx
│ │ └── search/
│ │ └── page.tsx
│ └── debug/
│ └── page.tsx
├── components/
│ ├── LoadingSpinner.tsx
│ ├── auth/
│ │ ├── Login.tsx
│ │ └── Signup.tsx
│ ├── dashboard/
│ │ ├── AddPlaylistPopup.tsx
│ │ ├── Main.tsx
│ │ ├── Player.tsx
│ │ ├── PlaylistPage.tsx
│ │ ├── Profile.tsx
│ │ ├── Search.tsx
│ │ ├── Sidebar.tsx
│ │ ├── SpotifyPopup.tsx
│ │ └── mobile/
│ │ ├── MobileAddPlaylistPopup.tsx
│ │ ├── MobileMain.tsx
│ │ ├── MobilePlayer.tsx
│ │ ├── MobilePlaylistPage.tsx
│ │ ├── MobileSearch.tsx
│ │ ├── MobileSidebar.tsx
│ │ └── MobileSpotifyPopup.tsx
│ ├── Landing/
│ │ ├── Hero.tsx
│ │ ├── LandingPage.tsx
│ │ ├── Navbar.tsx
│ │ └── TopCharts.tsx
│ └── rooms/
│ ├── Room.tsx
│ └── RoomDashboard.tsx
├── context/
│ └── PlayerContext.tsx
└── lib/
├── db/
│ ├── auth.ts
│ ├── index.ts
│ ├── room.ts
│ ├── schema.ts
│ └── song.ts
└── middleware/
└── verifyToken.ts
Sonix focuses on providing a clean, modern interface that puts music first. The design emphasizes:
- Minimalism: Clean layouts without visual clutter
- Accessibility: High contrast ratios and keyboard navigation
- Responsiveness: Seamless experience across all device sizes
- Performance: Smooth animations and fast loading times
We welcome contributions to Sonix! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js team for the amazing framework
- Vercel for deployment and hosting
- Spotify for their comprehensive API
- Firebase for backend services
- The open-source community for inspiration and tools
If you encounter any issues or have questions, please:
- Check the documentation
- Search existing issues
- Create a new issue if needed