This is an example solution for the project described below.
You can check the deployed projects on the following websites:
- Render deployment example: https://video-recommendation-6ma1.onrender.com/
- Netlify + ElephantSQL deployment example using express.js wrapper: https://video-recommendations-cyf.netlify.app/
- Netlify + ElephantSQL deployment example using native functions: https://video-recommendations-functions.netlify.app/
- Fly.io deployment example: https://video-recommendations-cyf.fly.dev/
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 and deploy Full Stack application.
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.
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 can build a working project without them. However, to make something really impressive you will need to complete as much as you can.
- Level 100
- A core version of the React frontend of the app
- Level 150
- Deploying your application to make it available for others to see
- Level 199 (Optional)
- Stretch goals for the frontend if you have time
- Level 300
- Creating the Node+Express.JS based backend of the application
- Level 350
- Deploying the backend for others to see
- Level 399 (Optional)
- Stretch goals for the backend if you have time
- Level 400
- Integrate the frontend with the backend
- Level 450
- Verifying deployment and making sure your application is available
- Level 499 (Optional)
- Stretch goals for your project if you have time
Here is an example solution for both frontend and backend:
https://video-recommendations-cyf.netlify.app/
Note: You can design the website to look however you like.
You are welcome to use Bootstrap or any other design framework to help you build this app.
Fork this repository and then clone it to your computer.
Progress to Level 100 when you are ready.