Skip to content

Latest commit

 

History

History
116 lines (74 loc) · 4.8 KB

100.md

File metadata and controls

116 lines (74 loc) · 4.8 KB

Level 100 - Week 1 - Frontend

By the end of this level you will have a React website that

  • Fulfils all of the requirements in the ReadMe
  • Uses static data for the website

Required Features

  1. Videos should be loaded from a local javascript variable containing the data included in exampleresponse.json
  2. For each video, display a React component that contains
    • The videos title
    • An embedded video
    • The number of votes the video has
    • A button that when clicked removes the video
  3. On each video submission there should be two buttons
    • "Up Vote" - This increases the vote score when clicked
    • "Down Vote" - This decreases the vote score when clicked
  4. On the page there must be another React component that will add a Video.
    • It should include fields to add a
      • Title
      • Url
    • When a button is clicked the video should be added to the list
  5. Your website must follow accessibility guidelines (see below for more details)

Project setup

Don't forget to install the requirements after checking out the project:

npm install

Once this is done you will be able to launch the website with the following command:

npm run dev

The code you put under client/src will then be accessible on http://localhost:3000

Static Data

By static data, we mean that we will use a javascript variable to hold the data that we would expect to get from the API.

You can find an example of this data in exampleresponse.json in this directory.

Design

You are welcome to use any design framework to help you build this app, including building it from scratch.

If you wish to look at some frameworks here are some examples:

Sample Solution

Here is an example solution of the frontend:

https://video-recommendations-cyf.netlify.app/

Note: You can design the website to look however you like.

Accessible Guidelines

  1. Run a Lighthouse test on your prototype in Chrome
  2. Follow the suggestions to fix the accessibility errors until your score is green. Save your result as HTML and include it in your Pull Request to show your work.
  3. Add a title to your iframe and make the value the title of the video
  4. Add a focus state with CSS to highlight what control is active
  5. Tab through your page and make sure you can click all the controls without using a mouse (edited)

Embedding Videos from YouTube

Instructions about how to embed a YouTube video can be found here

https://support.google.com/youtube/answer/171780?hl=en

You can embed videos from YouTube by using a HTML feature called iframes.

<iframe width="560" height="315" src="https://www.youtube.com/embed/{VIDEO_ID_GOES_HERE}" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

Place that HTML snippet in a React component and replace "VIDEO_ID_GOES_HERE" with the ID of the video you want to display to embed a video.

The ID of a video can be found by looking at the URL of the video. For example, for the video

https://www.youtube.com/watch?v=FUeyrEN14Rk

The ID would be

FUeyrEN14Rk

Monorepo

The project is set up to run as a monorepo, where both the client's and the server's code are in the same git repository. When doing monorepos there are some boilerplate code required to make sure both the frontend and the backend application can work at the same time and on the same URL. To kickstart your development we have set up this boilerplate code for you already. Feel free to look at the code, but generally you won't need to edit them at all if you follow the proposals on this guide.

If you are interested you can read more about what they do in the following places:

For Level 100 you only need to do changes in the client/src directory. The rest of the code are either the boilerplate setup mentioned above, or will be used for later levels.

Before you commit your changes

Read this article on .gitignore. We have set up a basic .gitignore file for you. Make sure to update it to .

Babel

Babel is a JavaScript converter that allows you to write code in the latest version of JavaScript, even if it is not yet fully supported in the environment, for example you have an older version of Node.JS. The project is already set up to use babel using the .babelrc files in the repository, allowing you to use modules, including import statements in both the backend and frontend codebase.