MovieFinder is a seamless web application that enables user to view the movies that are on showing, to elastically search the movie, to view the movie and cinema details and to navigate the user to the specific cinemas.
Visit our website via this link. For better experience, we recommend to use Chrome.
You can also watch the demo video on youtube.
To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
# Clone this repository
$ git clone git@github.com:peteryoungy/movieFinder.git
# Go into the repository
$ cd movieFinder
# Install dependencies
$ npm install
# Run the app
$ npm start- Sign up and log in
Users should register an account when they visit MovieFinder! for the first time and then log in with the new account.
- Home Page
Users will be shown the home page no matter whether they have logged in. Anonymous users will get films now showing while logged in users will get movie recommendation additionally. Anonymous users can still search movies. However, when they click on any of the movie card to get detail information, they are forced to log in first.
- Search
We support search function by movie name, genres, actors.
- Movie Detail Page
Movie detail page lists all the information about that movie as well as 3 nearest cinemas that are showing the movie now.
Users can mark a movie as "liked" when clicking the "heart" icon at the top right corner of the page. Movie recommendation is determined by liked movies.
- View Liked Movies
Users can also view their likes when clicking the "Likes" button below the Account menu.
- Cinema Detail Page
Users can view all the showtime of that cinema in future 3 days.
Users can also click the "View on Google Map" button to get route suggestions.
View our clickable prototype on Figma.
Limited by the thrid-party API key, we provide a demo version of code which is nearly a pure front end project except for the user authentication and search part. The website is supported by the demo code. You can find the code here.