Junior Frontend Developer Test

Welcome to our Junior Frontend Developer Test

This test consists of a series of tasks which may take a few hours to complete, depending on your experience level. The primary purpose of this test is to infer your “logical thinking” and “problem-solving” skills.

Scenario

To recreate the design and functionality of a generic office-listings page. Please navigate through the interactive prototype to better understand the scope and requirements.

Tasks

1. Download the source code for this repository and add the code base to a private repository of your own
2. Recreate the design using Vue.js and TailwindCSS
3. Populate the office listings from a datasource (JSON or hard-coded array)
4. Recreate the following interactivity
   1. Toggle open/close office cards
   2. “Add new location” (add new office to list)
   3. While adding or editing an office, the “Save” button should be disabled until all fields have been validated
   4. “Delete office” (remove office from list)
5. Optional features
   1. “Edit office” (edit and save office data)
   2. Form fields validation

Project Setup Instructions

NODE Version: 16

Install Dependencies: npm install

Run in dev mode: npm run dev

Tips

• Keep it simple
• Data persistence is not required
• Please ensure your setup instrucions are simple and clear
• Please use placeholder data only (i.e. do not use real or identifiable information)
• Feel free to validate fields according to your own validation logic (optional)
• Verify the full functionality of your application prior to submission

Deadline

You´ll have up to 7 consecutive days to work on the test. Please submit your test as a Github repository URL, along with instructions on how to set up and run your application (please edit the REAME.md file to add your setup instructions). Please make your repository private and add Fez, Pam, and Bill with view access to the private repository.

Submissions

Submit your test here →