Muzak

React powered YouTube player

Comment

Muzak

responsive-view

Link to Live Site

Link to GitHub Repository

Description

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.

Wireframes

The following wireframe was created to guide this project:

wireframe

You can also view it as a PDF here

Features

  1. Video Search: Search for videos by title or video ID

  2. Video Player: Play videos by video ID or title

  3. Video List: Muzak fetches up to 5 videos from YouTube and displays them in a list alongside the main video player

  4. 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.

Technologies

Deployment

Credits

  • 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=_blank attribute.

  • 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.

Acknowledgements

  • This project was created for the Blingby junior developer programming test.
Share this project:

Updates