A music streaming and playlist web application built with Next.js, TypeScript, React, Tailwind CSS, and Supabase.
The application allows authenticated users to upload and manage music, create playlists, favorite tracks, search their music library, and listen to songs through a browser-based audio player.
- User authentication
- Music uploads
- Thumbnail uploads
- Music library
- Music search
- Playlist management
- Favorite/liked songs
- Browser-based audio playback
- Play/pause controls
- Previous/next track navigation
- Volume control
- Persistent player state
- Responsive interface
- Next.js
- React
- TypeScript
- Tailwind CSS
- Supabase Authentication
- Supabase Storage
- Supabase Database
The application is organized around several core pieces of functionality:
┌─────────────────────┐
│ Spoti │
│ Next.js │
└──────────┬──────────┘
│
┌────────────────────┼────────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Music │ │ Player │ │ Playlists │
│ Library │ │ │ │ & Likes │
└─────────────┘ └─────────────┘ └─────────────┘
│ │ │
└────────────────────┼────────────────────┘
│
▼
┌─────────────────────┐
│ Supabase │
│ │
│ Authentication │
│ Database │
│ Storage │
└─────────────────────┘
Authenticated users can upload music and associated thumbnail artwork.
Uploaded assets are stored using Supabase Storage, with music files and thumbnail images stored in dedicated storage buckets.
Music records are associated with authenticated users so that users can manage their own uploaded content.
The application includes an interactive browser-based audio player.
The player supports:
- Play and pause
- Previous and next track
- Track selection
- Volume control
- Current track state
- Persistent player state The player functionality is implemented using React components and custom hooks to coordinate playback state across the application.
Users can organize music into playlists and manage their saved tracks.
The application supports playlist-related functionality alongside the user's music library.
Users can mark songs as favorites and access their liked music separately from the rest of their library.
The application provides music search functionality to help users find tracks within the available music.
Supabase Authentication handles user accounts and authentication.
Authenticated users can access user-specific functionality such as:
- Uploading music
- Managing their music library
- Creating playlists
- Favoriting songs
- Accessing their account-specific content
Supabase Storage is used to store uploaded media assets.
The application stores:
- Audio files
- Thumbnail images The stored assets are associated with music records so they can be retrieved and displayed by the application.
The frontend is built using reusable React components.
Custom components and hooks are used to separate functionality such as:
- Music playback
- Music libraries
- Uploading
- Search
- Likes
- Authentication
- Playlist functionality This keeps individual UI components focused on specific responsibilities and makes functionality easier to reuse throughout the application.
Node.js A Supabase project
Clone the repository:
git clone https://github.com/imminent-byte/Spoti.git
cd Spoti
Install dependencies:
npm install
Create a .env.local file and configure the required Supabase environment variables.
Example:
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
Start the development server:
npm run dev
Open:
http://localhost:3000
Spoti/
├── app/
├── components/
├── hooks/
├── providers/
├── public/
├── middleware.ts
├── types.ts
└── types_db.ts
Spoti was built as a hands-on project for practicing modern frontend development and learning how to build an application around authentication, cloud storage, user-generated content, and interactive media playback.