Skip to content

Full-stack music streaming application with modern UI and audio visualization (Next.js + .NET Core)

Notifications You must be signed in to change notification settings

nizamike229/MeloCloud

Repository files navigation

🎵 MeloCloud

.NET Next.js TypeScript TailwindCSS PostgreSQL PRs Welcome

Modern web music streaming service with real-time visualization and playlist management.

📋 Description

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.

✨ Features

Music Experience

  • 🎧 Real-time audio playback with visualizer
  • 🎮 Keyboard shortcuts for playback control
  • 🔊 Volume control with mute option
  • 🔄 Progress tracking with time display

Library Management

  • 📚 Personal music library
  • 📝 Create and manage playlists
  • 🎵 Add songs to playlists
  • 📱 Drag-and-drop playlist reordering

User Interface

  • 🌙 Modern, responsive dark theme
  • 🔍 Real-time search functionality
  • 📤 File upload with preview
  • ⚡ Loading states and animations
  • ❌ User-friendly error handling

User Features

  • 🔐 Secure authentication
  • 👤 Profile customization
  • 🖼️ Avatar upload
  • 🔑 Session management

💻 Tech Stack

Frontend

  • Next.js 13 with TypeScript
  • TailwindCSS for styling
  • React Hooks for state management
  • Web Audio API for audio processing
  • Framer Motion for animations

Backend

  • ASP.NET Core for API
  • Entity Framework Core for ORM
  • PostgreSQL database
  • JWT authentication
  • Microservices architecture

🚀 Getting Started

Prerequisites

  • Node.js (v16+)
  • .NET 8.0 SDK
  • PostgreSQL
  • Docker

Installation

  1. Clone the repository:
git clone https://github.com/nizamike229/MeloCloud
  1. Go to project directory
cd melocloud
  1. Using Docker:
docker-compose up --build

Access the application:

⌨️ Keyboard Shortcuts

Key Action
Space Play/Pause
Left Arrow Previous Track
Right Arrow Next Track
Ctrl + F Focus Search

📁 Project Structure

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

🔑 Core Components

  • 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

🚧 Project Status

In Active Development

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

👤 Contact

Nizami - @nizamike229

Project Link: https://github.com/nizamike229/MeloCloud

About

Full-stack music streaming application with modern UI and audio visualization (Next.js + .NET Core)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published