We have formulated an assignment to test your technical knowledge. The assignment has been devised with technical and visual developers in mind. Carefully read what to do and what not to do. Enclosed you will find a design containing all of the necessary elements.

The design has been made in Figma.

Conditions

• You have 16 to 24 hours to complete the assignment. If no completion date has been agreed on with you, try to complete the assignment within a week.
• Put your code on GitHub (or Gitlab, Bitbucket etc.) and send us the link to your repository where we can find both the source code and the compiled version. That means no ZIP files.
• Please make sure that we can run the code on our computers by including a readme. (that includes which versions we need to use for example)

What are our expectations?

We expect the design to be fully responsive. You’re free to think about which breakpoints you want to support (think about the why as well).

Depending on your level of experience we of course expect different solutions. Make choices based on what you think you can do within the given time. You can use frameworks like React, Vue, or just simply do it old school with a compiler. Ideally you will have prepared every component in its most practical form.

Visual developer

Your passion doesn’t lie with APIs, redux and business logic but you want to create something that’s not only functional but also pleasing to the eye. Surprise us with nice visual effects such as animations, transitions and general user experience enhancements.

Things you could think about:

• How does the menu open and close?
• How do you show components both on load and on scroll?
• Have you considered using responsive typography?
• And what happens to long words: how are they split?
• Take a look at accessibility. Can you use your website using only your keyboard?

Technical developer

So you’re more of a JavaScript guru? You like communicating with APIs and reducing them to sophisticated data models? Wow us with your technical skills by using the latest tools available.

Think about adding functionalities like:

• Cases – filtering/grouping:
  – Filtering by Industry
  – Grouping by Category
  – Storing filters dynamically in the URL
• Case grid – List and grid view toggle
• Contact form – With validation and error and success states

Extra other stuff you could do:

• Improve performance: Lazyload stuff, WebP, go crazy!
• Create a 100% Progressive Web App (check it with lighthouse)
• Create a (fake JSON) REST endpoint and insert the project data dynamically
• Use React (or VueJS) with tools like Redux/GraphQL/Emotion/Styled Components or even server side rendering. Use the tools that you think might fit best!
• Add Unit Tests