Acceptance Criteria

• A Lighthouse accessibility audit is conducted and achieves above 80 on Accessibility.
• The Lighthouse report (HTML) is included in the Pull Request.
• CSS provides clear focus states to visually indicate the currently active control.
• All website controls can be navigated and activated using only the keyboard.

Check out the resources section below to figure out how to implement this requirement.

Guidance 🧭

Lighthouse Accessibility Testing: https://supercooldesign.co.uk/blog/how-to-run-a-lighthouse-audit

Acceptance Criteria

• Users can view YouTube videos directly within the website, without external redirects.
• Videos are embedded using HTML <iframe> tags.

Check out the resources section below to figure out how to implement this requirement.

Guidance 🧭

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

Example solution

Check out this example solution to see how this issue could be implemented

HTTP Method: POST

Route: /api/videos

Acceptance Criteria

• There is a POST /api/videos backend endpoint to facilitate adding videos to the database.
• The endpoint generates and attaches a unique ID to each newly added video.
• The endpoint accepts video data in JSON format (example provided).
• The endpoint responds with a JSON response that includes the generated id (example provided)

Acceptance Criteria

• There is a user-friendly form for capturing new video recommendations
• The form supports fields for video titles and YouTube URLs

Deployed prototype

Check the deployed prototype to see how this issue could be implemented

Acceptance criteria

• On page load, the website should display a list of video recommendations
• For each video recommendation:
  • It should show the video’s title
  • If you click on the title it should redirect you to the YouTube page for that video

Deployed prototype

Check the deployed prototype to see how this issue could be implemented

Description

HTTP Method: DELETE

Route: /api/videos/{id}

This endpoint is used to delete a specific video from the database. DELETE endpoints don’t require a request body, and they don’t even need to return a response body! While you can return a confirmation message: however, if you don’t want to, you can use the HTTP status code 204 to tell the client that the action was successful, but there is no response body.

To make the endpoint nicer, you can also change it so if you try to call this endpoint on an id that doesn’t exist, the system may respond with a HTTP 404 status code designating that the video did not exist in the first place or was already deleted.

Acceptance Criteria

• A DELETE /api/videos/{id} backend endpoint is implemented to remove specific videos.
• The endpoint handles non-existent video IDs gracefully, returning an appropriate HTTP status code (e.g., 404).
• The endpoint returns a confirmation message or uses an HTTP status code 204 to indicate successful deletion.

Background

You are now starting to add a lot of videos to your site. You soon realise your recommendations have grown hugely and some of the videos you don’t really want to recommend any more. This is a good time to implement a new feature to allow them to be deleted!

User story 👩🏽‍💻

As a user, I can delete any video recommendation, so I keep track of the video recommendations that matter the most

Required issues 🎫

• #467
• #468

Deployed prototype

Check the deployed prototype to see how this user story could be implemented

Background

Your website is getting better and better every day. You feel good and decide to watch some tutorial videos on YouTube. One of them catches your eye and you decide to add it to your video recommendations. However, you realise that currently the only way to add new items is to edit the database directly. That’s not too convenient, so you set up to change this! Enhance your website’s functionality by enabling users to add video recommendations directly and improving user experience.

User story 👩🏽‍💻

As a user, I want to add new videos, so I can save new video recommendations for later viewing

Required issues 🎫

• #470
• #471