Flux

A simple yet powerful collaborative node editor designed to help teams visualize and organize their ideas in real time.

---

Demo

flux.Demo.mp4

Features

• Node-Based Editing: Intuitive drag-and-drop interface for creating and connecting nodes.
• Real-Time Collaboration: Seamless teamwork with live updates powered by Liveblocks.
• User-Friendly Interface: Built with React and Next.js for a smooth user experience.
• Authentication: Secure user authentication and management via Supabase.
• Responsive Design: Optimized for desktops and tablets for on-the-go access.
• Block Management: Easily add, edit, and manage blocks within your node editor.

---

Tech Stack

• Frontend:
  • React
  • Next.js
  • Zustand
  • xyflow
  • Liveblocks
• Backend:
  • Node.js
  • Express.js
  • Supabase

---

Usage

1. Create a New Node Board:

   • Sign in and create a new collaborative board.
   • Add, move, and connect nodes to visualize your system or workflow.

2. Add New Blocks:

   • Use the "Add Block" dialog to create new blocks by entering a name.
   • Blocks can be connected and manipulated within the editor.

3. Collaborate in Real-Time:

   • Invite team members to join your board.
   • See updates instantly as others make changes.

4. Save and Share:

   • Save your boards securely.
   • Share them with others using unique links.