Description | Live Demo | The Team | Challenges and Goals | Features | User Stories | Getting Started | How to Run the Tests | How to Run the App | Design Approach | Technologies Used | Code Quality | Continuous Integration

Struggling to find a great movie? Are you spending hours scrolling down Netflix as your eyes glaze over and you become increasingly bored?

Introducing Moovli - a movie suggestion app that allows you to find the best movies from across the world. Moovli allows users to interact with a map and click on any country to see some of best movies available.

The application is deployed to Heroku at this link: https://moovli.herokuapp.com

This was a group project during the final two weeks at Makers Academy. The team was composed by:

• Tuan Nguyen
• Hisham Bokhari
• Andrea Diotallevi
• Daniel Martinez-Gatell

• Build a front-end web application that people would use and have fun playing around with.
• Use and understand React design patterns and its testing frameworks Jest and Enzyme.
• Handle nested asynchronous requests from multiple APIs within a React application.
• Deploy a front-end app to Heroku, given API restrictions for production websites.
• Use Python to scrape data from the internet and save it into a usable JSON format.

• If you go to the Moovli homepage https://moovli.herokuapp.com you will see a map of the world:

• If you click on a country that doesn't have any available movie, the info window shows a useful message to the user:

• If you click on a country that has available movies, you are redirected to the movies page, with the best movies from that country:

• If you click on one of the genre buttons, you can filter the movies by genre:

• If you click on the IMDB link, you are redirected to the IMDB web page of the selected movie:

As a user,
So that I can see all countries,
I'd like to see a map of the World

As a user,
So that I can choose a country,
I'd like to be able to be able to click on a country

As a user,
So that I can see some great movie suggestions,
I'd like to see a list of movies for the country I selected,

As a user,
So that I can recognize each movie,
I'd like to see the title of each movie.

As a user,
So that I can know what a movie is about,
I'd like to see a description of each movie.

As a user,
So that I can know the level of a movie,
I'd like to see the ratings for each movie.

As a user,
So that I can know how old is a movie,
I'd like to see the release date for each movie

As a user,
So that I can return to the home page,
I'd like to be able to use a back button on the movies page.

As a user,
So that I can pick my favorite type of movie,
I'd like to be able to filter the available movies by genre.

As a user,
So that I can read reviews and learn more about a movie,
I would like to see a link to the IMDB page for each movie.

• Clone this repository with git clone [email protected]:AndreaDiotallevi/moovli.git
• Change into the folder with cd moovli
• Install all the dependencies with npm install

To run all the tests type npm test

Start the local server with npm start

The application has four react components and each of them has a clear responsibility:

• App: application main container.

• Home: responsible for showing the homepage title and containing the MapContainer component.

• MapContainer: responsible for showing the map and managing the info window.

• Movies: responsible for listing the best movies for each country and filtering them by genre.

• Main technologies:

  • React: a JavaScript library we used to build the user interface and gather data from external APIs.
  • Google Maps React: a library that includes a helper to wrap around the Google maps API.
  • Python: a general purpose programming language we used for web scraping (see this helper repository).
  • CSS Flexbox: the flexible box layout module makes it easier to design flexible responsive layout structure without using float or positioning.

• External APIs:

  • Google Maps Api: web service we used to show the map on the page and get geographical coordinates from the user click.
  • LocationIQ API: web service we used to get the country information from geographical coordinates.
  • OMDb API: web service we used to get each movie information by title.

• Testing frameworks:

  • Jest: a JavaScript Testing Framework with a focus on simplicity.
  • Enzyme: a JavaScript Testing utility for React that makes it easier to test the React Components' output.

ESLint: tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

CircleCI: tool for automating the development process quickly, safely, and at scale.