CytoClassifier UX UI

Hi there! Please have a look at the following stuff.

Prerequisites: Basic knowledge of

• HTML5
• CSS
• ES6
• Most important is React. You can access an introduction on the provided link.

Regarding React it would also be nice if you could have a look at the following components:

• Redux Helps to handle states
• React DnD A high-order component for handling Drag and Drop actions

If you want to have one tutorial cover all please have a look on React 16 - The Complete Guide (incl. React Router 4 & Redux). It costs about 11€ but it's absolutely worth it.

Codebase

Yay! There is already something done. Check this out! Make sure to use the development branch. For further understanding of the existing codebase I will create a nice README till next week.

Goals

I arranged the following tasks from easy to not so easy

1. Counter: Show how many pictures were labeled for each category
2. Delete image: Make it possible to delete a selected image
3. Implement Dropzone: Make it possible to drag and drop from OS into browser window
4. Make number of displayed pictures per row adjustable
5. Filters: Make it possible to apply several filters such as showing only one category
6. Multi selection: Make it possible to drag and drop more than one picture
7. Hotkeys: Make it possible to go through pictures with arrow keys and label them by clicking 12345..
8. Export/Import: Make it possible to export and import labels

Thank you all for participating and helping to make this come true!

@AlexChrisF