Git Product home page Git Product logo

notion-clone's Introduction

📓 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


notion clone screenshot


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

About

Konstantin Münster – konstantin.digital[email protected]

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

https://github.com/konstantinmuenster

notion-clone's People

Contributors

konstantinmuenster avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.