IdeaScribe

# IdeaScribe IdeaScribe is a developer-focused note-taking app inspired by Notion. It explores how a flexible block editor, authentication, persistence, file uploads, and client-side state can come together into a workspace you'd actually want to write in. The scope is intentionally narrow. This isn't an attempt to rebuild Notion feature for feature, it's a focused place for developers to write and organize technical notes with a rich editor. It's built with Next.js and React, uses BlockNote for the editor, Clerk for auth, Convex for application data, EdgeStore for uploads, Zustand for client state, and Tailwind CSS for styling. ## Stack <table className="w-full border border-border rounded-lg overflow-hidden text-sm"> <thead className="bg-muted"> <tr> <th className="text-left font-medium text-muted-foreground px-4 py-2 border-b border-border"> Technology </th> <th className="text-left font-medium text-muted-foreground px-4 py-2 border-b border-border"> Role in IdeaScribe </th> </tr> </thead> <tbody className="divide-y divide-border bg-card text-card-foreground"> <tr> <td className="px-4 py-2 font-medium">Next.js 14</td> <td className="px-4 py-2"> Application framework: App Router, server/client boundaries, routing, and deployment </td> </tr> <tr> <td className="px-4 py-2 font-medium">React 18</td> <td className="px-4 py-2"> Powers the interactive editor and application components </td> </tr> <tr> <td className="px-4 py-2 font-medium">TypeScript</td> <td className="px-4 py-2"> Static typing across the application layer, component props, state, and data contracts </td> </tr> <tr> <td className="px-4 py-2 font-medium">BlockNote</td> <td className="px-4 py-2"> Block-based rich text editor, the core of the writing experience </td> </tr> <tr> <td className="px-4 py-2 font-medium">Clerk</td> <td className="px-4 py-2"> Authentication and user identity, so notes and app state tie to a signed-in user </td> </tr> <tr> <td className="px-4 py-2 font-medium">Convex</td> <td className="px-4 py-2"> Application data layer and backend functions for persisting and querying data </td> </tr> <tr> <td className="px-4 py-2 font-medium">EdgeStore</td> <td className="px-4 py-2">File uploads and storage</td> </tr> <tr> <td className="px-4 py-2 font-medium">Zustand</td> <td className="px-4 py-2"> Lightweight client-side state, used where local state needs to be shared across components </td> </tr> <tr> <td className="px-4 py-2 font-medium">Tailwind CSS</td> <td className="px-4 py-2">Utility-first styling layer</td> </tr> <tr> <td className="px-4 py-2 font-medium">Radix UI</td> <td className="px-4 py-2"> Accessible low-level primitives: dialogs, dropdowns, popovers, labels, alerts </td> </tr> <tr> <td className="px-4 py-2 font-medium">Zod</td> <td className="px-4 py-2"> Runtime validation for structured data </td> </tr> </tbody> </table> ## Architecture ```text Browser │ ▼ ┌──────────────────┐ │ Next.js │ │ App Router │ └────────┬─────────┘ │ ┌────────────┼─────────────┐ │ │ │ ▼ ▼ ▼ ┌──────────┐ ┌────────────┐ ┌───────────┐ │ BlockNote│ │ Zustand │ │ Clerk │ │ Editor │ │ Local State│ │ Auth │ └────┬─────┘ └────────────┘ └─────┬─────┘ │ │ └──────────────┬─────────────┘ ▼ ┌──────────────┐ │ Convex │ │ Data Layer │ └──────┬───────┘ │ ┌──────────┴─────────┐ ▼ ▼ Application EdgeStore Data File Uploads ``` The architecture keeps rich editing separate from persistent data. BlockNote owns the document editing experience, Convex owns persistent data access, Clerk owns identity, and EdgeStore owns uploaded files. ## Core experience The app revolves around the document editor. A typical session looks like: ```text Sign in ↓ Open/Create Note ↓ Edit Block Document ↓ Persist Document State ↓ Attach Files when needed ↓ Return to the Workspace Later ``` The block-based approach fits technical notes well. Content gets rearranged and expanded incrementally instead of getting forced into one long text field. ## UI and component design The app mixes reusable primitives with higher-level note-taking components. Radix-based components handle accessible low-level interactions, and custom components compose them into the actual application behavior: dialogs, menus, popovers, editor controls. That split lets the editor stay focused on content while the surrounding UI handles navigation, actions, account state, and everything else. ## Local development ```bash git clone https://github.com/aarabii/ideascribe.git cd ideascribe npm install npm run dev ``` Build the production bundle: ```bash npm run build ``` Run the production server: ```bash npm run start ``` The deployed app is at `ideascribe.vercel.app`. ## What I explored IdeaScribe was more about building a polished productivity interface than just wiring up CRUD. The interesting parts sit at the boundaries between a rich block-based editor, authenticated sessions, persistent application data, uploaded assets, local UI state, and reusable accessible components. Working through those boundaries gave me a foundation for building interfaces where the editing experience is the product, not just a form bolted onto one.