Skip to content
React + Redux App that uses TheMovieDb api
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.babelrc
.env
.gitignore
README.md
SetupTests.js
gulpfile.js
jest.config.js
package.json
screenshot.png
webpack.build.config.js
webpack.dev.config.js
yarn.lock

README.md

Movie Reviews

Preview: http://moviesreview2018.s3-website.eu-west-2.amazonaws.com/#/searchpage

Screenshots

Screenshot

To fast install dependences, I recommend to use yarn. Otherwise, you can use npm run instead yarn.

For example: npm i && npm run dev npm run test npm run build

Install

yarn

Start

yarn dev

Build

Your build version will be under dist folder.

yarn build

Test

yarn test

Dynamic page routing

The project able to generate routes base Pages/index.js file, as long as creating new page under Pages folder, and export it in Pages/index.js, the Libs/RouterWrapper will generate routes. Please refer AppContainer.js file about dynamic routing.

State Management

There are two reducers in this project, search reducer for storing fetched data from api, and app reducer to store application local data, such as favourites list, footer information, nav items. Here is another implement without using redux.

Services

MovieService.js is a api wrapper that fetch data and put them into redux store, once redux store update, all view layer where subscribed the state, will also trigger re-render. You can wrap tv show api by extending the services. For example: Simply create a new file call TvService.js, and wrap the api and put them into store.

Components

Most of components are stateless component, as we only need to render the view with data, no complex logic and inner state management needed.

Infinite Scroll

Used react-infinite-scroller component for infinite scroller feature.

CSS

The stylesheet are following BEM naming convention, I don't have much time to create utilities css class, but I would really love to implement flexbox base css grids system.

You can’t perform that action at this time.