{"id":26462975,"url":"https://github.com/raihan-ramadhan/notion-clone","last_synced_at":"2025-06-21T17:39:34.567Z","repository":{"id":183225965,"uuid":"669484119","full_name":"raihan-ramadhan/notion-clone","owner":"raihan-ramadhan","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-03T07:37:28.000Z","size":4343,"stargazers_count":15,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-18T20:16:16.131Z","etag":null,"topics":["clerk","mongodb","next-cloudinary","nextjs","prisma","shadcn-ui","tiptap"],"latest_commit_sha":null,"homepage":"https://notion-clone-han.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raihan-ramadhan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-22T12:33:19.000Z","updated_at":"2024-05-10T13:57:48.000Z","dependencies_parsed_at":"2023-07-23T14:27:42.353Z","dependency_job_id":"ee79b314-f11c-4333-ba21-45c2a4d691ea","html_url":"https://github.com/raihan-ramadhan/notion-clone","commit_stats":null,"previous_names":["raihan-ramadhan/notion-clone"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raihan-ramadhan%2Fnotion-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raihan-ramadhan%2Fnotion-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raihan-ramadhan%2Fnotion-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raihan-ramadhan%2Fnotion-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raihan-ramadhan","download_url":"https://codeload.github.com/raihan-ramadhan/notion-clone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244374584,"owners_count":20442665,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clerk","mongodb","next-cloudinary","nextjs","prisma","shadcn-ui","tiptap"],"created_at":"2025-03-19T06:38:57.613Z","updated_at":"2025-03-19T06:38:58.091Z","avatar_url":"https://github.com/raihan-ramadhan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"https://github.com/raihan-ramadhan/notion-clone/assets/116264857/2fd4296a-09fc-4747-ab9d-f39ed273809e\n\n\n## About Notion Clone\n\nProject based on [www.notion.so](https://www.notion.so/) with exactly same interface and main functionality\n\nFeatures:\n\n- Same UI with notion.so by utilize TailwindCSS and ShadcnUI\n- Full responsivity and mobile UI\n- Intercepting Routes modal next.js (sign-in\u0026sign-up)\n- Global title and icon current document on metadata, sidebar, header and main page\n- Editor and suggestion using command tiptap\n- Authentication and custom component with Clerk\n- Client fetch with @tanstack/react-query\n- Create update, and delete a document\n- Share a document\n- Forbidden.tsx when try open others user editor\n- Image upload, update, and delete using Cloudinary CDN (signed\u0026invalidate)\n- ORM using Prisma and prisma-json-types-generator\n- Light / Dark mode (depend on system)\n\n## Getting Started\n\n### Prerequisites\n\nNode version 18.x.x\n\n### Installation\n\n1. Clone the repository\n   ```shell\n   git clone https://github.com/raihan-ramadhan/notion-clone.git\n   ```\n1. Install dependencies\n   ```shell\n   npm install --force\n   ```\n   \u003e It must install with flag --force because i used prisma-json-types-generator\n\n### Setup\n1. Setup cloudinary\n\n   Watch this [Tutorial](https://github.com/raihan-ramadhan/notion-clone/assets/116264857/34a66d6d-9f9d-448b-bae0-5ab0e95c17be), the result will be as below\n  ![preset cloudinary](https://github.com/raihan-ramadhan/notion-clone/assets/116264857/e4aa1525-4599-4c14-b89f-7793bf01f8aa)\n\n   and copy-paste env cloudinary from dashboard to our .env\n  ![dashboard cloudinary](https://github.com/raihan-ramadhan/notion-clone/assets/116264857/f54442ec-7ab8-425c-a047-76f4625951f4)\n   \n\n1. Setup clerk\n   \n   watch this [Tutorial](https://github.com/raihan-ramadhan/notion-clone/assets/116264857/5288ae00-13d1-40e9-9424-61595fbb98c5)\n\n1. Setup .env file\n\n   ```js\n   DATABASE_URL=\n\n   CLOUDINARY_API_SECRET=\n   NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=\n   NEXT_PUBLIC_CLOUDINARY_API_KEY=\n\n   NEXT_PUBLIC_CLERK_SIGN_IN_URL=\"/sign-in\"\n   NEXT_PUBLIC_CLERK_SIGN_UP_URL=\"/sign-up\"\n   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=\"/\"\n   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=\"/\"\n   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\n   CLERK_SECRET_KEY=\n   ```\n\n   example :\n\n   ```js\n   DATABASE_URL =\n     \"mongodb+srv://your_username:your_password@notion-clone.zjhiiu.mongodb.net/myDatabase\";\n\n   CLOUDINARY_API_SECRET = \"get_from_dashboard_cloudinary\";\n   NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME = \"get_from_dashboard_cloudinary\";\n   NEXT_PUBLIC_CLOUDINARY_API_KEY = \"get_from_dashboard_cloudinary\";\n\n   NEXT_PUBLIC_CLERK_SIGN_IN_URL=\"/sign-in\";\n   NEXT_PUBLIC_CLERK_SIGN_UP_URL=\"/sign-up\";\n   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=\"/\";\n   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=\"/\";\n   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\"get_from_dashboard_api_clerk\";\n   CLERK_SECRET_KEY=\"get_from_dashboard_api_clerk\";\n   ```\n\n1. Setup Prisma\n\n   synchronize your Prisma schema with your database schema (i used mongoDB in this project)\n\n   ```shell\n   npx prisma generate\n   npx prisma db push\n   ```\n\n   \u003e 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\n\n### Start the app\n\n```shell\nnpm run dev\n```\n\n---\n\nemail me if you have question 👋\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraihan-ramadhan%2Fnotion-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraihan-ramadhan%2Fnotion-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraihan-ramadhan%2Fnotion-clone/lists"}