Frontend Engineer Technical Test

Technical assessment for the YourParkingSpace Frontend Engineer Role.

Context

At YourParkingSpace, our frontend engineers are expected to be able to confidently complete all aspects of frontend development. From building and styling UI components through to interacting with our backend APIs.

Goal

We would like you to develop a simple Vue app using a mocked API. The goal is to generate a blog using the data received from the API, which allows the user to click through to view each individual article, as well as viewing a preview of all the articles. We'd also like you to add search functionality as well, so that we can see live binding with the API calls.

Requirements

We've deliberately left the requirements as simple as possible, we want you to develop in a way that's comfortable to you so that we can see you working at the best of your abilities. However, we've listed our current primary tech stack below if it's something you would feel comfortable using;

• Nuxt.js
• VueJS
• SCSS
• Bootstrap or Tailwind
• Storybook
• Jest / Vue Test Utils

Assets

The visual assets can be found here: https://drive.google.com/file/d/1anu3ZMabeqQ80RAkZgUrcSWvda96fBo7/view?usp=sharing

or you can use the original Figma file if you prefer to use that: Figma

API

We've provided a mock API for you to use, generated by mockapi.io.

Endpoints

The API URL is; https://6141b2f5357db50017b3dc1a.mockapi.io/api/v1

The following endpoints are available for you to interact with:

GET    /Articles
GET    /Articles?search=
GET    /Articles/:id 

Additional documentation can be found here

And example of an article data model can be seen here;

{
    "createdAt": "2021-09-15T01:16:19.162Z",
    "author": "Cheryl Dickinson",
    "image": "http://placeimg.com/640/480",
    "title": "facilis voluptatem repellat",
    "intro": "Quis eligendi animi et esse. Aspernatur recusandae impedit porro dolor labore ab. Asperiores harum consectetur distinctio. Aliquam in eligendi. Nostrum et et ipsum possimus tempore quisquam dolore ipsa. Eum laudantium nulla ut molestiae qui ea.",
    "text": "Maiores accusantium facere ea voluptatem. Corrupti aspernatur earum molestiae expedita at molestias laudantium eveniet sunt. Enim illum doloribus hic labore beatae dignissimos error dolorum.\n \rExpedita quo qui occaecati quo. Voluptatem accusantium voluptas. Consequuntur eaque inventore dolor molestiae suscipit.\n \rConsequatur consectetur et eos esse. Soluta cupiditate blanditiis qui ea. Vero dolores sit error sequi. Cupiditate aut eligendi.",
    "id": "1"
}

Bonus

• We'd love to see some unit tests if you feel confident writing some
• Use of newer JavaScript standard (ES6+)
• Use of a JavaScript bundler
• Addition of pagination (you can add the following query to the endpoint page=1&limit=10 to include pagination - see the documentation for more information).

Submission

Once you have completed the technical test, if you're not making it public then please add kaimacmaster as a user to your Github/Bitbucket repository so that we can see your code. If you are coming to us via a recruiter, please let them know you have submitted the test, or if you are a direct applicant please let the person you are speaking to know as well, that way we'll be on the look out for your submission.

We can't wait to see what you can do!