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/

From Full-Stack-Project-Assessment created by SallyMcGrath: CodeYourFuture/Full-Stack-Project-Assessment#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.

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.

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.