Build a DB Schema Visualizer using React Flow

Veröffentlicht am: 01 Juli 2024
auf dem Kanal: Usman Abdur Rehman

10,191

271

Hey everyone, in this video we will make a real world Schema Visualizer project using React flow which is being used by a lot of SAAS projects like Supabase. Schema Visualizer can be a great tool to visualize your entire database. In this tutorial we will use React flow to build this project

Join my discord: / discord
You can follow me on: / usmanabdurrehman97

Code: https://github.com/usmanabdurrehman/r...

00:00 Intro
00:54 Setting up the base
02:36 Parsing Model Information from Scehma
07:47 Parsing Model names from Schema
09:13 Making models using parsed data
11:01 Making Nodes from Models
11:29 Making Custom Node Component
15:02 Making Dynamic Layout for nodes
18:48 Building Connections Array from Models
20:34 Making Edges using Connections
22:20 Adding Handles
24:38 Rendering Handles Optionally
27:10 Outro

Auf dieser Seite können Sie das Online-Video Build a DB Schema Visualizer using React Flow mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Usman Abdur Rehman 01 Juli 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 10,191 Mal angesehen und es wurde von 271 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

102