Modern web music streaming service with real-time visualization and playlist management.
MeloCloud is a full-stack music streaming platform inspired by Spotify, featuring real-time audio visualization, playlist management, and a modern dark theme UI. Built using microservices architecture with ASP.NET Core backend and Next.js frontend.
- 🎧 Real-time audio playback with visualizer
- 🎮 Keyboard shortcuts for playback control
- 🔊 Volume control with mute option
- 🔄 Progress tracking with time display
- 📚 Personal music library
- 📝 Create and manage playlists
- 🎵 Add songs to playlists
- 📱 Drag-and-drop playlist reordering
- 🌙 Modern, responsive dark theme
- 🔍 Real-time search functionality
- 📤 File upload with preview
- ⚡ Loading states and animations
- ❌ User-friendly error handling
- 🔐 Secure authentication
- 👤 Profile customization
- 🖼️ Avatar upload
- 🔑 Session management
- Next.js 13 with TypeScript
- TailwindCSS for styling
- React Hooks for state management
- Web Audio API for audio processing
- Framer Motion for animations
- ASP.NET Core for API
- Entity Framework Core for ORM
- PostgreSQL database
- JWT authentication
- Microservices architecture
- Node.js (v16+)
- .NET 8.0 SDK
- PostgreSQL
- Docker
- Clone the repository:
git clone https://github.com/nizamike229/MeloCloud- Go to project directory
cd melocloud- Using Docker:
docker-compose up --buildAccess the application:
- Frontend: http://localhost:3000
- Backend API: http://localhost:5151
| Key | Action |
|---|---|
| Space | Play/Pause |
| Left Arrow | Previous Track |
| Right Arrow | Next Track |
| Ctrl + F | Focus Search |
melocloud/
├── front/ # Frontend application
│ ├── src/
│ │ ├── app/ # Next.js pages
│ │ ├── components/ # React components
│ │ ├── hooks/ # Custom React hooks
│ │ ├── types/ # TypeScript types
│ │ └── utils/ # Utility functions
├── SongLayer/ # Song management service
└── AuthLayer/ # Authentication service
- Player: Audio playback with visualization
- Playlist Manager: Playlist CRUD operations
- File Upload: Media file handling
- Audio Visualizer: Real-time frequency display
- Error Handler: Centralized error management
In Active Development
Contributions are welcome! Please feel free to submit a Pull Request.
Nizami - @nizamike229
Project Link: https://github.com/nizamike229/MeloCloud