Preview: http://moviesreview2018.s3-website.eu-west-2.amazonaws.com/#/searchpage
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
yarn
yarn dev
Your build version will be under dist
folder.
yarn build
yarn test
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.
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.
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.
Most of components are stateless component, as we only need to render the view with data, no complex logic and inner state management needed.
Used react-infinite-scroller
component for infinite scroller feature.
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.