/CarSearch

CarShop Front-End Developer Exercise

Primary LanguageJavaScript

carsearch

From the CarShop Front-End Developer Exercise @ https://github.com/robheritage/carshop-dev-test

Outline

  • ES6
  • Serve or build using instructions below.
  • All code as typed is readable (unminified) in this repo.
  • No scaffolding or boilerplate templates.
  • No out-of-the-box plugins (except bootstrap styling).
  • Development choices explained below.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

CarSearch

An SPA that lists/displays vehicles using the sample API (could fit any car database).

Users can filter the results based on preferences, by the following means:

  1. Type to search - As the user types into the search fields the list is filtered by the search query (case-insensitive). This the main refining feature. examples:

    • As the user types the letter 'd', the list refines to makes/models with the letter 'd' in them (Ford, Audi).
    • The user may type 'Audi' to refine the search to one make of vehicle.
    • likewise typing 'Ka' refines the search to only one model of vehicle.
    • Should the search query amount to an unfound vehicle, an apology and option to reset the search is presented in lieu of any search results.

  2. Search Make by tag - Tags are generated by the list of car make/model options found in the database. On click, the selected tag in input into the type search box. This quickly refines the search without the user needing to type. Tags for vehicle makes are always displayed.

  3. Search Model by tag - When a car make is queried (by text or by tag), the model tags are also filtered. For example:

    • When 'Ford' is queried, the Models tags are reduced to 'Fiesta' and 'Ka' (or indeed, any Ford found in the database if exists)

When the user clicks on the listed/displayed vehicle at any time, the page displays further information about the selected vehicle.

This page is populated by information in the database.

The user's search query is retained, so they may resume from where they were, when clicking the 'back' button or the home link (in the title).

Developers Comments

VueJS

As a freelancer, VueJS is my preference because of it's ease of use. I have no reservations against React or Angular, and I am very open to learning either of those if needed.

Many VueJS skills and ideas are easily translated into React or Angular.

TODO's in project

On such a project as this, it is easy to keep on going until the product is finished and polished. After 8 hours of work, over 3 days, I have to call this 'finished' only by way of it being appropriate for submission.

The TODO's should highlight any potential additions/changes which were in my mind during the development.