{"id":26353323,"url":"https://github.com/guliveer/song-request","last_synced_at":"2026-04-12T01:32:09.047Z","repository":{"id":282614287,"uuid":"943237891","full_name":"Guliveer/song-request","owner":"Guliveer","description":"Song queuing \u0026 voting system build using Next.js, based on PostgreSQL database. Features secure user accounts with role permissions system.","archived":false,"fork":false,"pushed_at":"2025-03-15T19:02:24.000Z","size":48,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-15T20:18:52.861Z","etag":null,"topics":["auth","database","mui","nextjs","postgresql","react","react-components","supabase","supabase-js"],"latest_commit_sha":null,"homepage":"https://song-request.guliveer.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Guliveer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-05T11:37:06.000Z","updated_at":"2025-03-13T17:23:19.000Z","dependencies_parsed_at":"2025-03-15T20:18:56.765Z","dependency_job_id":"9b0b3aa8-d8a7-437a-a2cf-658f7590db1b","html_url":"https://github.com/Guliveer/song-request","commit_stats":null,"previous_names":["guliveer/song-request"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Guliveer%2Fsong-request","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Guliveer%2Fsong-request/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Guliveer%2Fsong-request/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Guliveer%2Fsong-request/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Guliveer","download_url":"https://codeload.github.com/Guliveer/song-request/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243858059,"owners_count":20359269,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auth","database","mui","nextjs","postgresql","react","react-components","supabase","supabase-js"],"created_at":"2025-03-16T11:17:48.158Z","updated_at":"2026-04-12T01:32:09.040Z","avatar_url":"https://github.com/Guliveer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![React Badge](https://img.shields.io/badge/React-61DAFB?logo=react\u0026logoColor=000\u0026style=for-the-badge)\n![Next.js Badge](https://img.shields.io/badge/Next.js-000?logo=nextdotjs\u0026logoColor=fff\u0026style=for-the-badge)\n![shadcn/ui Badge](https://img.shields.io/badge/shadcn%2Fui-000?logo=shadcnui\u0026logoColor=fff\u0026style=for-the-badge)\n![Supabase Badge](https://img.shields.io/badge/Supabase-3FCF8E?logo=supabase\u0026logoColor=fff\u0026style=for-the-badge)\n![PostgreSQL Badge](https://img.shields.io/badge/PostgreSQL-4169E1?logo=postgresql\u0026logoColor=fff\u0026style=for-the-badge)\n![Brevo Badge](https://img.shields.io/badge/Brevo-0B996E?logo=brevo\u0026logoColor=fff\u0026style=for-the-badge)\n![Vercel Badge](https://img.shields.io/badge/Vercel-000?logo=vercel\u0026logoColor=fff\u0026style=for-the-badge)\n![Spotify API Badge](https://img.shields.io/badge/Spotify%20API-1ED760?logo=spotify\u0026logoColor=fff\u0026style=for-the-badge)\n![YouTube API Badge](https://img.shields.io/badge/YouTube%20API-F00?logo=youtube\u0026logoColor=fff\u0026style=for-the-badge)\n\n### Status\n\n[![Track Drop Website](https://cronitor.io/badges/AG8CXU/production/o8Gvcwy9GIUCszl24N_6l6VM_PI.svg)](https://track-drop.cronitorstatus.com)  \n[![Track Drop Database](https://cronitor.io/badges/BDEGzZ/production/59qiuDtcV1g5eTg_7pgfN_hhqbY.svg)](https://track-drop.cronitorstatus.com)\n\nView status history [here](https://track-drop.cronitorstatus.com)\n\n# 🎧 Track Drop\n\n**Track Drop** is a modern web app for handling music requests during events, parties, or streams. It offers:\n\n- Simple interface for submitting and browsing songs\n- Voting system for requests\n- Admin panel for queue management\n- Responsive design\n\nThis project is a semester assignment at university and is an expansion of a personal project.\nThe original version was built in PHP, followed by an attempt to migrate it to SvelteKit.\nUltimately, as part of this team assignment, we collectively decided to rebuild it using Next.js and Supabase for a more\nscalable and modern solution.\n\n➡️ Check out our [GitHub Project board](https://github.com/users/Guliveer/projects/2) and see our journey!\n\n## 🛠️ How We Worked\n\n#### IDE\n\n\u003e ![WebStorm Badge](https://img.shields.io/badge/WebStorm-000?logo=webstorm\u0026logoColor=fff\u0026style=flat-square)  \n\u003e [JetBrains WebStorm](https://www.jetbrains.com/webstorm/) - Our main development environment, ensuring consistent code\n\u003e style and efficient collaboration, although each and every team member was free to use their preferred IDE.\n\n#### Version Control System\n\n\u003e ![GitHub Badge](https://img.shields.io/badge/GitHub-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)  \n\u003e [GitHub](https://github.com/about) - All code was managed via GitHub repositories, with regular pull requests, code\n\u003e reviews, and feature branching.\n\n#### Database\n\n\u003e ![Supabase Badge](https://img.shields.io/badge/Supabase-3FCF8E?logo=supabase\u0026logoColor=fff\u0026style=flat-square)  \n\u003e [Supabase](https://supabase.com) - Used for PostgreSQL database hosting, authentication, and real-time data\n\u003e management.\n\n#### Backlog \u0026 Task Management\n\n\u003e ![GitHub Projects Badge](https://img.shields.io/badge/GitHub%20Projects-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)  \n\u003e [GitHub Projects](https://docs.github.com/en/issues/planning-and-tracking-with-projects/learning-about-projects/about-projects) -\n\u003e We tracked tasks, bugs, and progress using project boards and issues.\n\n#### Team Communication\n\n\u003e ![Slack Badge](https://img.shields.io/badge/Slack-4A154B?logo=slack\u0026logoColor=fff\u0026style=flat-square)  \n\u003e [Slack](https://slack.com/about) - Daily communication, quick questions, and coordination.\n\n#### Additional Tools\n\n\u003e ![GitKraken Badge](https://img.shields.io/badge/GitKraken-179287?logo=gitkraken\u0026logoColor=fff\u0026style=flat-square)  \n\u003e [GitKraken](https://www.gitkraken.com/git-client) - For visualizing git history, resolving merge conflicts, and\n\u003e simplifying complex git operations.\n\n## ⚙️ Tech Overview\n\n- **Frontend:** [React](https://react.dev) + [Next.js](https://nextjs.org)\n- **UI:** [shadcn](https://ui.shadcn.com)\n- **Animations:** [Framer Motion](https://motion.dev)\n- **Database:** [Supabase](https://supabase.com)\n- **Auth:** [Supabase Auth](https://supabase.com/auth)\n- **External APIs:\n  ** [Spotify API](https://developer.spotify.com), [YouTube API](https://developers.google.com/youtube/v3)\n- **CI/CD:** [Vercel](https://vercel.com)\n- **SMTP:** [Brevo](https://brevo.com)\n\n## 👤 Our Team\n\n|                                                 Project\u0026nbsp;Lead                                                 |                                                   Backend\u0026nbsp;\u0026amp;\u0026nbsp;Auth Specialist                                                   |                                                     API\u0026nbsp;Integration Engineer                                                      |                                                             UI/UX Designer                                                             |\n|:-----------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------:|\n| [\u003cimg src=\"https://github.com/Guliveer.png?size=512\" width=\"128\"\u003e\u003cbr/\u003e**@Guliveer**](https://github.com/Guliveer) |               [\u003cimg src=\"https://github.com/Deerion.png?size=512\" width=\"128\"\u003e\u003cbr/\u003e**@Deerion**](https://github.com/Deerion)                | [\u003cimg src=\"https://github.com/lukaszgrzecznik.png?size=512\" width=\"128\"\u003e\u003cbr/\u003e**@lukaszgrzecznik**](https://github.com/lukaszgrzecznik) | [\u003cimg src=\"https://github.com/lifeoverthinker.png?size=512\" width=\"128\"\u003e\u003cbr/\u003e**@lifeoverthinker**](https://github.com/lifeoverthinker) |\n|       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\u0026nbsp;great user experience.                          |\n\n## 🚀 Getting Started\n\nCreate a `.env.local` file in the root of the project and add your environment variables:\n\n```bash\nNEXT_PUBLIC_SUPABASE_URL=your_supabase_url\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key\nNEXT_PUBLIC_REDIRECT_URL=url_to_redirect_after_authentication\n\nSPOTIFY_CLIENT_ID=your_spotify_client_id\nSPOTIFY_CLIENT_SECRET=your_spotify_client_secret\nNEXT_PUBLIC_YOUTUBE_API_KEY=your_youtube_api_key\n```\n\nInstall dependencies:\n\n```bash\nnpm install\n```\n\nRun the dev server:\n\n```bash\nnpm run dev\n```\n\nThen open: [http://localhost:3000](http://localhost:3000)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguliveer%2Fsong-request","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguliveer%2Fsong-request","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguliveer%2Fsong-request/lists"}