https://github.com/volvo-cars/god-frontend-code-test

A developer test assignment used as basis for candidate interview and evaluation.
https://github.com/volvo-cars/god-frontend-code-test

Last synced: 7 days ago
JSON representation

A developer test assignment used as basis for candidate interview and evaluation.

• Host: GitHub
• URL: https://github.com/volvo-cars/god-frontend-code-test
• Owner: volvo-cars
• Created: 2020-10-22T12:07:19.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-03-13T19:36:32.000Z (10 months ago)
• Last Synced: 2024-04-14T08:40:11.110Z (9 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.18 MB
• Stars: 72
• Watchers: 5
• Forks: 160
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Volvo Cars (Global Online Digital)

## Front-end coding test (React)

Our team's designer has come up with a new design to show our latest and greatest recharge cars on the website.

Here is how the design look like for desktop and mobile (files are stored under `docs` folder)

### Desktop

![ProductListDesktop](./docs/ProductList-Desktop.png)

### Mobile

![ProductListDesktop](./docs/ProductList-Mobile.png)

The data required to render the design is under `public/api/cars.json` folder. You need to fetch the data and render it in the browser. The data looks like this:

```json

[

  {

    "id": "xc90-recharge",

    "modelName": "XC90 Recharge",

    "bodyType": "suv",

    "modelType": "plug-in hybrid",

    "imageUrl": "/images/xc90_recharge.jpg"

  }

]

```

The product owner is telling you that you can generate the links to the learn and shop pages of each car by concatating the `id` of the car to the learn (`/learn/`) and shop (`/shop/`) urls.

Two extra SVG icons are also provided by our designer which are stored under `docs` folder.

## Requirements

- The project is bootstraped using [Next.js](https://nextjs.org/).

- Browser support is modern ever-green browsers.

- Implement this design using React and Typescript.

- Accessibility is important.

- Code Structure and reusablity is important.

## Bonus Points:

- If you use our design system component library, [VCC-UI](https://vcc-ui.vercel.app/)

- If you add a filter bar on the top to filter cars by `bodyType`

## Submission

Clone this repository to get started. Due to a number of reasons, not least privacy, you will be asked to zip your solution and mail it in, instead of submitting a pull-request. In order to maintain an unbiased reviewing process, please ensure to keep your name or other Personal Identifiable Information (PII) from the code.