Muzak is a simple video player that uses the YouTube Data API to fetch & stream videos by video ID or title. Muzak was built to demonstrate the developer's knowledge of the React framework, as well as the ability to fetch data to and from a given API.
The following wireframe was created to guide this project:
You can also view it as a PDF here
-
Video Search: Search for videos by title or video ID
-
Video Player: Play videos by video ID or title
-
Video List: Muzak fetches up to 5 videos from YouTube and displays them in a list alongside the main video player
-
Video ID Logs to Console: Due to time constraints, Muzak only logs video ID's to the console at this point in time. To view the video ID's, open the console and click on a video from the list.
- React
- Create React App
- npx
- npm
- Node.js
- Bootstrap 5
- HTML
- CSS
- Git
- GitHub
- Netlify
- Font Awesome
- Balsamiq
-
Muzak was deployed with Netlify. To see the live site, click the link below:
-
Youtube API - Documentation used to obtain information about using the YouTube API
-
Google Developer Console - The Google Developer Console was used to obtain the YouTube Data API key.
-
Font Awesome - Font Awesome was used to create the icons used in the Muzak application.
-
Adobe Fonts - Adobe Fonts was used to style the text content in the Muzak application.
-
Boompositive - Was used to brainstorm the app name, Muzak.
-
HTML Standard was used to obtain information about repairing security vulnerabilities in the
target=_blankattribute. -
The API Key was obtained from the Google Developers Console Google Developers Console.
-
Balsamiq was used to create the wireframes for the Muzak application.
-
Netlify was used to deploy the Muzak application.
-
NPM was used to install dependencies and packages for the Muzak application.
-
Create React App was used to create the Muzak application.
- This project was created for the Blingby junior developer programming test.