Nook is a modern, full-stack web application for personal knowledge management, note-taking, and document organization. It is designed for a beautiful, fast, and collaborative user experience, leveraging the latest in React, Next.js, Convex, and modern UI/UX frameworks.

• Tech Stack
• Project Structure
• Main Features
• User Flows
• Advanced Capabilities
• Development & Contribution

• Frontend: React 19, Next.js 15 (App Router, SSR/SSG, API routes)
• Styling: TailwindCSS, Shadcn UI, Radix UI, Lucide Icons
• State Management: Zustand, React Context, usehooks-ts
• Authentication: Clerk.dev (with ClerkProvider)
• Database & Backend: Convex (serverless, real-time, type-safe)
• File Storage: EdgeStore (for cover images, file uploads)
• Rich Text Editor: BlockNote (with image upload integration)
• Notifications: Sonner
• Other: SWR, Zod, Emoji Picker, Next Themes (dark/light mode)

• app/ — Next.js App Router pages, layouts, and route groups
  • (landing)/ — Public landing page and marketing
  • (main)/ — Main authenticated app (documents, navigation, trash, etc.)
  • (public)/ — Public document sharing routes
• components/ — UI components (toolbar, modals, editor, buttons, etc.)
• convex/ — Convex backend functions, schema, and data model
• hooks/ — Custom React hooks (settings, search, scroll, cover image, etc.)
• lib/ — Utility functions and EdgeStore provider
• public/ — Static assets (images, icons, favicons)

• Authentication: Secure sign-in/sign-up with Clerk
• Document Creation: Create, edit, and organize notes/pages in a nested tree
• Rich Text Editing: BlockNote editor with support for text, images, and formatting
• Cover Images: Upload, change, or remove cover images for documents (EdgeStore integration)
• Emoji/Icon Picker: Add custom icons to documents using an emoji picker
• Sidebar Navigation: Hierarchical, collapsible sidebar for document navigation
• Trash & Restore: Soft-delete (archive) documents, restore or permanently delete from Trash
• Search: Command palette (Ctrl+K) for fast document search and navigation
• Document Sharing: Publish notes to the web with a public URL; unpublish at any time
• Dark/Light Mode: User-selectable theme with system preference support
• Settings Modal: User preferences and appearance settings
• Notifications: Toasts for all major actions (create, delete, publish, upload, etc.)
• Accessibility: Keyboard navigation, ARIA roles, focus management, and accessible UI components

• Users must sign in via Clerk to access the main app.
• Unauthenticated users see a landing page with marketing and sign-in options.

• Create a new note from the dashboard or sidebar.
• Edit the note title inline, add content with the rich text editor.
• Organize notes in a nested (parent/child) structure.
• Add icons and cover images for visual organization.

• Delete (archive) notes to move them to Trash.
• Restore or permanently delete notes from Trash.
• "Empty Trash" to delete all trashed notes at once.

• Use the sidebar to browse and expand/collapse document trees.
• Use the command palette (Ctrl+K) to search and jump to any note.

• Publish any note to generate a public, shareable URL.
• Unpublish to make the note private again.

• Toggle dark/light mode.
• Access settings modal for appearance and other preferences.

• Real-Time Data: All document changes are synced in real-time via Convex.
• File Uploads: Cover images and editor images are uploaded and managed via EdgeStore.
• Rich Editor: BlockNote provides a Notion-like editing experience, including image uploads.
• Emoji Picker: Add expressive icons to notes for quick visual identification.
• Accessibility: All interactive elements are keyboard-accessible and screen-reader friendly.
• Responsive Design: Fully responsive for desktop and mobile devices.

1. Install dependencies:

   npm install
   # or
   yarn install

2. Set up environment variables for Clerk, Convex, and EdgeStore (see .env.example if present).
3. Run the development server:

   npm run dev

4. Open http://localhost:3000 in your browser.

• npm run dev — Start the development server
• npm run build — Build for production
• npm run start — Start the production server
• npm run lint — Run ESLint

• Deploys seamlessly to Vercel
• Uses serverless functions and edge storage for scalability

This project is for educational and personal use. See LICENSE file if present.