Add new tech test

.gitignore

@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -7,72 +7,141 @@ Welcome to the Motorway UI technical test. This test focuses on user experience,
 
 ## Set up
 
-This repo is a slightly modified Create React App and an Express server which serves a JSON feed of images.
+This repo is a Vite app with simple Express server which serves a JSON feed of cars and tags associated.
 
 - Clone the repo and run `npm install`
 
-- `npm run serve` will run the server
+- `npm run dev` will run both - express server and react app.
 
-- in another terminal window `npm run start` will start CRA
+After this, we have react app running on `http://localhost:5173/` and express server running on `http://localhost:8000`.
 
-After this, CRA will open a tab with the app running, usually `localhost:3000`. If you look in `src/App.js` you'll see the API call to the server is already made and will console log out the results.
+There are two endpoints available:
+ * http://localhost:8000/api/tags - to return all tags in
+ * http://localhost:8000/api/tags?tag=ferrari - to return matching tags
+ * http://localhost:8000/api/cars - to return all cars
+ * http://localhost:8000/api/cars?tag=ferrari - to return matching cars
 
 #### Note
 
-- The server and CRA are watching the relevant files and will hot reload if any changes are made.
+- The server and react app are watching the relevant files and will hot reload if any changes are made.
 
 - Feel free to modify or install whatever code you feel is necessary. If installing packages which are wrappers for native browsers APIs please leave a comment explaining why.
 
 
 ## Tasks
 
-### 1. UI development
-
-Create a responsive UI to display the images returned by the API.
-
-The aim is to demonstrate your experience and knowledge of HTML, CSS, JS and React features; and demonstrate creative thinking in how images can be presented and manipulated.
-
-Images aren't optimised and their dimensions are varied, there are .jpg and .webp versions on s3, so you will need to take this into account.
-
-#### Inspiration:
-
-https://twitter.com/andybarefoot/status/1251844621262602242
-
-http://www.artist-developer.com/
-
-#### Some ideas to get you started:
-
-Resizable thumbnails
-
-Modal to review full size images
-
-Image effects or filters
-
-
-### 2. Performance
-
-The API that is returning images is rather slow. Show how it can be sped up, and show how you would measure the improvement in performance.
-
-
-### 3. Forms
-
-One of the oldest yet trickiest parts of web development is forms, so we’d like to see how you handle them.
-
-Add a form to your app with the following fields. The form doesn't need to submit to anywhere, but must validate on the client.
-
-- [ ] Name
-- [ ] Email
-- [ ] Date of birth
-- [ ] Favourite colour
-- [ ] Salary (using a range input)
-
-
-## Time allowed
-
-We appreciate that your time is valuable and recommend you not spend more than 2 hours on these tasks.
-
+There are two stages to this task depending on the type of challenge you're taking.
+
+#### Live challenge (1 hour)
+[Task one](#1-realtime-search).
+
+#### Take home challenge (2 hours)
+Task one and attempt [task two](#2-realtime-search-results). We appreciate that your time is valuable and recommend you not spend more than 2 hours on these tasks. Focusing on one small thing well or a bigger scope as a proof of concept, both approaches are valid.
+
+### 1. Realtime search
+We have an tags api endpoint at `http://localhost:8000/api/tags` which returns an array of all tags available in the format:
+
+```
+  [
+    "white car",
+    "car",
+    "orange car",
+    "orange",
+    "lamborghini",
+    "super-car",
+    "black car",
+    "mercedes-benz",
+    "aventador",
+  ]
+```
+
+By adding a `tag` query the endpoint will return an array of matching tags `http://localhost:8000/tags?tag=re`:
+
+```
+  [
+    "red car",
+    "red",
+  ]
+```
+
+#### Outcomes
+To have a type ahead search functionality like [Pinterest](https://www.pinterest.co.uk/ideas/) which can query the above API and return selectable results.
+- Display tags available in a form of dropdown
+- Allow available tags to be selected
+- Performant fast results
+- The dataset is static but **assuming** it could be dynamic would be beneficial
+- **Not exposing the whole dataset** would be beneficial
+
+### 2. Realtime search results
+Once task one has been completed, when a user selects a tag, another call to `api/cars` endpoint need to be made to display the result in some UI (similar to [Pinterest](https://www.pinterest.co.uk/search/pins/?q=red%20car&rs=typed)) The more interesting or unique the better, examples could be but not limited too a11y, animation, image optimization, semantic markup, schemas, WebGL. _Again, we appreciate that all of them can't be achieved in two hours and we don't expect to you to cover most of them, let alone all of them._
+
+We have cars api endpoint available at `http://localhost:8000/api/cars` which returns array of all cars available in following format:
+
+```
+[
+  {
+    "id": "m3m-lnR90uM",
+    "created_at": "2017-04-14T00:59:12-04:00",
+    "updated_at": "2020-04-14T01:05:34-04:00",
+    "color": "#E0E4EF",
+    "description": "I shot this while doing a job for a luxury automotive storage facility in Baltimore, MD. I wanted to create an ominous sense of intrigue, giving the feeling of a space that was both expansive and enclosed. I enjoy the journey my eyes take from the focal point of the headlamps to the contours of the Camero’s body, and then to the backdrop of stacked automobiles.",
+    "alt_description": "white car",
+    "tags": ["white", "white car", "car"],
+    "likes": 995,
+    "user": {
+      "id": "9aTMQdp_Djo",
+      "updated_at": "2020-04-20T01:34:56-04:00",
+      "username": "peterbroomfield",
+      "name": "Peter Broomfield",
+      "first_name": "Peter",
+      "last_name": "Broomfield",
+      "bio": "Some days you get the bear, and some days the bear gets you. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody.",
+      "location": "Baltimore, MD",
+      "profile_image": "https://motorway-ui-test.s3.eu-west-2.amazonaws.com/avatars/warmachine",
+      "total_collections": 36,
+      "total_likes": 126,
+      "total_photos": 1
+    },
+    "url": "https://motorway-ui-test.s3.eu-west-2.amazonaws.com/car-images/m3m-lnR90uM"
+  }
+  ...
+]
+```
+
+By adding a `tag` query the endpoint will return an array of matching cars `http://localhost:8000/cars?tag=red`
+
+```
+[
+  {
+    "id": "3akA0XDg1_g",
+    "created_at": "2018-02-07T04:02:51-05:00",
+    "updated_at": "2020-04-14T01:11:57-04:00",
+    "color": "#EEEBE9",
+    "description": null,
+    "alt_description": "red Ferrari car",
+    "tags": ["red car", "red", "ferrari", "car"],
+    "likes": 346,
+    "user": {
+      "id": "ue4EPaEkN5w",
+      "updated_at": "2020-04-19T03:59:05-04:00",
+      "username": "antoniolio",
+      "name": "Matt Antonioli",
+      "first_name": "Matt",
+      "last_name": "Antonioli",
+      "bio": "Besides, you look good in a dress.",
+      "location": "Houston, TX",
+      "profile_image": "https://motorway-ui-test.s3.eu-west-2.amazonaws.com/avatars/ironman",
+      "total_collections": 1,
+      "total_likes": 186,
+      "total_photos": 58
+    },
+    "url": "https://motorway-ui-test.s3.eu-west-2.amazonaws.com/car-images/3akA0XDg1_g"
+  },
+  ...
+]
+```
 
 ## Notes
 
 The goal of the test is to prove your understanding of the concepts of modern HTML/CSS/JS, but not to produce something production ready or pixel perfect.
-Your work will be tested in the browser of your choice, so please specify this when submitting. This can include pre-release browsers such as Chrome Canary or Safari Technology Preview if you want to work with experimental features.
+Your work will be tested in the browser of your choice, so please specify this when submitting. This can include pre-release browsers such as Chrome Canary or Safari Technology Preview if you want to work with experimental features.

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Motorway UI Challenge</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>