← Jobs

Front-End Developer (React/Typescript) - Develop Custom Drag and Drop Component

Budget: $25.0 - $40.0 HOURLY / PART_TIME ⭐ 0.00 (0) USA

frontend-development, git, typescript, react-js, web-application

We’re looking for someone who has real experience building data-intensive and interactive React applications, especially visual editors, drag-and-drop interfaces, dashboards, workflow builders, or diagramming tools. You should be comfortable with: • React and TypeScript • Tailwind CSS • Component libraries and design systems such as shadcn/ui, Radix UI, or similar • Familiarity with Storybook • Drag-and-drop libraries such as dnd-kit, React DnD, or similar • Flow, node, or diagramming libraries such as React Flow / xyflow, or Jointjs. • Architecting clean and reusable components • Building resizable, draggable, and configurable canvas elements • Connecting UI components to live application data • Designing interfaces that feel simple even when the underlying system is complex • Ideally some familiarity with Figma Good examples of relevant experience include: • Workflow builders • Diagram editors • Low-code or no-code tools • Dashboard builders • Page builders • SCADA or industrial interfaces • Node-based editors • Automation interfaces • Whiteboard or canvas applications You should be able to show examples of previous work, ideally something interactive rather than only standard marketing sites or CRUD applications. Experience with industrial automation, laboratory equipment, SCADA systems, or real-time data is helpful, but not required. We can provide the domain knowledge. The main thing we need is someone who knows how to build a solid visual editor in React and can make good product and UI decisions while doing it. This is probably not a good fit if most of your React experience is limited to basic forms, tables, and API integrations. The difficult part of this project is the editor itself: drag-and-drop behavior, component configuration, data binding, canvas interaction, and making the overall experience intuitive. The first major effort would be implementing a drag-and-drop flow style interface that allows users to place representations of data collection devices and sensors (pressure gauges, flow gauges, pumps, etc.) onto a diagram, connecting them with pipes, wires, and other components. This would allow users to create diagrams that represent physical setups they are working with in a factory environment. Prior experience with flow style libraries such as React Flow or JointJS is a major plus. 1) Work with our graphic designer to create a custom library of icons and symbols to be available for use in the diagram. a. These icons may need to support one or multiple connection points 2) Create documentation and a standard process for creation of new diagram symbols a. Document what the icon requirements are (image sizes), how to define connection points, etc. 3) Create custom dynamic blocks within the diagram a. May include blocks with numeric readouts, Boolean indicators, slide indicators, or combinations of all. 4) Create the final component that includes the custom component library, drag and drop functionality, linking of elements to data sources, and connecting different elements via configurable pipes/wires/etc. An example of this type of setup can be found here: https://www.jointjs.com/demos/scada Individuals in North/South America or Europe are preferred because of the shared working hours with us (US ET).
Openen op Upwork