/reactflow-demo

Primary LanguageTypeScript

RectFlow Demo

ReactFlow Demo

React Flow is a library for building node-based applications.

Introduction · Tech Stack + Features ·


Introduction

React Flow is a library for building node-based applications. These can be anything from simple static diagrams to data visualisations to complex visual editors. You can implement custom node types and edges and it comes with components like a minimap and viewport controls out of the box.

Tech Stack + Features

reactflow-demo.mp4

Frameworks

  • ReactJs – React framework for building performant apps with the best developer experience
  • Node.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.

Platforms

  • react-flow – React Flow is a library for building node-based applications.

  • NginX – Easily preview & deploy changes with git

UI

  • next/font – Optimize custom fonts and remove external network requests for improved performance
  • ImageResponse – Generate dynamic Open Graph images at the edge
  • react-wrap-balancer – Simple React component that makes titles more readable

Hooks and Utilities

  • useCallback –  React useCallback Hook returns a memoized callback function.

  • useRef – The useRef Hook allows you to persist values between renders.

  • nFormatter – Format numbers with suffixes like 1.2k or 1.2M

  • capitalize – Capitalize the first letter of a string

Code Quality

  • TypeScript – Static type checker for end-to-end typesafety
  • Prettier – Opinionated code formatter for consistent code style
  • ESLint – Pluggable linter for Next.js and TypeScript