Dependencies

https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/issues/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 https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/issues/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

• 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

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

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

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

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" }

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

Dependencies

This issue depends on https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/issues/477 and https://github.com/CodeYourFuture/Full-Stack-Project-Assessment/issues/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

• 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

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/