Here is the folder structure of this app.
notion-clone/
|- app/
|-- (main)/
|--- _components/
|--- (routes)/documents/[documentId]/
|--- layout.tsx
|-- (marketing)/coures/[courseId]/
|--- _components/
|--- layout.tsx
|--- page.tsx
|-- (public)/
|--- (routes)/preview/[documentId]/
|--- layout.tsx
|-- api/edgestore/[...edgestore]/
|--- route.ts
|-- error.tsx
|-- globals.css
|-- layout.tsx
|-- not-found.tsx
|- components/
|-- modals/
|-- providers/
|-- ui/
|-- cover.tsx
|-- editor.tsx
|-- icon-picker.tsx
|-- mode-toggle.tsx
|-- search-command.tsx
|-- single-image-dropzone.tsx
|-- spinner.tsx
|-- toolbar.tsx
|- config/
|-- index.ts
|- convex/
|-- _generated/
|-- .env.example
|-- auth.config.js
|-- documents.ts
|-- environment.d.ts
|-- schema.ts
|-- tsconfig.json
|- hooks/
|-- use-cover-image.ts
|-- use-origin.ts
|-- use-scroll-top.ts
|-- use-search.ts
|-- use-settings.ts
|- lib/
|-- edgestore.ts
|-- db.ts
|- public/
|- .env.example
|- .env.local
|- .eslintrc.json
|- .gitignore
|- components.json
|- environment.d.ts
|- next.config.js
|- package-lock.json
|- package.json
|- postcss.config.js
|- tailwind.config.ts
|- tsconfig.json- Make sure Git and NodeJS is installed.
- Clone this repository to your local computer.
- Create
.env.localfile in root and convex directory. - Contents of
.env.local:
# .env.local
# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1
# deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=dev:<deployment-name> # team: <team-name>, project: <project-name>
# convex public url
NEXT_PUBLIC_CONVEX_URL="<your-convex-url>"
# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
# edge store keys
EDGE_STORE_ACCESS_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
EDGE_STORE_SECRET_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX- Contents of
convex/.env.local:
# convex/.env.local
# clerk issuer url (go to your clerk dashboard > JWT Templates > New template > Convex > Save and copy your Issuer URL)
CLERK_ISSUER_URL=<your-clerk-issuer-url>- Convex Deployment
- Visit the Convex website: https://convex.dev
- Log in to your Convex account or sign up if you don't have one.
- Once logged in, navigate to the "Deployments" section.
- Create a new deployment or select an existing one.
- Replace
<deployment-name>,<team-name>, and<project-name>in the.env.localfile with your Convex deployment details. - In the Convex dashboard, find the public URL associated with your deployment.
- Replace
<your-convex-url>in the.env.localfile with your Convex public URL.
- Clerk Authentication Keys
- Visit the Clerk dashboard: https://clerk.dev
- Log in to your Clerk account or sign up if you don't have one.
- Go to the "Projects" section and select your project.
- Navigate to the "API Keys" tab.
- Copy the "Publishable Key" and replace
<your-clerk-publishable-key>in the.env.localfile with the copied key. - Copy the "Secret Key" and replace
<your-clerk-secret-key>in the.env.localfile with the copied key. - Go to your Clerk dashboard > JWT Templates > New template > Convex > Save and copy your Issuer URL.
- Replace
<your-clerk-issuer-url>with the url that you copied. - Also, go to Convex dashboard > Settings > Environment Variables > Add
CLERK_ISSUER_URLvariable with value that you copied.
- Edge Store Keys
- If you are using an Edge Store service, navigate to the respective dashboard or service provider.
- Obtain the "Access Key" and "Secret Key" for your Edge Store.
- Replace
<your-edge-store-access-key>and<your-edge-store-secret-key>in the.env.localfile with your Edge Store keys.
-
Open terminal in root directory. Run
npm install --legacy-peer-depsoryarn install --legacy-peer-deps. -
Now app is fully configured 👍 and you can start using this app using either one of
npm run devoryarn devin one tab andnpx convex devin another tab.
NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.
You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.
Useful resources and dependencies that are used in Jotion.
- Thanks to CodeWithAntonio: https://codewithantonio.com/
- @blocknote/core: ^0.9.4
- @blocknote/react: ^0.9.4
- @clerk/clerk-react: ^4.30.2
- @clerk/themes: ^1.7.9
- @edgestore/react: ^0.1.6
- @edgestore/server: ^0.1.6
- @radix-ui/react-alert-dialog: ^1.0.5
- @radix-ui/react-avatar: ^1.0.4
- @radix-ui/react-dialog: ^1.0.5
- @radix-ui/react-dropdown-menu: ^2.0.6
- @radix-ui/react-label: ^2.0.2
- @radix-ui/react-popover: ^1.0.7
- @radix-ui/react-slot: ^1.0.2
- class-variance-authority: ^0.7.0
- clsx: ^2.1.0
- cmdk: ^0.2.0
- convex: ^1.7.1
- emoji-picker-react: ^4.6.7
- lucide-react: ^0.307.0
- next: 14.0.4
- next-themes: ^0.2.1
- react: ^18
- react-dom: ^18
- react-dropzone: ^14.2.3
- react-textarea-autosize: ^8.5.3
- sonner: ^1.3.1
- tailwind-merge: ^2.2.0
- tailwindcss-animate: ^1.0.7
- usehooks-ts: ^2.9.1
- zod: ^3.22.4
- zustand: ^4.4.7
- @types/node: ^20
- @types/react: ^18
- @types/react-dom: ^18
- autoprefixer: ^10.0.1
- eslint: ^8
- eslint-config-next: 14.0.4
- postcss: ^8
- tailwindcss: ^3.3.0
- typescript: ^5
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out Next.js deployment documentation for more details.
You can also give this repository a star to show more people and they can use this repository.
