Mabell. Discover new music every day
As a frontend engineer with a passion for building complex systems, I wanted to challenge myself by creating a full-fledged music streaming service. The goal was not just to develop a simple app but to simulate the architecture, technologies, and scaling considerations of a real-world music platform, similar to Spotify or Apple Music.
This project consists of three major components, each built with modern technologies and engineering practices:
- Client App — A user-facing web app where users can explore and listen to music, create playlists, manage their profiles, and more.
- Admin App — A separate, robust admin interface that allows content managers and moderators to manage the entire catalog, user data, and analytics.
- REST API— The core of the system, responsible for handling user authentication, music data management, search, recommendations, and streaming functionality.
Client App
The client-facing application is built with Nuxt 3, TypeScript, and Vue 3, delivering a fast, responsive, and SEO-friendly music streaming platform. It provides users with an intuitive interface to explore music, create playlists, and manage their profiles.
Music Streaming:
A core component of the system, the streaming service allows users to listen to music with a smooth and responsive experience. It supports range requests and buffering to ensure uninterrupted playback even in low bandwidth conditions.
Fast Search and Discovery:
Leveraging Typesense, the project includes an advanced search engine capable of delivering quick and relevant results, even with a large catalog of music. The search supports typo tolerance and allows users to filter and sort by genres, artists, and albums.
Excellent Mobile Support & PWA Integration:
One of the priorities for the client-side application was to provide a first-class mobile experience, making the interface feel as natural on a smartphone as it does on a desktop browser.
Admin App
The admin panel is designed for easy content management. Administrators can upload new music, edit existing metadata, and analyze user activity and listening trends.
- Music Catalog Management
- Easily manage tracks, albums, artists, and genres, including uploading and editing metadata, cover images, and audio files.
- User Management
- View, manage, and edit user profiles, including their playlists, subscriptions, and activity.
- Playlist & Collection Management
- Curate, edit, and publish public playlists, collections, and recommendations.
- Analytics Dashboard
- Monitor user activity, streaming statistics, and track performance in real-time.
REST API
The REST API serves as the backbone of the entire system, handling all client interactions (from both the frontend and admin panel) and providing essential services such as user authentication, music catalog management, search, recommendations, and streaming.
- Authentication & Authorization
- JWT-based authentication with role-based access control (RBAC) for secure user management.
- Music Catalog Management
- Handling tracks, albums, artists, genres, and playlists.
- Search Engine Integration
- Fast and typo-tolerant search using Typesense for efficient music discovery.
- Analytics Dashboard
- Monitor user activity, streaming statistics, and track performance in real-time.
Why I Built This Project
While building this music streaming service, I aimed to:
- Challenge myself with a complex, full-stack application that incorporates both frontend and backend skills.
- Improve my architectural skills by designing a modular, scalable, and maintainable system.
- Explore modern technologies like Typesense, NestJS, and Docker, which I had less experience with before this project.
- Create a solid portfolio piece that demonstrates my ability to work with end-to-end systems.
This project is more than just a technical exercise; it’s a demonstration of how to design and implement complex systems that are both user-friendly and highly scalable.