dan/flowysurf
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
Reimagine your project with a flowchart editor 🌊 https://flowy.surf
20 commits 2 branches 0 tags 466 KiB
Find a file
Exact
daqnal f6757f55b8 fix help modal
2025-09-29 16:44:13 -04:00
.github/instructions being the ai usage; import/export 2025-09-27 16:25:08 -04:00
public WE COOOKIN 2025-09-28 03:02:44 -04:00
screenshots theme problems should be fixed now; logo looks chill; updated readme 2025-09-28 03:25:27 -04:00
src fix help modal 2025-09-29 16:44:13 -04:00
.gitignore scaffold basic vite + react project 2025-09-26 21:36:09 -04:00
eslint.config.js scaffold basic vite + react project 2025-09-26 21:36:09 -04:00
index.html WE COOOKIN 2025-09-28 03:02:44 -04:00
package-lock.json WE COOOKIN 2025-09-28 03:02:44 -04:00
package.json WE COOOKIN 2025-09-28 03:02:44 -04:00
README.md final commit prior to refactoring 2025-09-28 04:00:02 -04:00
vite.config.js add tailwind and react flow 2025-09-26 21:53:49 -04:00

README.md

flowysurf

flowysurf is a lightweight visual project manager optimized for planning milestones and tasks with a clean UI. Drag nodes, connect task flows, and track milestone progress — milestones automatically aggregate upstream Task completion. Built with speed and UX in mind.

Screenshot of example Project

🌊 How does it work?

FlowySurf is a visual map editor for designing workflows and milestones. It focuses on making it easy to model task dependencies and track progress across milestones. Key ideas:

  • Nodes represent Start, Task, or Milestone elements.
  • Edges represent flow/dependency between nodes (one node flows into another).
  • Milestones automatically count upstream Task nodes and show completion progress.
  • TaskNodes expose a main checkbox that marks the task complete. Subtasks are local and do not count towards milestone completion.

✨ Features

  • Drag & drop nodes
  • Create Task and Milestone nodes quickly
  • Chain tasks and have Milestones aggregate upstream completion
  • Live progress bar on Milestone nodes
  • Confetti celebration when a Milestone completes (because milestones deserve celebration)
  • Import/export .flowy files; your data is your own

🎯 Quick usage

  1. Open the app (run locally or visit flowy.surf).
  2. Add nodes with the bottom right + button (Task / Milestone).
  3. Connect nodes by dragging a handle from the source to the target.
  4. Use the large checkbox on Task nodes to mark a task complete — Milestones will update automatically.
  5. Click a Milestone title to edit it; the steps header will reflect the name.

🛠 Development

Requirements

  • Node.js 16+
  • npm or pnpm

Getting started

# install dependencies
npm install

# start dev server
npm run dev

Local storage

The app autosaves state to localStorage under the key flowymap-v1. Use the UI export/import buttons to move maps between machines.

Project structure (brief)

  • src/pages/Map.jsx — main editor and React Flow wrapper
  • src/components/nodes/ — custom node components (TaskNode, MilestoneNode, StartNode)
  • src/lib/flowEvents.js — small emitter used to notify nodes of graph changes

Built in a 36-hour sprint for the HackGT hackathon.