Cookie Music

A feature-rich music platform to explore and enjoy music with ease.

Introduction • Key Features • Tech stack • Database Schema • How To Use • MIT License • Feedback

Introduction

Music Platform is an online application where users can explore and enjoy their favorite music in one convenient place. With a user-friendly interface, it allows listeners to:

• 🎶 Browse Music Collections – Discover artists, albums, and tracks from a music library.
• 🎧 Seamless Audio Playback – Listen to high-quality audio with easy-to-use controls.
• 🌗 Theme Toggle – Switch between light and dark modes to suit your preference.
• 👤 Profile Management – Upload profile images and edit personal information to customize your account.
• 💬 Track Commenting – Share your thoughts and impressions by leaving comments directly under any track.
• ✨ Interactive and Friendly Interface – Enjoy an intuitive experience with helpful tooltips, toast notifications, and smooth animations, making it easy and enjoyable to interact with the platform.

Whether you’re an everyday music lover or just looking for a platform to explore new tunes, Cookie Music offers a robust and engaging music experience!

Key Features

• 🔐 User Authentication & Authorization – Secure authentication with JWT tokens, role-based access for admins and users, and secure cookie-based token storage with CORS handling.
• 🎵 Music Player with Queue Management – A globally accessible music player with track queue support, enabling seamless playback control from anywhere in the app.
• 🌑 Dark/Light Theme Switching – Switch between light and dark themes for a personalized experience.
• 📬 Email Verification for Account Confirmation – Secure user registration with email-based account verification.
• ✉️ Custom Toaster Notifications and Tooltips – Real-time feedback with notifications and tooltips to enhance user interaction.
• 🛠 Advanced Form Handling – Reliable form validation and processing powered by React Hook Form and Zod, ensuring accurate data entry.
• 🔍 Enhanced Search with Validation and Debounce – A powerful search field with debouncing, validation, and optimized entity searching for quick, relevant results.
• 🔧 Admin API Interface – A dedicated admin route with an intuitive interface for managing API requests.
• 📤 Drag-and-Drop Track Upload (Admin) – Easy and efficient track uploads with drag-and-drop functionality, simplifying content management for administrators.
• 🌐 Database Interaction via Axios with axiosClient – Robust database interactions through Axios, leveraging a customized axiosClient for consistent and secure requests.
• 🛡 Advanced Backend with Decorators, Validators, DTOs, and Guards – A highly structured server setup using DTOs, decorators, validators, JWT and role-based guards, along with efficient file management for secure and scalable backend operations.
• ⚙️ Error Handling and Loading States – Built-in error boundaries, loading skeletons, and customized "not-found" routes to ensure a smooth user experience.
• 🎨 Rich Styling – Crafted with TailwindCSS, shadcn/ui, and radix to deliver a visually appealing and responsive design.
• 🧩 Modular Architecture – A well-organized and scalable codebase for both backend and frontend, promoting maintainability and future expansion.

Tech Stack

This project is built using modern technologies and frameworks to create a seamless, high-performance user experience.

Client-Side

Server-Side

This stack allows for a responsive, reliable, and secure web application, with real-time updates and scalability on both the client and server.

Database Schema

The database schema utilizes MongoDB with Mongoose and includes collections for User, Track, Artist, Playlist and Comment.

How To Use

To clone and run this application, you'll need Git and Node.js. From your command line:

# Clone this repository
$ git clone https://github.com/Makudzyn/music-platform

# Go into the repository
$ cd music-platform

# Install client dependencies
$ cd client
$ npm install

# Return to root directory
$ cd ..

# Install server dependencies
$ cd server
$ npm install

# Configure environment variables
# Create .env file and configure DB and JWT

# Start the application

## Start server first
$ npm run start:dev --prefix server

## Open a new terminal and start the client
$ npm run dev --prefix client

License

Distributed under the MIT License. See LICENSE for more information.

Feedback

Your feedback is invaluable for making Cookie Music better! If you have suggestions, found a bug, or simply want to share your thoughts on the project:

• 📝 Create a new issue – Visit Issues board to report bugs or request new features.
• 📬 Contact the developer directly – Contact me via Telegram (Maksym)

Your input helps us improve the experience for everyone. Thank you for contributing to Cookie Music!