The purpose of this development test is to showcase your full stack development experience, while demonstrating how you interpret open-ended project briefs.
For this test you will receive:
- A hypothetical client scenario / brief
- Designs and all required assets
- Requirements & layout details
The expected completion time is between 2-4 hours (assuming you are already familiar with Laravel and Vue).
You are expected to track your time spent on the project (in minimum 30 minute blocks), and to note down any specific "calls" you make and why. You have full creative control to meet the brief as you see fit.
Our client Josh has requested a prototype to be developed that tests an interactive booking form alongside a responsive mobile/desktop layout.
To showcase the layout we are proposing our designer Jane has designed the desktop layout. She has left the mobile layout up to your discretion, but expects that this will be a basic responsive pass to ensure that the page displays correctly at mobile size.
Your job is to interpret the design and brief, and then implement the prototype using our standard development frameworks.
Where possible, use our preferred frameworks:
| Server-side framework | Laravel |
| Client-side framework | Vue |
| Client-side Interface / Forms | Element UI |
| CSS Grid / Responsive layout | Bootstrap 5 |
See the designs, linked under resources.
The designs have been prepared in Adobe XD which provides an interactive specification including all assets, measurements and typographic styles.
Home Page (as per design)
- Hero
- Logo
- Hero Text
- Full size background image
- Heading Block
- Title
- Copy
- "Book Now" button
- Image Block
- Image
- Copy
- Booking Form
- Title
- Heading
- Copy
- Booking Form
- Booking List
- Name
- Date
- Time
- Message
- Footer
- Logo
- Copy
- "Book Now" button
- Menu
- Copyright text
- Client-side booking form, submitted via AJAX
- Bookings List, updated via AJAX
- Bookings ordered with the latest at the top
We expect to see:
- General
- A new Laravel project
- Booking form validation
- Client-side
- Responsive layout using Bootstrap 4 grid
- Vue "Booking Form" component
- Vue "Bookings List" component
- Server-side
- POST route to create a booking
- GET route to refresh bookings list
Bonus points:
- Effective use of Bootstrap grid columns for layout so that the design translates easily to a mobile breakpoint
- Server-side request validation using a Laravel FormRequest
- Client-side form inputs using Element UI components
- Loading message and blocked UI while the Booking Form is submitting
- Client-side communication between components using events
We expect to receive a link to a ZIP folder containing the Laravel project and relevant files, or a link to a public GIT repository.
Please include any relevant config and/or package details so the project is ready to deploy locally.
To test your project we will setup and run this website on our local computers and compare the website in real-time against the back-end and front-end coding written specifically for this project.
- We will review the project in Google Chrome. As such we're not expecting full cross-browser testing but we'll be looking for standards-compliant markup and styles.
- We will review the desktop layout using a 1600px wide window.
- We will review the mobile layout using the developer tools set to an iPhone X device.
- We are not concerned with the tablet layout for the prototype.
For any questions please feel free to email us directly.