Collaborative song queue web application built with Next.js, TypeScript, Prisma, PostgreSQL, and React Query.
- ➕ Add Songs via YouTube URLs
- 🗳️ Vote on Songs in the queue (upvote & downvote)
▶️ Auto-Play the highest-voted track and remove it after playing- 📜 Playback History stored in the backend for future insights
- ⚡ Optimistic UI & Caching with React Query
- 🔒 Simple Authentication (Email/Password)
- 🎨 Modern UI built with Tailwind CSS
Follow these steps to run the project locally.
git clone https://github.com/himanshuhr8/vol1.git
cd vol1/appnpm install
# or
yarnCreate a .env.local file in the app folder and add:
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
SECRET=""
YOUTUBE_API_KEY=
DATABASE_URL=postgresql://USER:PASSWORD@HOST:PORT/DATABASE_NAME
Replace
USER,PASSWORD,HOST,PORT, andDATABASE_NAMEwith your PostgreSQL credentials.
npx prisma migrate dev --name initnpm run dev
# or
yarn devOpen http://localhost:3000 in your browser to view the app.
app/ # Next.js App Router routes and API handlers
├── api/ # REST endpoints for songs, votes, and playback
│ ├── songs/ # CRUD operations for the song queue
│ └── history/ # Endpoints for fetching playback history
├── components/ # Reusable UI components (buttons, cards, modals)
├── hooks/ # Custom React hooks (useSongs, useVotes, useHistory)
├── lib/ # Utility modules (Prisma client, YouTube embed helper)
└── pages/ # Legacy pages (if any)
prisma/ # Prisma schema and migrations
└── schema.prisma
public/ # Static assets (icons, images)
styles/ # Global styles & Tailwind config
README.md # Project documentation