Flow

Designed for flow — sleek, modern navigation for smooth form building.

_{Live preview}
flow-av.vercel.app

---

Features

• Add Pages

  • Use the “Add Page” button to append a new page to the end
  • Insert a new page between existing ones using the dynamic "+" buttons

• Drag-and-Drop Reordering

  • Rearrange pages smoothly with intuitive drag-and-drop interaction

• Active Page Highlighting

  • The current page is visually emphasized for clear navigation context

• Context Menu (UI Only)

  • Each page includes a menu with options to Rename, Duplicate, Copy, or Delete
  • These actions are currently UI-only (no data persistence)

• Keyboard Navigation

  • Navigate the taskbar using Tab and Enter for accessibility and speed

---

Getting Started

Install dependencies and start the development server:

# With pnpm (preferred)

pnpm install
pnpm dev

Or use yarn or npm

  
  # With yarn
  yarn install
  yarn dev

  # With npm
  npm install
  npm run dev
  
  

---

Project Info

Flow was created as part of a take-home assessment. The goal was to build a dynamic task bar where users can create pages in multiple ways and reorder them via drag and drop. Functionality of the settings was not a requirement.

^{It demonstrates interactive UI patterns without backend integration. All functionality is handled client-side using in-memory state, so changes are lost on page refresh.}