Build a DB Schema Visualizer using React Flow
1.1 هزار بار بازدید -
2 ماه پیش
-
Hey everyone, in this video
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: discord
You can follow me on: Instagram: 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
Join my discord: Discord: discord
You can follow me on: Instagram: 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
2 ماه پیش
در تاریخ 1403/04/11 منتشر شده
است.
1,179
بـار بازدید شده