SukhSangeet — A Personal Music Workspace Built for Focus
Project Overview
SukhSangeet is a full-stack music listening and playlist management platform designed to make online music discovery more intentional and less distracting.
Instead of navigating a conventional video feed, users can search for music through YouTube, organize tracks into personal playlists, import existing YouTube playlists, and manage their listening queue through a dedicated interface.
Online music discovery often comes bundled with video recommendations, comments, and other distractions that can interrupt study sessions, coding workflows, or focused work.
I wanted to build a more focused alternative: a personal music workspace where users can organize what they want to hear and control the listening experience without navigating an entire video platform.
The Solution
I designed and developed SukhSangeet as a full-stack web application combining a responsive React frontend with a Django REST Framework backend.
The platform brings music discovery, playlist management, authentication, and playback queue controls into one experience. The interface prioritizes clarity and ease of use, while the backend handles user accounts, playlist operations, and track metadata.
The objective was to create a usable product, not just a frontend prototype.
Key Features
YouTube Music Search: Search for tracks directly within the application.
Playlist Management: Create, edit, and delete personal playlists.
YouTube Playlist Import: Import existing YouTube playlists into a personal music workspace.
Drag-and-Drop Reordering: Organize tracks into a preferred listening sequence.
Custom Playback Queue: Manage the order of tracks and create a more controlled listening experience.
JWT Authentication: Protect user-specific functionality with token-based authentication.
Responsive User Interface: Provide a consistent experience across desktop and mobile screen sizes.
YouTube Integration: Retrieve relevant track information and metadata to support music discovery and playlist workflows.
Technical Architecture
Frontend
React 19, Vite, Tailwind CSS and Axios
The frontend handles the application interface, user interactions, playlist management, API requests, and playback-related state. Reusable components help organize the experience and keep the interface consistent.
Backend
Python, Django 5 and Django REST Framework
The backend provides REST API endpoints for authentication, playlist operations, and related application data. Separating frontend and backend responsibilities makes the application easier to maintain and extend.
Database
SQLite
SQLite stores application data, including information needed for user accounts and playlist management.
Authentication and Integrations
JWT Authentication and YouTube Data API
Token-based authentication supports protected application functionality, while YouTube integration enables music search and playlist-related workflows.
Engineering Challenges
Managing Playlist State
A playlist application needs consistent track ordering across user interactions. I worked on playlist CRUD operations and track reordering to make personal music collections easier to manage.
Integrating an External API
YouTube integration introduces dependencies on external data and API responses. The application needs to handle retrieved track information and translate it into a useful in-app experience.
Connecting Frontend and Backend
The project required coordinating React state, API requests, authentication, and backend responses. A clear REST API structure helps separate interface behavior from server-side responsibilities.
Building a Cohesive Listening Experience
Music discovery, playlist editing, and playback controls need to work together naturally. I focused on bringing these interactions into a unified interface instead of treating them as disconnected features.
My Role
I built SukhSangeet as an independent full-stack project, working across frontend development, backend implementation, API integration, authentication, database-backed playlist management, and deployment.
The project involved both product decisions and engineering implementation, from defining the core listening workflow to connecting the application components and making the platform accessible online.
The Outcome
SukhSangeet is a live web application that demonstrates the development of a complete, user-facing product using a modern JavaScript frontend and a Python backend.
The project brings together several practical engineering concepts: REST API design, authentication, database operations, third-party API integration, state management, responsive UI development, and deployment.
More importantly, it addresses a specific user need with a working product rather than a static design concept.
What I Learned
Building SukhSangeet strengthened my understanding of full-stack development and the decisions involved in taking a web application from an idea to a live product.
It also reinforced the importance of designing around a clear user workflow. Features such as search, playlist organization, and playback controls become valuable when they work together as one coherent experience.
SukhSangeet represents my approach to building practical web applications that combine thoughtful interface design with functional backend engineering.