Skip to content

3DHubs/marketing-engineer-assignment

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Full Stack Engineer - Help us!

Hey! Are you up for a challenge? This is a snapshot straight from an average day at the office!

The context

We're looking to wow engineers. Show them what materials we offer, and provide some extra information about the strengths and weaknesses of the materials. One of our latest components that does that is our material overview. Can you build it? Yes you can!

What do I do?

  • Go to https://www.hubs.com/engineering-challenge/ and inspect one of our components that tries to display our material offering.
  • Re-implement it to the best of your abilities using whatever technologies you want, but within the boilerplate provided. You're free to add whatever frontend technologies you're most familiar with, but you get bonus points if you keep it in plain JS.
  • The demo api provided is missing data on purpose, don't worry about missing it, work with what you have :)

Specifically your final result needs to include the following:

  • 2 tables, 1 for plastic materials 1 for metal materials.
  • When you click on any of the materials: Some kind of sidebar/modal navigation opens, showing the details of the material and all it's different material 'subsets'.
  • When you click on a material subset a second level of navigation needs to open, showing the details of the subset.
  • At any stage, clicking outside the modal should close everything
  • When you're looking at the subset details, there should be a 'back' button that takes you back to the previous material.
  • You don't need to re-implement this exactly like we did. You get bonus points for thinking of a better way to present the same information.

Some pointers

  • Keep your code clean and re-usable, what if we want to use your code for another block in the future?
  • Think about the end-user, how will someone interact with this block? What devices will they be using?
  • Don't spend too much time. A few hours at the most. Make sure to spend your time at the right places.

Good luck! If you have any questions, go with your best guess!

Running the boilerplate

Any HTTP server should be fine, some examples:

Python

$ python -m http.server 8000

NodeJS

$ npm install -g http-server   # install dependency
$ http-server -p 8000

PHP

$ php -S 127.0.0.1:8000

Working on the assignment

  • Clone this repository
  • Implement your feature
  • Zip everything up and send it our way!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published