Project Overview

BeatHive is a feature-rich, full-stack music streaming web application built entirely from scratch using the MERN stack — MongoDB, Express.js, React, and Node.js. The project was conceived and developed end-to-end, covering everything from UI/UX design to server architecture, database modelling, third-party integrations, and deployment.

The goal was to build a production-grade music platform that rivals the core experience of mainstream streaming services, while adding unique personal touches such as dynamic theme customisation, user-uploaded songs, and a lightweight admin panel — all within a single, cohesive application.

The Challenge

Building a music streaming application presents a broad set of engineering and design challenges that span multiple disciplines simultaneously:

• Designing a clean, intuitive player UI that handles continuous playback, queue state, and media controls without friction
• Implementing secure user authentication via both email/password (with OTP-based password recovery) and Google OAuth 2.0
• Handling audio file uploads, storage, and streaming reliably using Multer middleware
• Building a real-time, responsive experience that feels fast and optimised across all screen sizes
• Giving users meaningful personalisation — favourites, history, colour themes — without overcomplicating the interface
• Providing content moderation tools through a mini admin panel to manage featured and trending catalogues

UI / UX Design

The interface was designed from the ground up with a focus on immersive simplicity. Music apps live or die by how little friction exists between the user and the music — so every layout decision prioritised clarity and speed of access.

• A persistent, floating player bar provides seamless playback controls — play, pause, next, previous, repeat, shuffle, and volume — without interrupting the browsing experience
• A dynamic colour theme switcher lets users change the entire colour palette of the application in a single click, creating a genuinely personalised environment
• Feedback-rich UI with contextual snackbars and toast notifications keeps users informed at every action point — from login to upload to queue changes
• Consistent visual hierarchy across discovery, playback, and account pages ensures the interface never feels disjointed

Authentication & Security

BeatHive implements a dual-mode authentication system designed for both convenience and security:

• Google OAuth 2.0 — users can sign in instantly with their Google account, bypassing the need for manual registration entirely
• Email & Password — traditional registration with server-side validation and encrypted password storage
• Forgot Password via OTP — a time-sensitive one-time password is dispatched to the user's registered email address using a Node.js mailing service, allowing secure password recovery without exposing sensitive reset links
• Update Password — authenticated users can update their credentials directly from their profile settings

JWT-based session management is used throughout, ensuring stateless, scalable request authorisation across all protected API routes.

Music Discovery & Playback Features

The core listening experience was built to feel fluid and feature-complete, covering the full spectrum of what users expect from a modern streaming platform:

• Queue Management — users can build, reorder, and clear a personalised playback queue at any time
• Recently Played — every song played is automatically logged and displayed in a dedicated recents list for quick re-access
• Favourites — users can mark any song as a favourite, building a persistent library accessible from their profile
• Trending & Featured — curated sections surface popular and handpicked tracks on the home screen, managed by the admin panel
• Category Filters — songs are browseable by language, artist, genre, and other attributes, making discovery fast and intuitive
• Search — a real-time search feature queries the catalogue by title, artist, or category for instant results
• Playback Controls — play, pause, skip, previous, repeat mode, shuffle, and volume control are all accessible from the persistent player bar

User Uploads & File Handling

One of the standout capabilities of BeatHive is allowing users to upload their own audio files directly from their device. This was implemented using Multer — a Node.js middleware for handling multipart/form-data — integrated into the Express backend with the following behaviours:

• Users select an audio file from their device and it is streamed to the server, validated, and stored with a unique reference tied to their account
• Uploaded songs are immediately available for playback in the user's personal library and can be added to the queue like any other track
• Users retain full ownership and can delete their uploaded songs at any time, which removes both the database record and the stored file
• File type and size validation is enforced server-side to maintain performance and prevent abuse

Technical Implementation

The full stack was built from scratch with deliberate architectural decisions to ensure maintainability, performance, and scalability:

• Frontend (React) — component-driven UI with global state management handling playback, queue, user session, and theme preferences. Optimised re-renders ensure the player never interrupts while navigating between pages
• Backend (Node.js + Express) — RESTful API architecture with clearly separated route controllers for auth, songs, users, and admin operations
• Database (MongoDB + Mongoose) — schema-driven data modelling for users, songs, favourites, and play history with indexed queries for fast lookups
• File Uploads (Multer) — middleware pipeline handling multipart audio uploads with storage configuration and validation
• Mailing (Nodemailer) — transactional email service handling OTP dispatch for password recovery with HTML-formatted email templates
• OAuth (Passport.js / Google) — Google sign-in strategy integrated with session handling and account linking for existing users

Mini Admin Panel

A lightweight, role-protected admin interface was built to give the platform owner control over the content catalogue without requiring direct database access:

• Upload new songs to the public catalogue, including metadata such as title, artist, language, and category
• Manage the Trending and Featured song lists displayed on the home screen — add, reorder, or remove entries as needed
• All admin routes are protected server-side by role-based middleware, ensuring only authorised accounts can access management functions

Outcome

BeatHive stands as a comprehensive demonstration of full-stack product engineering — from initial design concepts through to a fully functional, deployed application. The project delivered:

• A complete, production-ready music streaming platform built entirely on the MERN stack
• A seamless and intuitive user experience with personalisation at its core — themes, favourites, history, and uploads
• Robust authentication supporting both Google OAuth and email/OTP flows for maximum accessibility
• An admin panel enabling scalable content management without engineering involvement
• A fast, optimised codebase with clean architecture that is straightforward to extend and maintain

BeatHive demonstrates the capability to conceptualise, design, and engineer complex, multi-layered web applications independently — from the first line of code to the final deployed product.