The Wonderful Front End Developer Challenge

The purpose of this challenge is to gauge a frontend engineer's ability to interpret and implement the provided design comp. In this document, you are presented with a scenario that is intended to help showcase your engineering talents and spark creative thinking and problem solving. We will be watching both the journey and the final product.

The Story

A major car brand is rolling out new models for the upcoming year, and have provided designs for a landing page that will showcase various trim levels and help the user locate their desired trim(s) at dealerships within their vicinity.

The brand is very sensitive about the customer experience. It must feel fast and snappy, but cannot hold back on quality. The brand has asked us to "breathe life" into the design by adding an artful amount of interactivity and animation - but they have left the details to our best intuition. If we go too crazy, they will reject our ideas, but if we are too conservative they will begin to micromanage and "tinker" with the design (we don't want that, either).

The client has provided a mock/comp for the for how they envision the microsite to appear on desktop, but expect the majority of their traffic to be on mobile devices.

Expected Delivery

• A public URL to view your execution
• A reviewable copy of the codebase

Requirements

• Use the provided mocks and assets to create a single-page web experience. You will need to lean on your judgement, as the mock is intentionally vague as to how to handle things like empty states, UI interactions, and the like.
• Use the images provided in the ./assets directory to create a slideshow.
• Use 3rd party map service (provides an API to embed and work with maps) to create a map that allows users to select various markers to populate a dynamic sidebar with the available trims for each marker.
  • Location 1: A dealership in Brooklyn, NY - All 3 trims are available
  • Location 2: A dealership in Queens, NY - LS and LS HYBRID
  • Location 3: A dealership in Newark, NJ - LS F SPORT
  • Location 4: A dealership in Plainfield, NJ - 0 trims available
• Use your best judgement as to how to present the current mock on mobile.
• Customers should be able to "Request a Quote" when they see a an available trim. For the sake of this web page, we will assume selecting that button notifies an API to send an email. A different developer is building the API, and it isn't built yet, but you'll need to prepare for it.

The Rules

• There is no time limit. You are done when you are satisfied - but the client is eager.
• You can use any resource or library that you think is best for the product. However, you must be able to justify and attribute any external resource.
• We are great resources! Ask as many questions of the Wonderful team as you would throughout any project. We have been working with this client for many years and can provide feedback or validate any assumptions.

You will be graded on:

• The resilience, strategy, and organization of your CSS
• The elegance, efficiency, and performance of any JavaScript
• Your understanding of best HTML practices
• Your creative intuition as to how to "fill in the gaps" that are missing within the design
• Development Speed v.s. Quality Deliverable
• How easy it would be for another developer to hop into the project and work with you
• Our understanding of the quality of your development process

✨ Thanks! Good luck!