Notion Clone is a full-stack productivity workspace inspired by Notion. I built it as an early full-stack project while experimenting with modern React frameworks, real-time application architecture, rich-text editing, authentication, file storage, and generative AI.
The application provides a document-centric workspace where users can create and organize pages using a rich block-based editor, with authentication, persistent data, file uploads, and additional productivity-focused features.
Features
Block-Based Editor
The core editing experience is powered by BlockNote, providing a flexible block-based editor similar to the editing model used by Notion.
Users can work with structured content rather than a simple textarea, making pages easier to compose and organize.
Authentication
User authentication and account management are handled through Clerk, allowing the application to maintain user-specific workspaces and documents.
Document Workspace
The application is designed around a document-first workflow where users can create and manage pages inside their workspace rather than treating every page as a standalone form.
File Uploads
File handling is integrated using EdgeStore, allowing uploaded assets to be managed alongside document content.
AI Integration
The project also integrates Google Generative AI, making the workspace extensible with AI-assisted functionality inside the productivity application.
State Management
Client-side state is handled with Zustand where application-level state needs to be shared across components.
Architecture
The project uses Next.js 14 as the main application framework, combining the frontend and server-side application layer in a single codebase.
The application combines several services and libraries to provide the complete workspace experience:
- Next.js — application framework
- BlockNote — block-based document editor
- Clerk — authentication and user management
- Convex — backend database and application data layer
- EdgeStore — file and asset storage
- Google Generative AI — AI functionality
- Zustand — client-side state management
- Tailwind CSS — styling and UI
- Framer Motion — UI animations
What I learned
This was one of my earlier projects where I explored how a modern full-stack SaaS-style application is structured. Building a Notion-like editor introduced me to problems beyond basic CRUD applications, particularly around rich text editing, application state, authentication, document persistence, and integrating external services.
It also gave me an early hands-on experience with integrating generative AI into an application instead of treating AI as a completely separate service.