xdossantos / netflix-clone

Netflix Clone to support students doing final challenges

Brief

Create a Netflix Clone

Netflix Clone to support students doing final challenges

Using what you have learned about the Vue framework and APIs, create a Netflix Clone app solely focused on Vue and its functionality. Make use of the HTML, CSS and JavaScript you've acquired from the previous courses. You must make effective use of Vue's Object-Oriented Programming system to build your application, as a result, plan it thoroughly before you start coding.

Here are endpoint URLs for you to use, in order to display the list of movies on your Netflix application, as well as the list of movies in the watchlist:

Watchlist Endpoint (accepts a GET, POST & DELETE request): https://project-apis.codespace.co.za/api/list (when you want to POST or DELETE in this endpoint, you simply include the 'movie_id' property with the id of the movie you would like to add or remove from this endpoint) Movies Endpoint (only accepts a GET request): https://project-apis.codespace.co.za/api/movies

Using either a fetch or Axios function, utilize every property within these two endpoints to help you dynamically display the content of the movies on your webpage. The focus of this app is to have you create an app that is just as functional and as good looking as the Netflix app, ensure you tick off the following features:

Ensure that the landing page looks like the Netflix landing page Allow users to add and delete movies from the watchlist Have a max of 20 movies on the watchlist Watchlist movies remain in place even after page refresh Include a coming soon banner to the top of all movies that have a property of coming soon equal to 1 Set a reminder of when to watch a movie that is coming soon (be creative) Search a movie by name or actor's name There is no need to include a login page, but we won't stop you if you do

Bonus:

Filter movies by their genre or most recent release On hover play a movie's trailer

The above are just a few features that Netflix entails, depending on how far you get with the above features before the project due date, feel free to add any other features which you feel will be useful.

Remember to commit and push regularly as we will be looking at your project's GitHub history.

Think about what would make an app such as this useful for yourself and what will take your project above and beyond the brief within a realistic timeframe. If you don't find your own app particularly useful, chances are nor will its users!

For some design inspiration, simply google, "NetFlix landing page images" or if you are fortunate enough to actually have Netflix or know somebody that has it, then utilize it for something more useful than watching movies or series on it.

Good luck!