CS50’s Web Programming with Python and JavaScript

FINAL PROJECT: PELICULISTAS

Welcome to my final project for Harvard's CS50 Web! Peliculistas is an app made with love by me and some help from Python, Django and Javascript :)

Watch video: https://www.youtube.com/watch?v=Cq3plmYexgM&t=1s

Visit online (updated version): http://peliculistas.herokuapp.com/

Technologies:

1. Python/Django
2. Javascript
3. HTML
4. CSS

Specification:

• Peliculistas is a web app where visitors and users will be able to check and look for movie info (provided by the moviedb API) and registered users will have the priviledge of saving movies on their personal movie board, create personalized watchlists, post reviews or rate movies.

• To bring the data from moviedb.org I use Javascript so the app prints all the information on the index page or can be displayed by a 'query' by the user aswell.
• Once we have that data, users take action by 'saving' films, so they are copying all that information to our own database and now is available for users to take more interesting and complex actions like: post reviews, rate movies or create personalized watchlists with movies.
• To accomplish this I created 5 Django models: user, comments, rating, watchlist and movie.

Project description

1. Index:
   • Users will see three different movie rankings:
     1. Now Playing: it shows 20 first results but users can load more when they reach the bottom of the page.
     2. Trending Movies: ranking of 20 first trending movies.
     3. Top Rated Movies: ranking of 20 top rated movies.

2. Search: from navbar users will be able to type any movie and get the related results:

3. Movie Info: When the user clicks on any movie card is taken to a new page where he can see all the extended information about that movie:

On this page, members will be able to take special actions like: - Save Movie: When members click on 'Save', the movie is automatically saved on the app database and the user's movie board and then, he will be able to add the movie to their personalized watchlists aswell. - Rate Movie: Members can rate movies so they will be able to see the global rate (brought by the API) and the internal rate, calculated by the members ratings. Users can vote only one time per movie, otherwise they will see a message like this: - Post a review: members can add reviews, and also edit them or delete them.
- Similar Movies: clicking on the button 'similar movies' user will see a selection of similar movies on the same page, requested by an API call with Javascript. They can close this view by clicking on the 'X' on the right.

4. Personal movie board: When members click on their name (link situated on the navbar) they are taken to their personal movie board. Here the user will see all movies he saved.

5. Watchlists: From this section, users can create new lists to organize their movies, access their lists or delete them.

6. Whatchlist: by clicking on each list's title user will see all movies inside that particular list and he will be able to delete movies from it by clicking on the 'x'.

Responsive Design: