For a side project you need to be able to tag parts of a picture by adding markers with a label to them. This should be done in a web interface.
These are the features your tool should have in order of importance. If you are running out of time, then only implementing a few of these will be fine.
- display a picture in the background
- a marker can be added to the picture by clicking into it (new markers are selected immediately)
- markers display a small icon and the label given to them
- a marker can be selected by clicking on it
- if a marker is selected, a textbox shows where the label can be changed
- a cancel button closes the textbox without applying changes
- a save button updates the label in the picture
- markers can be deleted by first selecting them and then clicking the delete button
- an api to save the tags is out of scope for this task but make sure this could be added in the future
Create a nodejs project that hosts a single page website.
Implement the frontend in javascript, preferably using React but if you feel more comfortable with Angular or another framework then this can be used as well.
We want you to impress us with what you can do in a short time. This should not take longer than a few hours to build. Design and looks are not the most important parts, we rather want to see your project structure and coding style.