MapIt – Website/Product Mapping Tool

A lightweight tool for visually mapping product architectures, website flows, or app structures. Built for designers and builders who want to plan without friction. Simple drag-and-drop interactions, editable nodes, and persistent Supabase storage make it perfect for early-stage thinking and planning.

Build a visual website/product mapping tool with Supabase integration.

Users should be able to:

– Create and name maps

– Add/edit/delete nodes

– Drag and connect nodes visually

– Rename nodes inline

– Save and fetch data from Supabase

Use a black and white theme. Use a serif font for headlines and Manrope for body text.

Layout should be clean, minimal, and optimized for fast mapping.

Minimalist UI with black background and white nodes

Serif headers give it a functional-but-crafted feel

Nodes styled like cards with quick editing and linking

Fully responsive drag/drop grid

Integrated Supabase support for storage and fetching

Inline node editing

Visual map canvas with draggable layout

Line connectors between nodes

Supabase-backed CRUD actions

Simple modular structure – easy to extend

Dark theme with typographic contrast

The tool was built around speed and clarity. Mapping needed to feel intuitive and immediate - no clunky forms or modals. Instead, the interface encourages flow: click, type, connect.

Serif headlines add a crafted, editorial tone, while Manrope keeps the system UI legible and modern.

The black and white aesthetic gives just enough drama without distraction.

Supabase initially threw a 42703 error due to a missing order column on the nodes table - fixed by manually updating the schema.

Dragging sometimes caused node jitter - resolved by refining absolute positioning logic and snapping.

Added a simple zoom/pan foundation, but kept interaction scope tight to avoid feature bloat.