Share
Explore

Flux - Diagram Assignment


👋 Intro

Thank you for taking the time to do this assignment! We know your time is valuable, so rest assured that we’ll be reviewing the exercise thoroughly. The exercise is also directly relevant to the work you would be doing at Flux, so it will also allow us to speed up the interview process!

⏳ Time Estimate:

About 4 hours

🔍 Problem description:

Build a simple diagramming application to allow users to create shapes and connect them in a hierarchical order. Child shapes should be able to inherit certain attributes, like the label of the parent or each child has a different gradient of the parent color. For example, ideally, child labels would change in real-time as the parent label gets edited.

Local storage should be used to preserve the created diagram when refreshing the page. We would also love to have any documentation you feel is relevant.

🎉 Bonus:

Feel free to implement or add any features you like, like letting users draw free hand shapes, or other things.

This sketch is only an example and you are free to implement it in any way you feel it is right to the user. Use your creativity.


👀 What we like to see from you:

How you shape the UI and user experience. Build it the way you would publish it as a simple app for users on a webpage
The understanding of reacting architecture and life cycle
Addressing how you would add syncing in real time via two clients
Planning for corner cases that come from certain user patterns
The code quality. Since we tightly work together we need clean and expandable code. Hint: Writing self-documenting code is a huge plus

🪄 Deliverables:

A git repository hosted on a service of your choice (example Gitlab, Github, etc.) that we can check clone to build and run your app on a local environment
Any documentation or things you would like us to see
If you added tests, feel free to include them as well


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.