Skip to content

Latest commit

 

History

History
110 lines (78 loc) · 3.29 KB

README.md

File metadata and controls

110 lines (78 loc) · 3.29 KB
Raw
preview-notion-clone.-.Copy.mp4

About Notion Clone

Project based on www.notion.so with exactly same interface and main functionality

Features:

  • Same UI with notion.so by utilize TailwindCSS and ShadcnUI
  • Full responsivity and mobile UI
  • Intercepting Routes modal next.js (sign-in&sign-up)
  • Global title and icon current document on metadata, sidebar, header and main page
  • Editor and suggestion using command tiptap
  • Authentication and custom component with Clerk
  • Client fetch with @tanstack/react-query
  • Create update, and delete a document
  • Share a document
  • Forbidden.tsx when try open others user editor
  • Image upload, update, and delete using Cloudinary CDN (signed&invalidate)
  • ORM using Prisma and prisma-json-types-generator
  • Light / Dark mode (depend on system)

Getting Started

Prerequisites

Node version 18.x.x

Installation

  1. Clone the repository 
    git clone https://github.com/raihan-ramadhan/notion-clone.git
  2. Install dependencies 
    npm install --force

    It must install with flag --force because i used prisma-json-types-generator

Setup

  1. Setup cloudinary

    Watch this Tutorial, the result will be as below preset cloudinary

    and copy-paste env cloudinary from dashboard to our .env dashboard cloudinary

  2. Setup clerk

    watch this Tutorial

  3. Setup .env file

    DATABASE_URL=

CLOUDINARY_API_SECRET=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
NEXT_PUBLIC_CLOUDINARY_API_KEY=

NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL="/"
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL="/"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

    example :

    DATABASE_URL =
  "mongodb+srv://your_username:your_password@notion-clone.zjhiiu.mongodb.net/myDatabase";

CLOUDINARY_API_SECRET = "get_from_dashboard_cloudinary";
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME = "get_from_dashboard_cloudinary";
NEXT_PUBLIC_CLOUDINARY_API_KEY = "get_from_dashboard_cloudinary";

NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in";
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up";
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL="/";
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL="/";
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="get_from_dashboard_api_clerk";
CLERK_SECRET_KEY="get_from_dashboard_api_clerk";

  4. Setup Prisma

    synchronize your Prisma schema with your database schema (i used mongoDB in this project)

    npx prisma generate
npx prisma db push

    when run these lines maybe you will get something like this ✘ Type DocumentWhereInput.editorJson is not supported. it is caused by prisma-json-types-generator, but everything is still fine

Start the app

npm run dev

email me if you have question 👋