Edit Notes like in Notion.so. Full-Stack App using React/Express. Friday, Nov 13, 2020

GitHUB SOURCE : https://github.com/konstantinmuenster/notion-clone/

馃摀 Notion Clone

Create and Edit Notes like in Notion

This clone tries to replicate some of the great note-taking features Notion has. If you don’t know Notion.so yet, I highly recommend to check it out!

馃憢 Live Demo: notion-clone.kmuenster.com


  • Slash Commands (Type / to turn the block into different content types)
  • HTML Support (Use regular HTML tags like <a> in text blocks)
  • Image Support (Upload images by using the /image command)
  • Drag And Drop (Reorder blocks easily by drag and drop)
  • Guest Editing (Anyone can create public pages and share them via link)
  • User Management (Create an account to create private pages)
  • Scheduled Jobs (Delete inactive pages and accounts automatically)

Tech Stack

The frontend is built with Next.js and fully server-side rendered. On the backend, a REST API handles saving user content and user management.


Next.js 路 React.js 路 SCSS/SASS


Express.js 路 MongoDB with Mongoose 路 Nodemailer 路 JWT (Cookie-based)


  1. Clone the project

     git clone https://github.com/konstantinmuenster/notion-clone.git
     cd notion-clone
  2. Install and run backend (http://localhost:8080)

    cd backend
    npm install
    npm start
  3. Install and run frontend (http://localhost:3000)

    cd frontend
    npm install
    npm run dev


Konstantin M眉nster 鈥 konstantin.digital[email protected]

Distributed under the MIT license. See LICENSE for more information.


Unauthorized reproduction of this site is prohibited, and offenders will be held accountable for their legal responsibilities.
Article Title: Edit Notes like in Notion.so. Full-Stack App using React/Express.
This article URL锛Edit Notes like in Notion.so. Full-Stack App using React/Express.

All Categories

Github Trending Repositories

Explore Github Trending Repositories. See what the GitHub community is most excited about today.

Copyright 2010 - 2020