“Noted” – A Modular Productivity Workspace

To replicate the power and elegance of Notion: a flexible, block-based workspace for notes, tasks, calendars, kanbans, and collaborative docs — all wrapped in a clean, distraction-free interface. “Noted” is designed to help individuals and teams organize anything - from weekly goals to product specs , without friction.

Build a fully functional productivity and note-taking app inspired by Notion. The app should include modular content blocks, collaborative documents, calendar scheduling, kanban views, comments, and customizable workspace structure.

Clean, minimal interface with a left sidebar for navigation and workspace switching

Center canvas for pages (rich text, headings, to-dos, toggles, etc.)

Top nav with page title, breadcrumb navigation, “Share”, and “Comment” buttons

Right-hand contextual panel for comments and activity log

Sidebar with collapsible sections (Private, Shared, Teamspaces, Templates, Trash)

Nested pages support (pages inside pages)

Default pages: “Quick Note”, “Task List”, “Journal”, “Docs”, “Projects”, “Meetings”

Slash (/) command menu for inserting blocks:

Drag-and-drop reordering of blocks

Keyboard shortcuts: Cmd+B, Cmd+I, Cmd+K, etc.

Add properties to any page: date, tags, status, person

Display pages as:

Toggle between views easily within any folder

Comment on any block

Inline comments threaded on the right panel

Notifications (fake/placeholder OK for MVP)

Global search at the top left

Favorites section

Recently viewed

Hover breadcrumbs

Workspace switching dropdown

User avatar, status

Basic dark/light mode toggle

Mock integrations panel (placeholder)

Pages should save persistently (use Supabase or simple local storage)

Fully responsive (desktop-first but mobile usable)

Support adding multiple blocks per page with content editing

Working sidebar + navigation

At least one sample template pre-installed (like “Meeting Notes”)

Slash command menu for adding blocks (text, to-dos, toggles, headings, etc.)

Sidebar for workspace navigation with nested pages

Multiple page views (table, calendar, kanban, list)

Comments on any block

Breadcrumb nav, page sharing, and inline properties

Workspace switcher and dark/light mode toggle

Store content locally or in Supabase. Pages must persist and support multi-block layouts. Clean, minimal UI required, inspired by Notion and linear.app.

Modular Block Editor: Add paragraphs, lists, to-dos, headings, toggles, embeds, and more

Live Page Views: Switch between Table / Calendar / Kanban views in a click

Multi-page Nesting: Create subpages inside any page

Properties: Assign status, dates, tags, and assignees to each block or doc

Block Comments: Collaborative discussion on any part of the doc

Drag & Drop: Move blocks, reorder pages, update boards

Fast Nav: Cmd+K search, recent pages, breadcrumbs

Templates: Start from “Meeting Notes”, “Task List”, or “Journal”

Design system is minimal and legible, inspired by Notion, Linear, and Craft

Used Geist font for crisp UI with enough breathing room

Light and dark mode built from the same base with inverted backgrounds and semantic tokens

Layouts rely on stacked flex containers for modularity

Animations kept subtle: page transitions, hover states, menu pop-ups

• Slash Menu Not Appearing?

Ensure your contentEditable div is focused and listening to / keydown, debounce input and trigger menu on / only if caret is at start or after whitespace

• Kanban/Calendar Cards Not Displaying?

Check that your view logic is pointing to a valid “property”, fallback to a default tag if undefined

• Persistence Bugs?

Double-check object keys saved to localStorage or Supabase match UI schema (especially nested pages)

• Drag/Drop Misalignment?

Wrap blocks in absolute height/flex containers and test on both list and board layouts

• Slash Command Lag?

Debounce heavy rendering, use lazy loading on menus and search lists