CommonShare Car Project

Hello! I'm Borja B, and that's the project for the Common Share technical task.

Linter & Prettier

For a better readability and understanding of the project I added Linter & Prettier into the project.

Command: yarn lint

Routing

The Router is dynamically generated by Nuxt, I decided to keep it like this as it's a very simple project. In case this project scales and have more complexity on routing, I would move it statically to a router.ts

Styling

Decided to go for a straight-forward tailwind approach. However, I keep open the posibility to use some custom Sass if needed. In this case I just use it for importing Figma's font: Plus Jakarta Sans.

Store

Created a Pinia store for managing the cars. Also, I decided to move the fetch's in the actions of that store. It's unit tested with Pinia testing tools.

Search Box

Implemented a re-usable search box with a custom composable which queries the API through the cars store. To avoid performance issues, it's doing debounce over the keyup's. I'm using two utilities from vueuse for showing - hidding. It's fully tested through Vitest.

Pagination

Implemented pagination to load more results and hide the button if reached the limit.

Testing

For me testing in crucial in a project, so I decided to develop it through TDD:

• Unit Tests: provided by Vitest.

• Integration Tests: Vitest + Vue Testing Library I can add Ax if needed.

• E2E: Not provided yet. But I can do it if needed: Nightwatch or Cypress

Tests run over this command yarn test

Web Vitals

Website is optimized for SEO and current Google standards through web vitals - lighthouse.

• The decrease of accessability on the home screen, it's related with the contrast of blues provided on the figma.

Deployment

I added some minor Github CI actions for ensure code passes the correct standards (Build and Tests).

Comments / Suggestions about the project:

• Typescript. Implemented the maximum possible for the time I have. Created a @/models with all the project types.

• I had issues with CORS when doing the pagination & search from the client, but I made It work by moving the requests always on the server side of Nuxt ✅

• If we want to avoid this, we would need to whitelist my domain and get rid of the Cors issue. Anyway it's a good approach if for example we never want to expose an API KEY from the service.

• I didn't do it, but this is a very nice part to implement a caching system through Nitro, for example Redis. That way, our requests for cars (popular, etc), would be much quicker.

• I implemented cache for the car likes.

• I would suggest adding i18n translations and have a folder with the JSON's files. Sync with some external service like Lokalise or Phraseapp.

• I enterily recommend adding some bug-reporting tool like Sentry.

• In this App, ideally there should be a swiper. I didn't do it for the moment (just used some scrollers), just ping me if it's needed and I can create one from scratch.

• There's an improvement for the API. When the car doesn't exist, it should return a 404 error, not a 200 error with a 404 status code on the body - I did a workaround for this.

• A good improvement would be to implement Nuxt/Image. A very great tool for optimizing the performance through the images. Suggest to add new image formats like .webp