Hadi

A riplica of notion build for teams

GitHub Website

Project Overview

This is a collaborative, real-time text editor with AI-powered features, similar to Notion. It's built with Next.js, Liveblocks, Lexical, and the Vercel AI SDK. Users can create documents, edit them collaboratively, and leverage AI to generate, modify, and improve content. The application also features a chat interface where users can interact with an AI to draft new documents from scratch.

Core Technologies

  • Next.js: The React framework for building the application, utilizing App Router and Server Actions.
  • Liveblocks: Handles real-time collaboration, including presence (cursors), user avatars, notifications, and data synchronization for the editor content.
  • Lexical: A rich text editor framework used for the core editing experience.
  • Vercel AI SDK: Integrates with an AI model (OpenAI's gpt-4o-mini) to provide AI-powered text generation, streaming responses, and a chat interface.
  • Tailwind CSS: For styling the application.
  • Radix UI: Provides accessible and unstyled UI primitives for components like Dialogs and Popovers.
  • Framer Motion: Used for animations, particularly in the floating toolbar.

Key Features

  • Collaborative Editing: Multiple users can edit the same document in real-time, with their cursors and selections visible to others.
  • Rich Text Editor: Supports various formatting options like headings, bold, italics, lists, quotes, and code blocks.
  • AI-Powered Toolbar: A floating toolbar appears on text selection, providing AI actions like "Improve writing", "Fix mistakes", "Summarise", "Translate", and "Change style".
  • AI-Powered Document Creation: A dedicated /chat page allows users to interact with an AI to generate entire documents from a prompt, which can then be created as new pages.
  • Document Management: Users can create new documents, and each document has a unique, shareable URL. A sidebar lists existing pages with infinite scrolling.
  • User Presence & Avatars: Avatars of users currently viewing the document are displayed in the header.
  • Real-time Notifications: A notification system (inbox) alerts users to comments and mentions.
  • Draggable Blocks: Users can click and drag to reorder blocks of content within the editor.
  • Markdown Support: Includes a Markdown shortcut plugin for intuitive content creation.

File Structure and Key Components

app/

  • layout.tsx: The root layout for the application, setting up the main HTML structure, fonts, and global providers.
  • page.tsx: The entry point of the application. It either creates a new room (document) or redirects to the most recently created one.
  • Providers.tsx: Wraps the application in the LiveblocksProvider, configuring authentication and user/room resolution.

app/[pageId]/

  • page.tsx: The main page for a specific document. It renders the Room component, which in turn renders the Editor.
  • Room.tsx: Sets up the RoomProvider to connect to a specific Liveblocks room, enabling the collaborative experience for that page.

app/actions/

  • ai.ts: A Next.js Server Action that handles communication with the OpenAI API via the Vercel AI SDK. It streams AI-generated text back to the client.
  • liveblocks.ts: Server Actions for interacting with the Liveblocks API, such as creating rooms and fetching room information.

app/api/

  • chat/route.ts: An API route that powers the AI chat page, handling the back-and-forth conversation with the AI.
  • liveblocks-auth/route.ts: The authentication endpoint for Liveblocks. It verifies the user and grants them access to Liveblocks rooms.
  • users/route.ts: API route to fetch user information based on user IDs, used for displaying avatars and names.
  • users/search/route.ts: API route for searching users, used for the @mention functionality in the editor.

app/chat/

  • page.tsx: Implements the chat interface using the useChat hook from the Vercel AI SDK, allowing users to generate documents by talking to an AI.

app/components/

  • Editor.tsx: The core of the application. It sets up the LexicalComposer with all necessary plugins, including LiveblocksPlugin, RichTextPlugin, and custom plugins.
  • FloatingToolbar.tsx: The main component for the toolbar that appears on text selection. It acts as a container for FloatingToolbarOptions and FloatingToolbarAi.
  • FloatingToolbarAi.tsx: The AI-specific part of the toolbar, which appears after clicking the "AI" button. It manages the command panel for AI prompts, displays streamed results, and handles actions like "Replace selection" or "Add below".
  • FloatingToolbarOptions.tsx: The initial view of the floating toolbar, providing standard text formatting options (bold, italic, block type) and the entry point to the AI features.
  • Avatars.tsx: Displays the stack of user avatars in the header.
  • DefaultLayout.tsx: The main layout component, including the sidebar with page links and the main content area.
  • DocumentName.tsx: A component that allows editing the document's title, which is synchronized via Liveblocks storage.
  • Notifications.tsx: Implements the user's notification inbox using Liveblocks' UI components.
  • PageLinks.tsx: Renders the list of documents in the sidebar, with infinite scrolling.

app/hooks/

  • useActiveBlock.ts: A hook to determine the current block type (e.g., h1, paragraph) at the cursor's position.
  • usePageLinks.ts: A custom hook that uses swr/infinite to fetch and manage the paginated list of documents for the sidebar.
  • useRange.ts: A hook to get the DOM Range of the user's current text selection in the Lexical editor.
  • useSelection.ts: A hook that provides information about the current Lexical Selection.

app/plugins/

  • DraggableBlockPlugin.tsx: Implements the functionality to drag and drop blocks of content within the editor.
  • PreserveSelectionPlugin.tsx: A utility plugin to save and restore the user's text selection, which is useful when interacting with UI outside the editor (like the AI toolbar) to prevent losing focus.

app/utils/

  • liveblocks.ts: Contains server-side utility functions for interacting with the Liveblocks Node.js client.
  • point.ts & rect.ts: Utility classes for handling 2D points and rectangles, likely used by the DraggableBlockPlugin.