More Premium Hugo Themes Premium React Themes

Notion Clone

Edit Notes like in Notion.so. Full-Stack App using React/Express.

Notion Clone

Edit Notes like in Notion.so. Full-Stack App using React/Express.

Github Stars Github Stars: 2960
Last Commit Last Commit: Jun 9, 2021 -
First Commit Created: Feb 24, 2024 -
default image

Overview:

The Notion Clone project aims to replicate some of the notable note-taking features available on Notion.so. This project offers functionalities such as slash commands, HTML and image support, drag and drop for block reordering, guest editing, user management, and scheduled jobs for automation. The frontend is developed using Next.js with server-side rendering, while the backend utilizes Express.js, MongoDB with Mongoose, Nodemailer, and JWT for cookie-based authentication.

Features:

  • Slash Commands: Turn blocks into different content types by typing /
  • HTML Support: Use regular HTML tags like in text blocks
  • Image Support: Upload images using the /image command
  • Drag And Drop: Easily reorder blocks through drag and drop
  • Guest Editing: Allow anyone to create public pages and share them via link
  • User Management: Create an account for private page creation
  • Scheduled Jobs: Automatically delete inactive pages and accounts

Installation:

  1. Clone the project
  2. Set up environment variables:
    • Create an .env file in the backend directory
    • Create an .env.local file in the frontend directory
  3. Install and run backend (http://localhost:8080)
  4. Install and run frontend (http://localhost:3000)

Summary:

The Notion Clone project offers a robust note-taking application that mimics functionalities found in Notion.so. With features like slash commands, HTML and image support, drag and drop, guest editing, user management, and scheduled jobs, this project provides a comprehensive experience for users looking to explore a Notion-like note-taking environment. By following the installation guide and leveraging technologies like Next.js, Express.js, and MongoDB, users can deploy and host their own version of the Notion Clone with ease.