https://github.com/guliveer/song-request
Song queuing & voting system build using Next.js, based on PostgreSQL database. Features secure user accounts with role permissions system.
https://github.com/guliveer/song-request
auth database mui nextjs postgresql react react-components supabase supabase-js
Last synced: 3 months ago
JSON representation
Song queuing & voting system build using Next.js, based on PostgreSQL database. Features secure user accounts with role permissions system.
- Host: GitHub
- URL: https://github.com/guliveer/song-request
- Owner: Guliveer
- Created: 2025-03-05T11:37:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-15T19:02:24.000Z (over 1 year ago)
- Last Synced: 2025-03-15T20:18:52.861Z (over 1 year ago)
- Topics: auth, database, mui, nextjs, postgresql, react, react-components, supabase, supabase-js
- Language: JavaScript
- Homepage: https://song-request.guliveer.vercel.app
- Size: 46.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Status
[](https://track-drop.cronitorstatus.com)
[](https://track-drop.cronitorstatus.com)
View status history [here](https://track-drop.cronitorstatus.com)
# š§ 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](https://github.com/users/Guliveer/projects/2) and see our journey!
## š ļø How We Worked
#### IDE
> 
> [JetBrains WebStorm](https://www.jetbrains.com/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](https://github.com/about) - All code was managed via GitHub repositories, with regular pull requests, code
> reviews, and feature branching.
#### Database
> 
> [Supabase](https://supabase.com) - Used for PostgreSQL database hosting, authentication, and real-time data
> management.
#### Backlog & Task Management
> 
> [GitHub Projects](https://docs.github.com/en/issues/planning-and-tracking-with-projects/learning-about-projects/about-projects) -
> We tracked tasks, bugs, and progress using project boards and issues.
#### Team Communication
> 
> [Slack](https://slack.com/about) - Daily communication, quick questions, and coordination.
#### Additional Tools
> 
> [GitKraken](https://www.gitkraken.com/git-client) - For visualizing git history, resolving merge conflicts, and
> simplifying complex git operations.
## āļø Tech Overview
- **Frontend:** [React](https://react.dev) + [Next.js](https://nextjs.org)
- **UI:** [shadcn](https://ui.shadcn.com)
- **Animations:** [Framer Motion](https://motion.dev)
- **Database:** [Supabase](https://supabase.com)
- **Auth:** [Supabase Auth](https://supabase.com/auth)
- **External APIs:
** [Spotify API](https://developer.spotify.com), [YouTube API](https://developers.google.com/youtube/v3)
- **CI/CD:** [Vercel](https://vercel.com)
- **SMTP:** [Brevo](https://brevo.com)
## š¤ Our Team
| ProjectĀ Lead | BackendĀ &Ā Auth Specialist | APIĀ Integration Engineer | UI/UX Designer |
|:-----------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------:|
| [
**@Guliveer**](https://github.com/Guliveer) | [
**@Deerion**](https://github.com/Deerion) | [
**@lukaszgrzecznik**](https://github.com/lukaszgrzecznik) | [
**@lifeoverthinker**](https://github.com/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:
```bash
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:
```bash
npm install
```
Run the dev server:
```bash
npm run dev
```
Then open: [http://localhost:3000](http://localhost:3000)