connect-group/frontend-code-exercise

The ITG Connect 2019 front end developer coding exercise

ITG Connect Front End Coding Excercise

Hello!

Thanks for your interest in joining the team here at ITG Connect. Part of our evaluation process is to set a simple, but fairly open-ended, coding excersise for you that will help to give us an idea of both your skills and, importantly, your approach to how you would solve a given problem or brief. You may use any front-end technologies you would like for your solution. If you want to use a framework (React or Vue), that's great! Or, if you're more comfortable just writing vanilla JS, that's good too. What's important for us is:

1. Your code is clean and easily understood by other developers
2. Your code is easily extendable, re-usable, maintainable and has the potential to scale.
3. Your solution is easily built and ran.
4. Your solution answers the brief, within the given time constraints.
5. Your UI is neat, presentable and responsive.

The Brief

One of our clients have asked us to begin development on a new simple, standalone page that allows users to view and filter their range of motorhomes available for hire. The purpose of this project is to create a simple tool that will help their customers to choose the motorhome that's right for their needs and to subsequently go on to place a booking on their website.

We will be presenting our progress to the client soon so we have currently allocated for 2 hours of development time to get something up and running. Your challenge is to produce the HTML, CSS and JS needed for the component to be both functional and presentable. Should the client like it, the development team will continue to build upon the tool to add additional functionality and UI enhancements.

Designs

The creative department have supplied a simple initial design which the client has approved so we're ready to go. You can find these in /designs.

The designs have been provided as .psd files. If you do not have photoshop then don't worry! .jpg versions have been included and a supporting styleguide can be found in /designs/styleguide.jpg.

Hint: Don't worry too much about being pixel perfect, neatness and consistency is key.

Dev Requirements

1. The back-end developers are currently working on the API for this data, so for the time being, You can use dummy motorhome data that will drive the results (/data/results.json).
2. On initial load, render all results.
3. For the first release, The user should be able to filter by:
   1. Transmission Type (Manual, Automatic or both)
   2. Vehicle Type (Motorhome, Campervan or both)
4. When filter selections are changed by the user, the results should update to only show motorhomes that match the selected filter(s).
5. Create all the HTML and CSS for the responsive UI. Note that it doesn't have to be pixel perfect! Time is limited, so focus on what you feel would be 'must have' functionality.
6. While we are working on sourcing correct images for each motorhome, please use the images found in /assets/images. Note that when the API is complete, a URL for each image will be present in the JSON.

Submission

Once you're happy with your component and you are ready to send it over to us, please provide:

1. The full, uncompiled source code. Again, you're free to submit your code to us however you think is best (We do love to see commit history though, hint hint!)
2. Instructions on how the team can compile and run your code locally.
3. If you ran out of time and were unable to fully complete the exercise, don't worry! Just provide us with a brief explanation as to what's left to do and if applicable, what functionality you prioritised over others and why.
4. A brief explanation of your solution, including why you chose the technologies you chose and what, should you have more time, you'd do to improve your solution.

Thanks for taking the time to complete this exercise!