https://github.com/elforastero/a1-expert-javascript-developer
https://github.com/elforastero/a1-expert-javascript-developer
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/elforastero/a1-expert-javascript-developer
- Owner: ElForastero
- Created: 2019-11-29T17:53:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T18:43:59.000Z (over 3 years ago)
- Last Synced: 2025-02-14T04:26:36.845Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 3.55 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```javascript
{
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
```javascript
{
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
```javascript
['red', 'green'];
```
`axios({ url: '/api/manufacturers' })` to fetch manufacturers
```javascript
{
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!_