https://github.com/icyjoseph/vcc-frontend-code-test
VCC frontend code test
https://github.com/icyjoseph/vcc-frontend-code-test
nextjs react react-ssr react-testing-library
Last synced: 2 months ago
JSON representation
VCC frontend code test
- Host: GitHub
- URL: https://github.com/icyjoseph/vcc-frontend-code-test
- Owner: icyJoseph
- Created: 2023-07-09T20:14:53.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-09T20:16:52.000Z (almost 3 years ago)
- Last Synced: 2025-03-15T03:44:41.390Z (over 1 year ago)
- Topics: nextjs, react, react-ssr, react-testing-library
- Language: TypeScript
- Homepage: https://vcc-frontend.vercel.app/
- Size: 1.37 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Volvo Cars (Global Online Digital)
> This is a solution repository
## 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
### Mobile
The data required to render the design is under `public/api/cars.json` folder. You need to fetch the data from the client side 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 concatenating 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`
## Running the project
- Developed and tested with Node 16 and 18
- Used `yarn@1.22.19`
- For dev mode, `yarn` and `yarn dev` are enough
- For production make sure you have an `.env` file with `CARS_DB_PATH`, as shown in `.env.example`
- Run tests with `yarn test`