Web App created by Steven Jack Chung
Project created using TheMovieDB API and ReactJS & Redux

‎ ‎ ‎ ‎

• 🎬 About Movie Finder
• ⚒️ Built With React & Redux
• 🟢 Live Demo
• 🖥️ Setup
  • Requirements
  • Installation
  • Run Movie Finder
• ✍️ Making Your Own Changes
  • Available Commands
  • Writing Code
  • Creating env variables
  • Testing Code
  • Deploying Code
• 👤 Author
• 🤝 Contributing
• ⭐ Show your support

Movie Finder is a movies catalogue where you can find all the popular, top rated, and upcoming movies. You can browse and filter all the movie available as well as finding all basic information of each move in the listing. It was build with ReactJS & Redux and The MovieDB was the API used to retrieve all information for the movies catalogue.

ReactJS

Redux

Netlify

Axios

Internet Browser (Chrome, Firefox, Opera, etc)

Git for version control.

Node.js is required to install dependencies and run scripts via npm.

After installing the tools required, go ahead and clone this repository by using Git commands.

    git clone https://github.com/jcy2704/movie-finder.git

Or you can also download this repository and access it with navigation commands.

    cd /path/to/repository/movie-finder

To be able to run the web app smoothly you need to install Node dependencies by typing the following command on your terminal

    npm install

Now you are good to go!

Now that you've installed the repository correctly. Go ahead and test it out by running the following command on the terminal

    npm start

This command will open a localhost:3000 server where it will be running the web app until you close the server by using the key combo CTRL + C on the terminal.

And there you are running the app.

Enjoy!

After cloning the repo, run npm install from your project directory. Then, you can start the local development server by running npm start.

After starting the development server with npm start, you can edit any files in the src folder and webpack will automatically recompile and reload your server (available at http:https://localhost:3000 by default).

To be able to create your own environmental variables you need to create a .env file in the root of the project.

You need to also name the variable with the follow prefix REACT_APP_.

For example,

  // .env

  REACT_APP_API_KEY=1234567
  REACT_APP_API_URL=https://api.example.com/

To test your code, or changes, you need to create test cases for those. You can visit on the internet to learn how to create your test cases. After you create the cases, you can just run the test command on the terminal npm test and check if all test pass. If not then you need to fix your test cases or fix your code.

This project is deployed to Heroku, but you can use Netlify or other platforms you like.

For Heroku deployment we you can enter each of the following commands.

    heroku create your-app-name --buildpack mars/create-react-app

    // you can remove 'your-app-name' if you don't know what name to put


    git push heroku master

    // if you are deploying the project from the master branch


    git push heroku your-branch:master

    // if you are deploying from a branch different from master


    heroku open

After you deploy to Heroku, you need to go to the dashboard and create the environmental variables just like you did before in the .env, for Heroku.

You can visit the following link to learn how to add it.

And there you go! You have your app deployed to Heroku.

👤 Steven Jack Chung

• GitHub: @jcy2704
• Twitter: @yiak_
• LinkedIn: Steven Jack Chung

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Give a ⭐️ if you like this project!