konstantinmuenster / notion-clone

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

📓 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

📌 Medium Article: How To Build A Text Editor Like Notion

---

---

Features

• 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.

Frontend

Next.js · React.js · SCSS/SASS

Backend

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

Installation

1. Clone the project

    git clone https://github.com/konstantinmuenster/notion-clone.git
    cd notion-clone

2. Add environment variables

   Backend: Create an .env file in the backend directory:

   FRONTEND_URL="http://localhost:3000"
   DOMAIN="localhost"
   JWT_KEY="yourSecretForTokenGeneration"
   PORT=8080
   MONGO_URI="mongodb+srv://username:[email protected]/database?retryWrites=true&w=majority"
   MAIL_HOST="smtp.sendgrid.net"
   MAIL_PORT=465
   MAIL_USER="apiKey"
   MAIL_SENDER="Your Name <[email protected]>"
   MAIL_PASSWORD="yourSendGridApiKey"
   

   Frontend: Create an .env.local file in the frontend directory:

   NEXT_PUBLIC_API="http://localhost:8080" // references your Backend API endpoint
   

3. Install and run backend (http://localhost:8080)

   cd backend
   npm install
   npm start

4. Install and run frontend (http://localhost:3000)

   cd frontend
   npm install
   npm run dev

Hosting

You can host the application on almost any provider that supports Node applications and custom domains. I decided to host the frontend on vercel.com and the backend on heroku.com. But you can host both, frontend and backend, on the same provider if you like to.

MongoDB Atlas

You have to create a new MongoDB cluster upfront. It will store all of your page and block data. You can create one for free on MongoDB Atlas.

Make sure, you create the following collections:

• pages
• users

Make sure, you allow network access to everyone (due to Heroku).

Backend

If you want to deploy the backend on heroku.com, create a new app in your preferred region on heroku.com.

Make sure, you add all production environmental variables for the backend. You can see which variables are needed in the Installation part of this readme.

Make sure, you add a custom domain for your backend API. Since the application uses a Cookie-based authentication, we have to run backend and frontend on the same domain. I, for example, run the frontend on www.notion-clone.kmuenster.com and the backend on api.notion-clone.kmuenster.com.

Want to run scheduled jobs? To delete inactive pages and users, I run scheduled jobs frequently. If you want this feature as well, you have to add more dynos to your application and run the job $ node jobs/index.js via Heroku Scheduler.

Lastly, you can deploy your app using Heroku Git.

Make sure, that when you push the backend to Heroku, you make a Git subtree push since notion-clone is a mono-repo containing backend and frontend. So run git subtree push --prefix backend heroku master instead of git push heroku master. Thus, we only push the backend part.

Frontend

If you want to deploy the frontend on vercel.com, you can so easily using the Vercel CLI.

With the Vercel CLI, we don't have to make a subtree push, instead we can just switch to the frontend folder and run the vercel command to deploy:

cd frontend
vercel

This will lead you through the setup guide for your frontend application. Afterwards the app should be successfully deployed.

Make sure, you add the Backend API endpoint as a production environmental variable on Vercel.com.

Make sure, you add a custom domain for your frontend (that ideally matches the domain which you have specified in your backend environmental variables 😉)

About

Konstantin Münster – konstantin.digital

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

https://github.com/konstantinmuenster

notion-clone's Issues

Add a license to the repo

For example for people who want to edit the project and use it for a project
Like a MIT License

Why not contributing to https://editorjs.io/ ?

Simple question

• Why not contributing to https://editorjs.io/ ?

• They still have a wide community

• They support many plugins

• They are still used by many production projects

signup submit "Failed to fetch"

when submit in signup page, error "Failed to fetch" occured. does anyone know why?

Two simple questions

Very nice project and serious effort, congrats.

1. In the frontend/pages/account.js in getServerSideProps() why do you make http call when that function runs on server and it can query database directly?

export const getServerSideProps = async (context) => {
  ...
  try {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_API}/users/account`,

2. In the frontend/context/UserContext.js why do you create 2 separate contexts

<UserStateContext.Provider value={state}>
  <UserDispatchContext.Provider value={dispatch}>

instead of one?

<UserContext.Provider value={{state, dispatch}}>

Delete User endpoint

A user should be able to delete it's account.

Select across multiple lines

It's more of a question. With this approach, you can not select text across multiple content-editable. Any idea on how to do that? like in notion?

how to convert blocks to html

I want to covert the blocks into HTML so I can just display it to the user side

any idea how to do that?

.env.sample is missing

Both backend and frontend directories are missing .env.sample and it is a hurdle to start the app on my localhost. I'd be a great help if you could add a .env.sample in your project to help us get started quickly.

Thanks!

Docker container

Hi,
any chance to get this app on a docker container?

Thanks!

logout feature not working

hi, when i clone this repo and connect it to my mongodb instance, i can successfully sign up and it will sign me in properly the first time. it seems like the signup function in the users controller is what is called when the user is first signing up to log them in. i'm able to log out successfully from here. when i log in again (and my user already exists) it looks like you log in via the login function in the users controller. it logs me in successfully, but when i try to log out, i get this error and can't figure out where headers are being set after they're already sent to the client.

wait  - compiling...
event - compiled successfully
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:558:11)
    at DevServer.sendHTML (/Users//Documents//temp/notion-clone/frontend/node_modules/next/dist/server/next-dev-server.js:35:5)
    at DevServer.render (/Users//Documents//temp/notion-clone/frontend/node_modules/next/dist/next-server/server/next-server.js:56:37)
    at async Object.fn (/Users//Documents//temp/notion-clone/frontend/node_modules/next/dist/next-server/server/next-server.js:32:556)
    at async Router.execute (/Users//Documents//temp/notion-clone/frontend/node_modules/next/dist/next-server/server/router.js:23:67)
    at async DevServer.run (/Users//Documents//temp/notion-clone/frontend/node_modules/next/dist/next-server/server/next-server.js:49:656)
    at async DevServer.handleRequest (/Users//Documents//temp/notion-clone/frontend/node_modules/next/dist/next-server/server/next-server.js:20:388) {
  code: 'ERR_HTTP_HEADERS_SENT'
}
events.js:292
      throw er; // Unhandled 'error' event
      ^

Error [ERR_STREAM_WRITE_AFTER_END]: write after end
    at writeAfterEnd (_http_outgoing.js:668:15)
    at ServerResponse.end (_http_outgoing.js:788:7)
    at ServerResponse.end (/Users//Documents//temp/notion-clone/frontend/node_modules/next/dist/compiled/compression/index.js:1:142407)
    at DevServer.handleRequest (/Users//Documents//temp/notion-clone/frontend/node_modules/next/dist/next-server/server/next-server.js:20:476)
Emitted 'error' event on ServerResponse instance at:
    at writeAfterEndNT (_http_outgoing.js:727:7)
    at processTicksAndRejections (internal/process/task_queues.js:81:21) {
  code: 'ERR_STREAM_WRITE_AFTER_END'
}

i noticed this isn't an issue on the deployed site link in this repo, am i missing something?

Can you specify the license of the project? - is it MIT?

What is the license status of this repo/proj?

frontend on npm start failed

PS C:\notion-clone\frontend> npm start

[email protected] start
next start -p $PORT

Error: Could not find a valid build in the 'C:\notion-clone\frontend.next' directory! Try building your app with 'next build' before starting the server.
at Server.readBuildId (C:\notion-clone\frontend\node_modules\next\dist\next-server\server\next-server.js:120:355)
at new Server (C:\notion-clone\frontend\node_modules\next\dist\next-server\server\next-server.js:3:120)
at createServer (C:\notion-clone\frontend\node_modules\next\dist\server\next.js:2:638)
at start (C:\notion-clone\frontend\node_modules\next\dist\server\lib\start-server.js:1:323)
at nextStart (C:\notion-clone\frontend\node_modules\next\dist\cli\next-start.js:19:125)
at C:\notion-clone\frontend\node_modules\next\dist\bin\next:26:341
PS C:\notion-clone\frontend>

Addition of Checkbox and Toggle components

This repo is pretty new just adding this as an issue if someone wants to work on it.

Readme - linked medium blog is behind paywall

Just in case it was not meant to be like this.

Deleting title causes the page to be unusable

Steps to recreate:

1. Go to the demo website which will automatically create a new page
2. Instead of entering a page title, press backspace

Upon pressing backspace, all functionality of the page is removed. A new title cannot be added and no contents on the page can be created

Cancelling image on page title makes page unusable

Steps to recreate:

1. Select the page title region
2. Type "/" and then select the image type
3. When the image selection window pops up, select "Cancel" or close the window
4. The page becomes unusable

Does not allow some valid email addresses

When I try to give a valid email with an embedded '+' in the name (e.g. [email protected])
produces a validation error.

about adding block freely

hello, dev bro.
If i click on the page freely, hopefully, there will add a block automatically.
i should repeatedly click "enter" to go to the place where i prefer to. 😂

match-sorter import statement change

Thanks for the tutorial. It was excellent. I am coming back to JavaScript and React after a hiatus of 4.5 years.

I had to change the following line:

import matchSorter from "match-sorter";

to
import { matchSorter } from "match-sorter";

I am on version match-sorter 6.3.1 (the latest version)

Validation enhancement

For empty string we should not allow

The logo link will create a new page

I don't know it is a feature.

bug.mov

Markdown support

Is this planned?

repo deleted

this link work https://github.com/aliscie/Notion-so-clone sorry

Rendering links as bookmarks

Hello there,

Could you please add some way to render links like notion?

thanks

writing in korean does not work.

need to fix this.