Movie listing challenge solution for Zone Digital.
https://github.com/zone/frontend/blob/master/challenges/movie-listings.md
- https://material-ui.com/ for fast prototyping and a nice design
- React as base framework
- Redux for state management
- Redux-Thunk for async actions
The React app itself has the following structure
movie-listing-challenge/
README.md
package.json
public/
index.html
favicon.ico
src/
components/
GenreFilter.js
MovieCard.js
RatingFilter.js
Spinner.js
containers/
App/
App.js
Filters/
Filters.js
Movies/
Movies.js
redux/
middleware/
apiMiddleware.js
modules/
filters/
filters.reducer.js
movies/
genres.reducer.js
movies.reducer.js
index.js
styles/
index.css
tests/
- components, containers, redux tests
utility/
api.util.js
index.js
/src/index.js
This is the entry point of the application where we render the /src/containers/App/App.js
component. The App component itself will trigger the getMovies
and getGenres
actions that will trigger TMDb API calls.
The App component will then render /src/containers/Movies/Movies.js
and /src/containers/Filters/Filters.js
containers having movies and genres props passed.
In the end, the Movies and Filters containers will render pure components from /components
folder.
- Verify you have node installed (
node --version
to see output) - Clone the project on your local machine
- Install dependencies using
npm install
- Update
YOUR_API_KEY
from/src/utility/api.util.js
with your TMDb API key - Run
npm start
to start in development mode ornpm build
to build a production ready version
Runs the app in development mode.
Use http://localhost:3000 to see how it looks.
It will run the basic tests that I've created for components, containers and redux modules.
You should see the output in the console.
This step creates a production ready app inside the build
folder.