https://github.com/squirreljuror/api-design-and-styles/blob/master/design-and-style-guide.pdf
The following document describes the requirements, resources and expectations related to the task for the JavaScript Engineer role.
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
- 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
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)
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!