Video Recommendation App

Screencast.from.21-12-23.23.47.18.webm

Front-end: https://afsha-youtube-video-storage.netlify.app/

Back-end: https://video-storage.onrender.com/videos

Background

Before you continue to final projects we have to make sure that you can meaningfully contribute to a technical project.

This means that we need to be sure that you can create a Full Stack app.

Challenge

In this project you will be building a project that fulfills the following User Stories

• As a user, I want to be able to view a list of all YouTube videos posted on the site
• As a user, I want to be able to post videos that I like from YouTube to my website.
• As a user, I want to be able to delete videos from the website that I no longer like.
• As a user, I want to be able to watch the videos embedded in the website.
• As a user, I want to be able to "Up Vote" a video if I like it.
• As a user, I want to be able to "Down Vote" a video if I dislike.

You don't need to worry about storing the video content itself - we'll rely on YouTube for this.

Levels

This project is split into several levels that you should complete each week of the three week project.

You can find each of the levels split into separate files, linked below.

Note: Some of the levels are optional which means that you will build a working project without them. However, to make something really impressive you will need to complete as much as you can.

Week 1 - Front End

• Level 100
  • A core version of the React front end of the app
• Level 199 (Optional)
  • Stretch goals for the front end if you have time

Week 2 - Back End (without Database)

• Level 200
  • A core version of the Node + Express back end of the app
• Level 250
  • Connect your Front End and Back End together
• Level 299 (Optional)
  • Stretch goals for the back end if you have time

Week 3 - Back End (with Database)

• Level 300
  • Integrate the back end with a database
• Level 399 (Optional)
  • Stretch goals for the database if you have time
• Level 999 (Optional)
  • More optional goals for if you have time

Sample Solution

Here is an example solution of the Front End:

https://vid-rec2.netlify.app/

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

Here is an example solution for the Back End:

https://video-rec.herokuapp.com

Design

You are welcome to use Bootstrap or any other design framework to help you build this app.

Getting Started

Fork this repository and then clone it to your computer.

Progress to Level 100 when you are ready.