Welcome To Serenade 🎤

A real-time virtual karaoke platform where you can sing and view along with anyone from the comfort of your own home ♪🏠

To run locally, follow these steps:

cd frontend && npm run dev

Outline of the project

├── README.md├── README.md
├── backend
│   ├── api
│   │   ├── index.js
│   │   ├── room.js
│   │   ├── user.js
│   │   └── video.js
│   ├── auth
│   │   └── index.js
│   ├── db
│   │   ├── db.js
│   │   ├── index.js
│   │   └── models
│   │       ├── index.js
│   │       ├── room.js
│   │       ├── user.js
│   │       └── video.js
│   ├── index.js
│   ├── package-lock.json
│   ├── package.json
│   └── seed.js
├── frontend
│   ├── _redirects
│   ├── index.html
│   ├── package-lock.json
│   ├── package.json
│   ├── postcss.config.js
│   ├── public
│   │   └── vite.svg
│   ├── src
│   │   ├── App.css
│   │   ├── App.jsx
│   │   ├── Context.tsx
│   │   ├── PeerContext.tsx
│   │   ├── assets
│   │   │   ├── logo-footer.png
│   │   │   ├── logo-name.png
│   │   │   ├── logo.png
│   │   │   └── react.svg
│   │   ├── components
│   │   │   ├── Footer.jsx
│   │   │   ├── Home.jsx
│   │   │   ├── JoinRoom.jsx
│   │   │   ├── Karaoke
│   │   │   │   ├── ChatBox
│   │   │   │   │   ├── ChatBox.css
│   │   │   │   │   └── ChatBox.jsx
│   │   │   │   ├── Participants
│   │   │   │   │   └── Participants.jsx
│   │   │   │   ├── Queue
│   │   │   │   │   ├── MusicCard.jsx
│   │   │   │   │   ├── Queue.css
│   │   │   │   │   └── Queue.jsx
│   │   │   │   ├── Room
│   │   │   │   │   └── Room.jsx
│   │   │   │   ├── Search
│   │   │   │   │   ├── Search.css
│   │   │   │   │   └── Search.jsx
│   │   │   │   ├── UserVideo
│   │   │   │   │   ├── SingleUserVideo.jsx
│   │   │   │   │   ├── User.jsx
│   │   │   │   │   ├── UserVideo.css
│   │   │   │   │   └── UserVideo.jsx
│   │   │   │   └── Video
│   │   │   │       ├── Video.css
│   │   │   │       └── Video.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── NavBar.jsx
│   │   │   ├── Profile.jsx
│   │   │   ├── ShareButton
│   │   │   │   ├── ShareButton.css
│   │   │   │   └── ShareButton.jsx
│   │   │   └── Signup.jsx
│   │   ├── images
│   │   │   └── share.png
│   │   ├── index.css
│   │   ├── main.jsx
│   │   └── redux
│   │       ├── Room
│   │       │   ├── Room.actions.js
│   │       │   ├── Room.reducer.js
│   │       │   └── Room.types.js
│   │       ├── User
│   │       │   ├── User.action.js
│   │       │   ├── User.reducer.js
│   │       │   └── User.types.js
│   │       ├── Video
│   │       │   ├── Video.action.js
│   │       │   ├── Video.reducer.js
│   │       │   └── Video.types.js
│   │       ├── root-reducer.js
│   │       └── store.js
│   ├── tailwind.config.js
│   └── vite.config.js
├── package-lock.json
├── package.json
└── run.sh
├── backend
│   ├── api
│   │   ├── index.js
│   │   ├── room.js
│   │   ├── user.js
│   │   └── video.js
│   ├── auth
│   │   └── index.js
│   ├── db
│   │   ├── db.js
│   │   ├── index.js
│   │   └── models
│   │       ├── index.js
│   │       ├── room.js
│   │       ├── user.js
│   │       └── video.js
│   ├── index.js
│   ├── package-lock.json
│   ├── package.json
│   └── seed.js
├── frontend
│   ├── _redirects
│   ├── index.html
│   ├── package-lock.json
│   ├── package.json
│   ├── postcss.config.js
│   ├── public
│   │   └── vite.svg
│   ├── src
│   │   ├── App.css
│   │   ├── App.jsx
│   │   ├── Context.tsx
│   │   ├── PeerContext.tsx
│   │   ├── assets
│   │   │   ├── logo-footer.png
│   │   │   ├── logo-name.png
│   │   │   ├── logo.png
│   │   │   └── react.svg
│   │   ├── components
│   │   │   ├── Footer.jsx
│   │   │   ├── Home.jsx
│   │   │   ├── JoinRoom.jsx
│   │   │   ├── Karaoke
│   │   │   │   ├── ChatBox
│   │   │   │   │   ├── ChatBox.css
│   │   │   │   │   └── ChatBox.jsx
│   │   │   │   ├── Participants
│   │   │   │   │   └── Participants.jsx
│   │   │   │   ├── Queue
│   │   │   │   │   ├── MusicCard.jsx
│   │   │   │   │   ├── Queue.css
│   │   │   │   │   └── Queue.jsx
│   │   │   │   ├── Room
│   │   │   │   │   └── Room.jsx
│   │   │   │   ├── Search
│   │   │   │   │   ├── Search.css
│   │   │   │   │   └── Search.jsx
│   │   │   │   ├── UserVideo
│   │   │   │   │   ├── SingleUserVideo.jsx
│   │   │   │   │   ├── User.jsx
│   │   │   │   │   ├── UserVideo.css
│   │   │   │   │   └── UserVideo.jsx
│   │   │   │   └── Video
│   │   │   │       ├── Video.css
│   │   │   │       └── Video.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── NavBar.jsx
│   │   │   ├── Profile.jsx
│   │   │   ├── ShareButton
│   │   │   │   ├── ShareButton.css
│   │   │   │   └── ShareButton.jsx
│   │   │   └── Signup.jsx
│   │   ├── images
│   │   │   └── share.png
│   │   ├── index.css
│   │   ├── main.jsx
│   │   └── redux
│   │       ├── Room
│   │       │   ├── Room.actions.js
│   │       │   ├── Room.reducer.js
│   │       │   └── Room.types.js
│   │       ├── User
│   │       │   ├── User.action.js
│   │       │   ├── User.reducer.js
│   │       │   └── User.types.js
│   │       ├── Video
│   │       │   ├── Video.action.js
│   │       │   ├── Video.reducer.js
│   │       │   └── Video.types.js
│   │       ├── root-reducer.js
│   │       └── store.js
│   ├── tailwind.config.js
│   └── vite.config.js
├── package-lock.json
├── package.json
└── run.sh