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

Posted 4 hours ago

Worldwide

Summary

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).

  • Less than 30 hrs/week
    Hourly
  • 1-3 months
    Duration
  • Expert
    Experience Level
  • $25.00

    -

    $40.00

    Hourly
  • Remote Job
  • Ongoing project
    Project Type
Skills and Expertise
Mandatory skills
Front-End Development
Activity on this job
  • Proposals:50+
  • Last viewed by client:3 hours ago
  • Interviewing:
    1
  • Invites sent:
    4
  • Unanswered invites:
    4
About the client
Member since Feb 1, 2026
  • USA
    Auburndale1:23 AM
  • 1 hire, 1 active
  • 3 hours

Explore similar jobs on Upwork

Set Up Cookie Consent BannerHourly‐ Posted 3 weeks ago
Web Development
Flutter/Dart ExpertFixed-price‐ Posted 4 weeks ago
Flutter
Dart
Android
Mobile App Development

How it works

  • Post a job icon
    Create your free profile
    Highlight your skills and experience, show your portfolio, and set your ideal pay rate.
  • Talent comes to you icon
    Work the way you want
    Apply for jobs, create easy-to-by projects, or access exclusive opportunities that come to you.
  • Payment simplified icon
    Get paid securely
    From contract to payment, we help you work safely and get paid securely.
Want to get started? Create a profile

About Upwork

  • Rating is 4.9 out of 5.
    4.9/5
    (Average rating of clients by professionals)
  • G2 2021
    #1 freelance platform
  • 49,000+
    Signed contract every week
  • $2.3B
    Freelancers earned on Upwork in 2020

Find the best freelance jobs

Growing your career is as easy as creating a free profile and finding work like this that fits your skills.

Trusted by

  • Microsoft Logo
  • Airbnb Logo
  • Bissell Logo
  • GoDaddy Logo