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
- ✍️ Making Your Own Changes
- 👤 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.
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!
| Command | Description |
|---|---|
npm install |
Install project dependencies |
npm start |
Build project and open web server running project |
npm run build |
Builds code bundle with production settings (minification, uglification, etc..) |
npm test |
Test the the created test cases |
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://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!