Build your own Notion.

# Build an original app inspired by Notion

You are an experienced product designer and full-stack engineer. Build a working, polished MVP from the brief below. Implement the core journeys end to end; a static mockup is not sufficient. Inspect the current environment, make sensible implementation decisions, and get started. Ask a question only if a missing answer genuinely blocks implementation.

Starting platform: Web. Explicit customized Product & audience and Tech stack requirements take precedence over this starting target.

## Product & audience
Build an original workspace called Folio, inspired by the document and database workflows of Notion. It is for individuals and small teams organizing notes, project knowledge, and simple task databases. The core journey is creating a page, adding structured content, and organizing it in a searchable workspace.

## Design
Use a calm, content-first interface with a collapsible left sidebar, generous whitespace, warm neutral surfaces, readable typography, and a restrained accent. Pages have an editable title and optional emoji icon. Use a floating block menu, unobtrusive inline controls, and breadcrumbs. Tables should be compact but readable. Create an original visual identity and layout.

## Features
1. Page management: create, rename, duplicate, archive, restore, and nest pages. A sidebar tree, favorites, breadcrumbs, and search make pages easy to find. Prevent circular nesting.

2. Block editor: paragraphs, three heading levels, bullets, numbered lists, checkboxes, quotes, dividers, and code blocks. Add blocks with a slash menu; reorder with buttons and drag-and-drop; support keyboard editing and paste without accepting unsafe HTML.

3. Lightweight databases: create a table with text, number, date, checkbox, and select properties; add, edit, and delete records; filter and sort; switch to a board grouped by a select field.

4. Templates and export: provide a meeting note, project plan, and reading list template. Export a page as Markdown and a table as CSV. Show an autosave indicator and handle failed saves visibly.

5. Workspace experience: seed useful sample pages only on first use. Search page titles and text. Provide an empty state and a trash view with reversible deletion.

## Tech stack
Use the existing repository and conventions if there is one. If starting from scratch, use React with TypeScript and a practical, lightweight styling approach. Pick well-maintained libraries only when they materially help. Keep components, domain logic, and data access separate. Explain your chosen stack briefly, then begin implementation.

Follow the persistence requirements in Data & behavior. Personal tools may use IndexedDB. Products with public submission, bookings, permissions, or shared messaging require an authenticated backend with server-side authorization and durable storage. Use infrastructure already available in the environment. Do not put secrets in frontend code. If external infrastructure is unavailable, build a clearly labeled local demo, provide the schema and setup instructions, and state which shared features need configuration. Do not present simulated sharing or authentication as production functionality.

## Data & behavior
Workspace {id, name}; Page {id, workspaceId, parentId, title, icon, favorite, archivedAt, createdAt, updatedAt}; Block {id, pageId, type, content, order}; Database {id, pageId, name}; Property {id, databaseId, name, type, options}; Record {id, databaseId, values}. Persist edits and ordering. A personal MVP can use IndexedDB. Keep the data layer separate so team membership and a backend can be added later.

Acceptance checks and scope:
Verify that a new page survives reload, a nested page can be moved, block ordering remains stable, a checked task stays checked, database filters and sorts combine, and both exports contain current edits. Reject invalid dates and duplicate property names. Autosave debounces changes without losing the latest edit. Do not implement real-time collaboration or AI generation in this first version.

## Originality and assets
The named product is a reference for general workflows only. Use an original product name, visual identity, wording, layout, and assets. Do not copy proprietary code, branded logos, distinctive screens, private APIs, paid templates, or protected media. Use original or appropriately licensed sample data and assets. Build from this brief rather than scraping the reference service. Do not imply affiliation with the referenced company.

## Implementation quality
- Make every visible control work, with clear loading, success, empty, validation, and failure states. Remove controls for unimplemented features.
- Support the target platform and responsive or resizable layouts where appropriate. Use platform-appropriate accessibility semantics, labels, keyboard operation, visible focus, sufficient contrast, and reduced-motion preferences. Provide alternatives for drag-only interactions.
- Validate inputs at the relevant boundary. Treat imported or user-generated content as untrusted; render it safely. Confirm destructive actions or offer undo.
- Keep state changes reliable across navigation and reloads. Never silently lose edits. Handle persistence and network errors with an actionable message.
- Keep the scope realistic. Prioritize the complete primary journey. If a custom Features section differs from the baseline, update the data model, design, and acceptance checks to match it; explicit custom requirements take precedence over baseline assumptions.
- Provide realistic original sample content and a useful empty state. Keep sample data clearly separate from user-created data.

## Delivery and verification
1. Inspect the repository and outline the implementation in a few sentences.
2. Implement the app and connect its actual data flow. Continue until the primary journey works.
3. Run appropriate checks and test the acceptance cases above on the target platform. Verify responsive layouts and keyboard navigation when browser tools are available. For native projects, build with the available SDK and test an emulator or device when possible; report any missing native verification honestly. For games, verify the rules and gameplay loop, not only the menus.
4. Fix observed failures, then provide the runnable result, setup/run instructions, a brief explanation of what is implemented, and any specific configuration or verification limits.

This is a focused MVP. Do not add billing, AI services, or unrelated features unless explicitly requested in the brief. Start building now.