Hello! đź‘‹
This is the code test for Front-End Developer candidates at Gumtree Australia.
This test is designed to be a simple real-world example. The project has been completely scaffolded for you, and the code you need to write yourself is minimal, and marked clearly with // TODO
comments.
The goal is for you to showcase your ability to write Javascript, HTML and CSS in a real-ish world scenario.
The task is to complete a mock Search Results Page.
The project includes some mock designs, an already working single page application, and an API endpoint which returns mock results.
You should only spend 2 hours maximum on this test - just complete as much as you can in that time. It is absolutley not neccessary to finish every part of the task, so please don't feel like you need spend more time than you have available.
This is a Next.js project bootstrapped with create-next-app
.
You’ll need Node.js version 10.13
or later, a text editor and terminal app for this task.
- Either clone this repository or download the
gtau-fe-test.zip
and extract the contents - Navigate to the
gtau-fe-test
directory in your terminal - Install the dependencies
npm install
- Start the development server
npm run dev
Open http://localhost:3000 with your browser and you should see a blank page.
You can also open http://localhost:3000/api/listings with your browser and see the response from the API endpoint (the results are a randomised number of listings, and order).
Complete the Listings
component(s) so that it correctly render the results returned from the API endpoint.
- The layout should be responsive and match the mocks (3 columns on desktop, 2 on tablet, 1 on mobile).
- The listings should visually match the mocks as closely as possible.
- The title of the listing should be truncated to a single line.
- The description of the listing should be truncated to 3 lines.
- The price should be formatted to be human readable.
- The two buttons on each listing do not need to do anything when clicked except log a message to the console with the format
[action]: [title]
, e.g:Reply: 2007 Ferrari Spider
orView: 2007 Ferrari Spider
. - The page only needs to work in the latest version of Chrome.
- Do not include any extra dependencies. The project has everything you need to complete it.
- The only two files you need to edit are
components/Listings.js
andpublic/css/listings.css
. There is no need to edit anything else.
Review the mocks in design-mocks
directory. There is a mock design for desktop, tablet and mobile.
The logical order to complete the tasks are:
- Retrieve results from the API endpoint.
- Complete the logic and responsive layout for the parent
Listings
component. - Complete the logic and layout for the singular
Listing
component. - Complete the logic for the
formatAsCurrency
utility.
You do not need to use anything but plain ol' CSS for styling. There are some root level CSS variables declared in public/css/variables.css
which you can, and should, use to help save you time.
- Even though the API is a mock, treat it as you would a production API. What happens when there are no results? Or the request fails?
- The API server is temperamental - 10% of the time it will return an error, and may take up to 3 seconds to return a response. Make sure the Frontend can handle it!
- This isn't just a Javascript test. The HTML structure of your component and the CSS layout are equally important.
- Dont try to do too much! A simple, clean solution that works is looked at more favourably than an complex one that does not.