Flowchart-Designer.md

Flowchart Designer (Frontend/UX)

Ideal candidate: skilled front-end developer with UI/UX chops.

Overview

Create a drag-and-drop flowchart designer close to a basic programming flowchart editor that is purpose-built for dealing with certain types of data.

Front-end developers: use Meteor and React.js and minimalistic UX/UI. Pure UI/UX designers: create high fidelity mockups. 

Requirements

1. Implement basic arithmetic units as flowchart elements: increment, decrement, multiply, divide
2. Implement conditions
3. Implement 2 viewer components:
   • flowchart
   • underlying data structure (JSON)
4. Make JSON data structure to update reactively based on flowchart content

Expectations

1. up and running application OR high fidelity clickable mockups
2. drag-and-drop flowchart builder with support for basic arithmetics
3. clean and documented code
4. tests

Timeline

We leave exact timing to the candidate. Must fit Within 5 days total.

Notes

• use a designated github repo for version control and submission

Examples

We recommend reviewing the following:

• Introduction to Flowcharts: https://www.geeksforgeeks.org/an-introduction-to-flowcharts/
• An example convergence workflow: https://docs.mat3ra.com/models/auxiliary-concepts/reciprocal-space/convergence/
• ReactFlow library examples: https://reactflow.dev/docs/examples/overview/ and https://pro.reactflow.dev/pro-examples

To discuss this task more in details, please contact us.