Movie Discovery App

Report a Bug 🙋‍♂️ Request Feature

Live Version Here

Table of Contents

• Live Version Here
  • Table of Contents
• The Project
  • Using the App
• Features
• Run It
  • Prerequisites
  • Setup
  • Available Scripts
    • npm start
    • npm test
• Author
• Contributing
• Show your support
• License

The Project

Your local movie theater is in dire need of attracting new audience. To do this, they're asking you to build a simple web application that allows users to discover new movies and search for them.

The movie theater is requesting the following features for the first version:

• Upon opening the web application, users should be able to see a list of movies suggested by the application and sorted by popularity.
• In the discovery view, add a search bar at the top to allow users to query information about movies. If the search field is empty, show the discovery results.
• Add a rating filter in the form of five stars. When selecting a star, all the stars to the left should be selected as well. If the star clicked is the currently active, disable the filter.
• Upon clicking, a detail view must be shown, displaying more information about the movie.

Using the App

• Discover the most popular movie at the moment on the front page

• Click on specific movie to view full-blown information

• Use the Search bar to find you favorites movies and their information

• Bookmark and use the App at your own pace!

Features

• Using Create React App (CRA)
• Redux and Redux Toolkit
• No Style Framework, only pure CSS (Looking at you Bootstrap...)
• Async Fetch
• React-Router
• Mobile Optimized
• Enviromental Variables for API key

Run It

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template.

Prerequisites

You will need Node.js version 8.0 or greater installed on your system.

Setup

Get the code by either cloning this repository using git

git clone git@github.com:Israel-Laguan/movie-discover.git

... or downloading source code as a zip archive.

Once downloaded, open the terminal in the project directory, and install dependencies with:

npm install

Then start the app with:

npm start

The app should now be up and running at http://localhost:3000 🚀

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Author

Israel Laguan

Email me to israellaguan@gmail.com Connect to my Linkedin Check my GitHub Profile

Contributing

🤝 Contributions, issues and feature requests are welcome! Feel free to check the issues page.

Show your support

🤗 Give a ⭐️ if you like this project!

Icons from:

Icons8 Movie Ticket icon icon by Icons8 Icons made by catkuro from www.flaticon.com Banner by https://www.canva.com

Style: oliver-gomes StarRating: Here

License

📝 This project is licensed under the MIT
Feel free to fork this project and improve it