Web Developer Practical Exam

Overview

This exam primarily assesses your skills in HTML, Javascript/jQuery, and CSS as you will have to style menus, tables, input fields and sub sections. Creating a semantic HTML should be highest priority. Matching the mockup with less than 5-pixel discrepancy is a plus.

Problem

Design and develop a web app that manages auto paint jobs. The UI has to follow the mockup design linked HERE as accurate as humanly possible. (no need to worry about responsiveness — so a fixed width design is desired)

Below is a rundown of the use case for the web app:

1. User adds a new paint job to the queue
2. Web app will move a queued paint job to the list of active paint jobs if a slot is open
3. User marks a paint job as done and it will be removed from display

Constraints

• There are only 3 auto colors to choose from: red, green, and blue
• The web app can only handle 5 simultaneous tasks and the rest of the paint jobs are queued until a free slot is open
• User has to manually mark a paint job as completed
• Queued paint jobs should be processed on a first-in-first-out (FIFO) basis

Instructions per page

New Paint Job

• Unhide the “New Paint Job Page” layer group in Photoshop to see the page design
• Both Current Color and Target Color dropdown fields should only have <empty>, “red”, “green” and “blue” as color options.
• Current Color dropdown field affects the color of the LEFT CAR IMAGE. Target Color dropdown field affects the color of the RIGHT CAR IMAGE. so when the user selects e.g. “green” for the Current Color, the left car graphics should change to green. Default selection is <empty> / gray car.
• The images for the different car colors can be found inside the PSD file.
  
• Adding form validation is a plus, but not required.
• Upon submitting the form, the user should be redirected to the Paint Jobs page

Paint Jobs

• Unhide the “Paint Jobs Page” layer group in Photoshop to see the page design
• The Paint Jobs and Paint Queue tables should refresh the list of paint jobs via AJAX call, with a polling delay of 5 seconds.
• The Shop Performance block needs to refresh its data via ajax calls, with a polling delay of 5 seconds.

Solution

Please provide the following:

1. Schema for the database tables used.
2. Code using PHP (Laravel will get you preferential treatment). Database can be Sqlite3 or MySQL
3. This is your chance to demonstrate your skills so using one or more of the following is highly encouraged.
   • Clean OOP coding style
   • HTML5
   • Javascript and jQuery
   • CSS / SASS / LESS
   • Test-driven Development
   • Git
   • MVC

Once done, please create a Github public repository to upload your source codes then send us the URL to the repo via dev.apply@valens-research.com. Please use “Web Developer Practical Exam – Surname, Given Name, and Middle Initial –  YYYY MM DD (Date submitted)” as subject.

In the email, also include comments regarding any assumptions or trade-offs you made.

Thank you and good luck!
P.S. — If you have any questions, please email the same email address above.