🎧 Track Drop

Track Drop is a modern web app for handling music requests during events, parties, or streams. It offers:

• Simple interface for submitting and browsing songs
• Voting system for requests
• Admin panel for queue management
• Responsive design

This project is a semester assignment at university and is an expansion of a personal project. The original version was built in PHP, followed by an attempt to migrate it to SvelteKit. Ultimately, as part of this team assignment, we collectively decided to rebuild it using Next.js and Supabase for a more scalable and modern solution.

➡️ Check out our GitHub Project board and see our journey!

🛠️ How We Worked

IDE

JetBrains WebStorm - Our main development environment, ensuring consistent code style and efficient collaboration, although each and every team member was free to use their preferred IDE.

Version Control System

GitHub - All code was managed via GitHub repositories, with regular pull requests, code reviews, and feature branching.

Database

Supabase - Used for PostgreSQL database hosting, authentication, and real-time data management.

Backlog & Task Management

GitHub Projects - We tracked tasks, bugs, and progress using project boards and issues.

Team Communication

Slack - Daily communication, quick questions, and coordination.

Additional Tools

GitKraken - For visualizing git history, resolving merge conflicts, and simplifying complex git operations.

⚙️ Tech Overview

• Frontend: React + Next.js
• UI: MUI
• Animations: Framer Motion
• Database: Supabase
• Auth: Supabase Auth
• External APIs: Spotify API, YouTube API
• CI/CD: Vercel
• SMTP: Brevo

👤 Our Team

Project Lead	Backend & Auth Specialist	API Integration Engineer	UI/UX Designer
@Guliveer	@Deerion	@lukaszgrzecznik	@lifeoverthinker
Managed task assignments, supervised the team's work, and introduced many key changes to the project.	Responsible for database work, implementing authentication processes, 2FA, and password recovery. Took on many smaller but essential tasks.	Focused on the most challenging tasks, including integrating with external APIs.	Made sure the application looks beautiful and provides a great user experience.

🚀 Getting Started

Create a .env.local file in the root of the project and add your environment variables:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NEXT_PUBLIC_REDIRECT_URL=url_to_redirect_after_authentication

SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
NEXT_PUBLIC_YOUTUBE_API_KEY=your_youtube_api_key

Install dependencies:

npm install

Run the dev server:

npm run dev

Then open: http://localhost:3000