Acceptance criteria

• There is an endpoint available for updating video ratings
• The endpoint accepts an appropriate HTTP method
• The endpoint has an appropriate URL
• The endpoint updates the ratings of videos in the database

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.

Link to the coursework

https://github.com/CodeYourFuture/Full-Stack-Project-Assessment

Why are we doing this?

Find the levels 400 (all 400 levels) and break down the work into tickets. Plan out your approach and get cracking.

Maximum time in hours

4

How to get help

Open draft PRs and ask for review, stating clearly where your blocker is.

Work on your project in Study Group class time and get live help from mentors.

How to submit

Find the submission steps and follow them.

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

• All e2e tests for the project are passing

Guidance 🧭

Check the e2e-testing guide for steps on how to set up your

Dependencies

This issue depends on #477 and #476 completing first

Context

For this level, you need to design an endpoint that will list all videos. Endpoint designs are usually separated into the HTTP Request Method type and the route that the endpoint should exist on. For a recap on HTTP Request Methods you can read this guide here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

Endpoint Definition

HTTP Method: GET
Route: /api/videos

Acceptance criteria

• The endpoint successfully connects to the configured database
• The endpoint fetches and responds with all video records from the database
• The endpoint returns a status code of 200

Example

Check https://lvl199--cyf-fsa-solution.netlify.app/api/videos for an example implementation of this issue.

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

• Each video displays its current rating in a visually clear manner (e.g., thumbs up /thumbs down icons, numeric display).
• Users can increase the rating of a video ("thumbs up").
• Users can decrease the rating of a video ("thumbs down").
• A user's rating actions are recorded and persist across sessions.

Example

Check this example Video voter example 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

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)

Link to the coursework

https://github.com/CodeYourFuture/Full-Stack-Project-Assessment

Why are we doing this?

This project requires you to do a lot of reading and finding out where docs are. You will have to do this all the time in your job as a developer. It's a daily task.

Find the levels 300 (all 300 levels) and break down the work into tickets. Plan out your approach and get cracking.

Work on your project during the week, during class day, and in study sessions. Ask for online study sessions with mentors on Slack.

Maximum time in hours

6

How to get help

Open draft PRs and ask for review, stating clearly where your blocker is.

Work on your project in Study Group class time and get live help from mentors.

How to submit

Find the submission steps and follow them.

Acceptance criteria

• Frontend unit tests run on every new pull request

Guidance 🧭

Check Testing guide for steps to make your frontend unit tests run on every pull request.

repo needs .gitignore file with the as below line:

**/node_modules/

along with this change server/node_modules/ needs to be removed as well.

Description

When you return all of the videos from the /api/videos endpoint your API should support an optional query parameter that will change the ordering of the data

/?order=asc

and

/?order=desc

Acceptance criteria

• When you receive asc the videos should be returned in ascending order by the number of votes. i.e. starting with the lowest number of votes.
• When you receive desc the videos should be returned in descending order by the number of votes. i.e. starting with the highest number of votes.
• If no parameter is passed, the order should be by ID.
• Users can select an ordering in the frontend

Example

Please check https://lvl499c--cyf-fsa-solution.netlify.app for an example solution of this level

Description

You pass around your project among your friends, and they like it better than the first version you showed them last week. They are enthusiastic and want to let you know which videos they also liked, and which they didn't! Implement ratings - allowing other users to give your videos a thumbs up or a thumbs down!

User story 👩🏽‍💻

As a user, I want to vote on a video recommendation, so other users will know which videos are the highest recommended

Required issues 🎫

• #473
• #474
• #475

Link to the coursework

https://github.com/CodeYourFuture/Full-Stack-Project-Assessment

Why are we doing this?

This solid walk through of a full stack project is to prepare you for the Launch Module. You will be working in teams and you will need to be able to build features on any part of the stack. Use this time to secure your understanding of the basic concepts you will be applying in your team project.

Team members that do not contribute are removed from Launch Projects.

Maximum time in hours

6

How to get help

Open draft PRs and ask for review, stating clearly where your blocker is.

Work on your project in Study Group class time and get live help from mentors.

How to submit

Find the submission steps and follow them.

How to review

Your project will be reviewed by an independent team of mentors. If you haven't gotten any code review, please post in Slack and get one.

Acceptance criteria

• There is a public URL to reach your backend on the internet
• /health endpoint on your deployed backed responds with "OK"

Guidance 🧭

Deploy your backend on Netlify. This project is set up to work with Netlify, so please follow the Netlify deployment guide to deploy your app. Make sure to read the notes on backend deployment as well.

• client/yarn.lock suggests that Yarn should be used
• server/package-lock.json suggests that NPM should be used

The syllabus only covers the latter, so the CRA app should be migrated over - I think it's just a matter of deleting yarn.lock, npm installing and committing the package-lock.json instead, none of the scripts reference npm/yarn.

Also server/node_modules/ is under version control, we need a .gitignore somewhere.

Dependencies

#477

Acceptance criteria

• There is a public URL to reach your frontend on the internet
• The public frontend URL is available on your Github repo About section. See the guidance below.

Guidance 🧭

If you have set up Netlify deployment in #477 this should now work automatically for the frontend as well. Once you have the url to your deployed frontend, add it to the About section on your Github repo . Paste the URL to your deployed frontend into the website section

Deployed prototype

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

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

exampleresponse.json supposed to be in the root of the project,
as metioned here: 100.md # Static Data
but has been moved to ./client/src/

Acceptance criteria

• The videorec database is deployed on supabase
• The deployed database contains the videos table and at least 2 rows of sample data

Depends on #464

Guidance 🧭

Follow the Supabase deployment guide in the curriculum to register and deploy your database. After finishing the steps make sure you load up the db/initdb.sql

Full-Stack-Project-Assessment

Level 100

1. Videos should be loaded from a local javascript variable containing the data included in exampleresponse.json
   Good

2. For each video, display a React component that contains

   • The videos title - Good
   • An embedded video - Good
   • The number of votes the video has - Good
   • A button that when clicked removes the video - Good

3. On each video submission there should be two buttons

   • "Up Vote" - This increases the vote score when clicked - Good
   • "Down Vote" - This decreases the vote score when clicked - Good - but it goes negative

4. On the page there must be another React component that will add a Video.
   Not working yet

5. Your website must follow accessibility guidelines (see below for more details)
   Not done

Clear code, mostly works. Personally I would have made a component that represented a single video.

Completeness 6/10
Code Style 4/5
Clarity 4/5

Description

You should design your system with error handling in mind. For example if the database cannot be accessed when you call GET /api/videos, then your backend endpoint should return a properly formatted error message with a HTTP 500 error code.

Acceptance criteria

Given a client calls the /api/videos endpoint,
When the server cannot connect to the database ,
Then:

• The server should respond with a 500 status code
• The server should respond with a json object indicating the type of error

Here is an example JSON response:

{ "success": false, "error": "Could not connect to the database" }

Background

In the first week, we will build an MVP - a Minimum Viable Product. This product has the bare minimum of features to demonstrate a concept to an end user. It will likely not be nice, but it can already be shown to your peers to check and comment on. The MVP for the project we are doing is the ability to show a list of pre-defined videos to the user.

User story 👩🏽‍💻

As a user, I want to view a list of video recommendations, so I can work out what to watch next on YouTube

Required issues 🎫

1. •  #485
2. • #464
3. • #476
4. • #463
5. • #462

Example implementation

Here is an example implementation of how this user story could be implemented: https://lvl130--cyf-fsa-solution.netlify.app/

Description

It is a good idea to make sure that your code is formatted based on a single standard throughout your project. There are two packages that can usually help you with that:

• prettier is a formatter that makes sure that your code is formatted the same way throughout. For example all files use tab characters for indenting.
• eslint is a linter that checks the code for common coding mistakes and warns you if it encounters any of them. It can also automatically fix some mistakes.

Acceptance criteria

• Code is formatted using prettier config .prettierrc
• Code is lintted using eslint config .eslintrc

Guidance 🧭

Check the code quality guide for steps on how to format and form

Acceptance criteria

• When a user adds a new video, store the date and time they posted it in the database.
• The date created value is displayed in the frontend

Guidance 🧭

This might require a change to your database schema - you should make sure you can deploy this change without breaking existing videos, the same way the rating system was done.

Example

Check this example implementation to see how this feature could be implemented.

Acceptance criteria

• All frontend unit tests are passing

Useful links 🔗

Check the Testing guide to set up your frontend tests

In files 399.md and 999.md should be something😿

Acceptance criteria

• You have a functional videorec database with title and a src columns
• Your local videorec database is populated with the initial data from initdb.sql.
• You can drop and recreate a local videorec database each time you run initdb.sql
• You can successfully create backups of your database and restore from them.

Guidance 🧭

Check the db setup guide for steps to set up your local database

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

Link to the coursework

https://github.com/CodeYourFuture/Full-Stack-Project-Assessment

Why are we doing this?

200 and 250 are concerned with Databases, so we will do a short workshop in class getting started with Level 200. Come to class prepared by reading the day plan, project files, and writing down your questions.

Share your questions by Friday so mentors can prepare to help you.

Maximum time in hours

6

How to get help

Open draft PRs and ask for review, stating clearly where your blocker is.

Work on your project in Study Group class time and get live help from mentors.

How to submit

Find the submission steps and follow them.

Acceptance criteria

• All backend tests in api.test.js are passing

Guidance 🧭

Check out the testing guide to setup your backend unit tests

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 it should redirect you to the YouTube page for that video

Guidance 🧭

API access from React

Since we are using a monorepo, the API is accessible on the same domain as the frontend. This means you can use calls like fetch("/api/videos") to call the endpoint you created in your backend. You don't need to worry about CORS requirements either.

Checkout this cheat sheet to help you with the types of requests you'll need to be use with fetch: https://www.freecodecamp.org/news/fetch-api-cheatsheet/

Example

Check https://lvl130--cyf-fsa-solution.netlify.app for an example implementation of this issue

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

From Module-Template created by SallyMcGrath: CodeYourFuture/Module-Template#8

Link to the coursework

https://github.com/CodeYourFuture/Full-Stack-Project-Assessment

Why are we doing this?

Before we start we need to describe what we want to achieve. One way to do that is using user stories.

User stories are often expressed in a simple sentence, structured as follows:

As a [persona], I [want to], [so that].

Let's try to define user stories for our MVP:

As a CYF trainee I want to show my favourite videos so my friends know what videos I like
As a friend I want to see my friend's recommended videos so I can watch them myself

You can also break down into a bit more detail:

As a friend I want to see the title of each video so I know what the video is about
As a friend I want to be able to go to YouTube by clicking any of the titles so I can actually watch the recommendation

This is what we will define as the MVP and what we will try to implement during the first week

Maximum time in hours

1

How to submit

Make your user stories as tickets on your project board

How to review

Come back to your user stories after you've completed your project. Do they describe what your project does and why? Use them to write your readme.

Acceptance criteria

• You can run your server locally on port 3100
• The endpoint http://127.0.0.1:3100/health returns OK
• You can access your frontend locally on port 3000.
• The endpoint http://127.0.0.1:3000 returns the web page for the video recommendations

Guidance 🧭

Check the Setup guide for steps on how to set up your local development environment

From Full-Stack-Project-Assessment created by SallyMcGrath: #456

Link to the coursework

https://github.com/CodeYourFuture/Full-Stack-Project-Assessment

Why are we doing this?

This solid walk through of a full stack project is to prepare you for the Launch Module. You will be working in teams and you will need to be able to build features on any part of the stack. Use this time to secure your understanding of the basic concepts you will be applying in your team project.

Team members that do not contribute are removed from Launch Projects.

Maximum time in hours

6

How to get help

Open draft PRs and ask for review, stating clearly where your blocker is.

Work on your project in Study Group class time and get live help from mentors.

How to submit

Find the submission steps and follow them.

How to review

Your project will be reviewed by an independent team of mentors. If you haven't gotten any code review, please post in Slack and get one.