Giter Club home page Giter Club logo

movie-trends's Introduction

Movie Trends

General Overview

Get to know the top 20 movies worldwide through this web application for mobile and desktop, which connects to the API of "The Movie Database (TMDB)" (https://www.themoviedb.org/) to obtain the data of the classification. The application also allows you to find movie information by categories, by relationships and by searching through a text input.

To use the App click here: https://darioparejadiaz.com/movie-trends/

Technical overview

  • This project is built as a single page aplication (SPA) with vanilla JavaScript.
  • Each view of the project is controled by the display property (block or none) according to the case
  • The HTTP requests to TMDB were made with the bult-in fetch API

App views

Home view

The home view presents the search bar, a preview of the top 20 trending movies in horizontal scroll and the categories list.


Trends view

When you click on "more" button in trends section, it display a full view of the top 20 trending movies. You can click on each image to get detailed information about the movie you are interested in.


Category view

When you click on a category of the category list presented in the home page, you can see a full view with 20 movies that belong to the referred categogy; again you can click on every image to display full information about the movie.


Movie details view

This is the view with full information about the movie you selected, there you can see the rating, a short description, the categories the movie belongs and a horizontal scroll list of related movies.


Movie search view

You can type a movie name in the search bar to get specific movies that match with the name you entered.


Invalid search view

If you type something that does not match with any movie in the data base of TMDB, you get message indicating that there was no successful in the searched name.

movie-trends's People

Contributors

darioparejadiaz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.