amit-btc / cars

React & Redux Pagination, filter and sort with router.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Clone the application and run:

cd auto1 && yarn start

cd mock-server && yarn start

Main features :

  1. List all available cars
  2. Filter by manufacturers and colors
  3. Sort by Mileage
  4. View Details of each car
  5. Add/Remove to favourites
  6. Navigate by router (Pages/Details of car/404)

Explanation: Manufacturers and colors list are in global state (redux store) as their values affect the list of cars. The list of cars are manipulated in local state of <CarsBlock />.

There is React Router to handle different routes like: http://localhost:3000/cars?page=15 http://localhost:3000/cars/:stockNumber http://localhost:3000/yeah (404)

Note : StockNumber is randomly generated on every instance of yarn start of mock server. This will affect the localStorage, so make sure to keep the server on.

Unit test cases for reducers, actions and stateless components are in tests folder.

App: App

Test Coverage: TestCoverage

About

React & Redux Pagination, filter and sort with router.


Languages

Language:JavaScript 85.6%Language:CSS 10.4%Language:HTML 4.0%