https://github.com/raihan-ramadhan/notion-clone
https://github.com/raihan-ramadhan/notion-clone
clerk mongodb next-cloudinary nextjs prisma shadcn-ui tiptap
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/raihan-ramadhan/notion-clone
- Owner: raihan-ramadhan
- Created: 2023-07-22T12:33:19.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-03T07:37:28.000Z (over 2 years ago)
- Last Synced: 2024-05-18T20:16:16.131Z (about 2 years ago)
- Topics: clerk, mongodb, next-cloudinary, nextjs, prisma, shadcn-ui, tiptap
- Language: TypeScript
- Homepage: https://notion-clone-han.vercel.app
- Size: 4.14 MB
- Stars: 15
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
https://github.com/raihan-ramadhan/notion-clone/assets/116264857/2fd4296a-09fc-4747-ab9d-f39ed273809e
## About Notion Clone
Project based on [www.notion.so](https://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
```shell
git clone https://github.com/raihan-ramadhan/notion-clone.git
```
1. Install dependencies
```shell
npm install --force
```
> It must install with flag --force because i used prisma-json-types-generator
### Setup
1. Setup cloudinary
Watch this [Tutorial](https://github.com/raihan-ramadhan/notion-clone/assets/116264857/34a66d6d-9f9d-448b-bae0-5ab0e95c17be), the result will be as below
and copy-paste env cloudinary from dashboard to our .env
1. Setup clerk
watch this [Tutorial](https://github.com/raihan-ramadhan/notion-clone/assets/116264857/5288ae00-13d1-40e9-9424-61595fbb98c5)
1. Setup .env file
```js
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 :
```js
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";
```
1. Setup Prisma
synchronize your Prisma schema with your database schema (i used mongoDB in this project)
```shell
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
```shell
npm run dev
```
---
email me if you have question 👋