Design

https://github.com/squirreljuror/api-design-and-styles/blob/master/design-and-style-guide.pdf

Task for Frontend Engineer

The following document describes the requirements, resources and expectations related to the task for the JavaScript Engineer role.

Requirements

The application must meet the following requirements:

Fetch all available cars
Implement pagination with limit of 10
Allow the user to filter the cars by manufacturer or color
Allow the user to sort the car by mileage
Show the details of a selected car
Add/Remove a car to/from the favorites collection using local storage

Technical requirements

Create a SPA using ReactJS
Use redux for application state (optional)
Use react-router-dom to manage routing
Make tests green
Use TypeScript, any types are not allowed
Use react-testing-library for component tests

Resources

For the UI, please use the design and style guide as a visual guide for your application and implement the styles yourself from scratch instead of using a library like Bootstrap or Material UI.

https://github.com/squirreljuror/api-design-and-styles/blob/master/design-and-style-guide.pdf

For the application data, please use following methods:

axios({ url: '/api/cars?page=1&sort=desc&manufacturer=Audi&color=red' }) to fetch cars

{
  cars: [{
    stockNumber: 12345,
    manufacturerName: 'Audi',
    modelName: 'A5',
    color: 'red',
    mileage: {
      number: 223;
      unit: 1;
    },
    fuelType: 'Benzin',
    pictureUrl: '/images/car.svg'
  }],
  totalPageCount: 20,
  totalCarsCount: 100
}

axios({ url: '/api/cars/1' }) to fetch one car by stockNumber

{
  stockNumber: 12345,
  manufacturerName: 'Audi',
  modelName: 'A5',
  color: 'red',
  mileage: {
    number: 223;
    unit: 1;
  },
  fuelType: 'Benzin',
  pictureUrl: '/images/car.svg'
}

axios({ url: '/api/colors' }) to fetch colors

['red', 'green'];

axios({ url: '/api/manufacturers' }) to fetch manufacturers

{
  uuid: '123-231',
  name: 'BMW',
  models: [{
    uuid: '234-1222',
    name: 'A5'
  }]
}

Note: Using of axios or other xhr based library is mandatory. (fetch api is not supported)

Our expectations

The most important things for us when evaluating your solution are:

Make all tests green
Use best practices
Clear code organization and project structure
A well developed UI/UX

Feel free to choose the techniques you feel more comfortable with and the most important thing: Have fun!

izadmehr / react-test