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!
- 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
- 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)
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)
Clone the project
git clone https://github.com/konstantinmuenster/notion-clone.git cd notion-clone
Add environment variables
Backend: Create an
.envfile in the
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.localfile in the
NEXT_PUBLIC_API="http://localhost:8080" // references your Backend API endpoint
Install and run backend (http://localhost:8080)
cd backend npm install npm start
Install and run frontend (http://localhost:3000)
cd frontend npm install npm run dev
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.
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:
Make sure, you allow network access to everyone (due to Heroku).
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
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.jsvia 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.
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
Konstantin Münster – konstantin.digital
Distributed under the MIT license. See
LICENSE for more information.