This app will allow a group of friends create a Youtube karaoke playlist in realtime and then play that list from a computer for maxium karaoke party enjoyment.
Prerequisite that are needed:
- text editor of your choice (atom, VSCode, etc.)
- terminal application such as git bash
- Node package manager
Make sure you have git version control installed on your computer.
- Find the green 'Clone or Download' button and copy the link
- Open terminal and type...
Windows
cd desktopMac & linux
cd ~/Desktop- In terminal, clone the project by typing:
git clone https://github.com/dustatron/karaoke-team.git- Navigate to the new folder that was created on your desk:
cd karaoke-team-
Creat a database using Google Firebase, follow along with the instructions Firebase Setup follow steps starting at create a database
-
once your database is created login to your dashboard and click start a new project then name your project a name of your choice in step 2 allow for google analitics and click continue finally select default account for firebase in the dropdown menu and then click create a project.
-
once in your project you'll need to setup the database click the database tab on the left side then click create database
-
select start in production mode then click next, then select the closest region to you and click done
-
once in your project's dashboard click on the settings wheel in the left hand corner
- at the bottom of the page under your apps push the </> button (screen shot bellow)
- name your app a name of your choice and check the box to allow Firebase Hosting then click Register app.
- click through the setup steps that follow but ignore instructions on setup steps in terminal until it brings you back to your settings dashboard. from there navigate to your apps and select the radio button that says Config then copy the text by clicking the copy icon in the corner.
- navigate to root directory of project and open up project with text editor of your choice. then navigate to src/main.js then replace lines 12 through 21 with copied text from step 13, then save the document.
-
go to YouTube API setup page, follow along with the steps on the page to obtain an API key.
-
once you have the API key copy and paste it at the end of line 8 in src/youtube-search-service.js then save document
- In terminal, type:
npm install- after all packages have been installed run the command npm start and this will open the app in your web browser, have fun singing some Karaoke singing with friends.
npm start| Behavoir | Input | Output |
|---|---|---|
| The program will let a user create a party room or join an existing room from their phone or computer | start a room or join a room | user enters room |
| The program will let the user who created a room to give access to others to join their room with a sharable link | a key and room number is created with a link to share | invited users join room |
| The program will let users in a room add songs to a playlist from a youtube search via their own mobile device | user searches "Low Rider" finds & adds "Low Rider" to the playlist | "Low Rider" is added to playlist |
| The program will play videos in the playlist on a central screen | queued video plays | video plays and user sings to their song |
| The program will let users continue to add songs/videos to the end of playlist as long as room is open | user adds "freebird" to playlist | playlist is updated to include "freebird" |
| The program will live update the playlist as users add songs/videos to it and display the updated playlist on their personal device | "freebird" added to playlist | playlist display now includes "freebird" |
| The program will live update the playlist as users edit the playlist order | "Don't Stop Believin" added to playlist and moved to top of playlist | playlist display now shows: 1."Don't Stop Believin" 2."freebird" |
| The program will que up the next video to be played and start it after current video is finished | "Don't Stop Believin" is qued up and played once "Low Rider" has finished | "Don't Stop Believin" starts to play on the big screen |
The software is provided as is. It might work as expected - or not. Use at your own risk.
- HTML - Simple Scaffolding
- JavaScript - Used for interactivity in the page
- jQuery - Used to interact with the DOM
- Bootstrap 4.4 - Used for styling
- webpack
- Sass
- ESLint
- Node.js
- Uglifyjs
This project is licensed under the MIT License - see the LICENSE.md file for details
Copyright (c) 2020 Dusty McCord, Eric Settels, K. Wicz, Josh Hellman & Todd Walraven