Skip to content

Notion is a single space where you can think, write, and plan. Capture thoughts, manage projects, or even run an entire company β€” and do it exactly the way you want. πŸ“‘

License

Notifications You must be signed in to change notification settings

ladunjexa/nextjs14-notion

Repository files navigation

Next.js 14 Notion

Latest release Stars Fork GitHub commits Pull requests

demo

ladunjexa License Top Language Contributors Release PRs deployment Known Vulnerabilities

🌐 Live Demo

Explore the live demonstration of the project: nextjs14-notion

πŸ“ Description

Notion is a Notion-like application built with Next.js 14, React, Convex, Tailwind, Clerk, and EdgeStore. It is a real-time database and Notion-style editor that allows you to create, edit, and delete documents. It also allows you to publish your note to the web.

Folder Structure
nextjs14-notion/
β”œβ”€β”€ app/
β”œ   β”œβ”€β”€ (main)/
β”œ   β”œ   β”œβ”€β”€ (routes)/
β”œ   β”œ   β”œ   └── documents/
β”œ   β”œ   β”œ       β”œβ”€β”€ page.tsx
β”œ   β”œ   β”œ       └── [documentId]/
β”œ   β”œ   β”œ           └── page.tsx
β”œ   β”œ   β”œβ”€β”€ _components/
β”œ   β”œ   β”œ   β”œβ”€β”€ banner.tsx
β”œ   β”œ   β”œ   β”œβ”€β”€ document-list.tsx
β”œ   β”œ   β”œ   β”œβ”€β”€ item.tsx
β”œ   β”œ   β”œ   β”œβ”€β”€ menu.tsx
β”œ   β”œ   β”œ   β”œβ”€β”€ navbar.tsx
β”œ   β”œ   β”œ   β”œβ”€β”€ navigation.tsx
β”œ   β”œ   β”œ   β”œβ”€β”€ publish.tsx
β”œ   β”œ   β”œ   β”œβ”€β”€ title.tsx
β”œ   β”œ   β”œ   β”œβ”€β”€ trash-box.tsx
β”œ   β”œ   β”œ   └── user-item.tsx
β”œ   β”œ   └── layout.tsx
β”œ   β”œβ”€β”€ (marketing)/
β”œ   β”œ   β”œβ”€β”€ _components/
β”œ   β”œ   β”œ   β”œβ”€β”€ footer.tsx
β”œ   β”œ   β”œ   β”œβ”€β”€ heading.tsx
β”œ   β”œ   β”œ   β”œβ”€β”€ heroes.tsx
β”œ   β”œ   β”œ   β”œβ”€β”€ logo.tsx
β”œ   β”œ   β”œ   └── navbar.tsx
β”œ   β”œ   β”œβ”€β”€ layout.tsx
β”œ   β”œ   └── page.tsx
β”œ   β”œβ”€β”€ (public)/
β”œ   β”œ   β”œβ”€β”€ (routes)/
β”œ   β”œ   β”œ   └── preview/
β”œ   β”œ   β”œ       └── [documentId]/
β”œ   β”œ   β”œ           └── page.tsx
β”œ   β”œ   β”œβ”€β”€ layout.tsx
β”œ   β”œβ”€β”€ api/
β”œ   β”œ   └── edgestore/
β”œ   β”œ       └── [...edgestore]/
β”œ   β”œ           └── route.ts
β”œ   β”œβ”€β”€ favicon.ico
β”œ   β”œβ”€β”€ globals.css
β”œ   β”œβ”€β”€ error.tsx
β”œ   β”œβ”€β”€ not-found.tsx
β”œ   └── layout.tsx
β”œβ”€β”€ components/
β”œ   β”œβ”€β”€ modals/
β”œ   β”œ   β”œβ”€β”€ confirm-modal.tsx
β”œ   β”œ   β”œβ”€β”€ cover-image-modal.tsx
β”œ   β”œ   └── settings-modal.tsx
β”œ   β”œβ”€β”€ providers/
β”œ   β”œ   β”œβ”€β”€ convex-provider.tsx
β”œ   β”œ   β”œβ”€β”€ modal-provider.tsx
β”œ   β”œ   └── theme-provider.tsx
β”œ   β”œβ”€β”€ shared/
β”œ   β”œ   β”œβ”€β”€ cover.tsx
β”œ   β”œ   β”œβ”€β”€ editor.tsx
β”œ   β”œ   β”œβ”€β”€ icon-picker.tsx
β”œ   β”œ   β”œβ”€β”€ mode-toggle.tsx
β”œ   β”œ   β”œβ”€β”€ search-command.tsx
β”œ   β”œ   β”œβ”€β”€ single-image-dropzone.tsx
β”œ   β”œ   β”œβ”€β”€ spinner.tsx
β”œ   β”œ   └── toolbox.tsx
β”œ   └── ui/ (generated by shadcn-ui)
β”œ       β”œβ”€β”€ alert-dialog.tsx
β”œ       β”œβ”€β”€ avatar.tsx
β”œ       β”œβ”€β”€ button.tsx
β”œ       β”œβ”€β”€ command.tsx
β”œ       β”œβ”€β”€ dialog.tsx
β”œ       β”œβ”€β”€ dropdown-menu.tsx
β”œ       β”œβ”€β”€ input.tsx
β”œ       β”œβ”€β”€ label.tsx
β”œ       β”œβ”€β”€ popover.tsx
β”œ       └── skeleton.tsx
β”œβ”€β”€ convex/
β”œ   β”œβ”€β”€ generated/ (generated by convex)
β”œ   β”œβ”€β”€ auth.config.js
β”œ   β”œβ”€β”€ documents.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
β”œ   └── utils.ts
β”œβ”€β”€ public/
β”œ   β”œβ”€β”€ next.svg
β”œ   β”œβ”€β”€ vercel.svg
β”œ   └── assets/
β”œ       β”œβ”€β”€ icons/[[...]].png
β”œ       └── images/[[...]].{svg,png}
β”œβ”€β”€ .eslintrc.json
β”œβ”€β”€ .gitignore
β”œβ”€β”€ README.md
β”œβ”€β”€ components.json
β”œβ”€β”€ next.config.js
β”œβ”€β”€ package.json
β”œβ”€β”€ postcss.config.js
β”œβ”€β”€ tailwind.config.ts
└── tsconfig.ts

πŸ“– Table of Contents

Table of Contents

✨ Technologies Used

Notion is built using the following technologies:
  • TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
  • Next.js: Next.js is a React framework for building server-side rendered and statically generated web applications.
  • Tailwind CSS: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
  • Convex: Convex is a TypeScript-first ORM for Node.js and the browser.
  • Clerk: Clerk is a developer-first identity and user management service.
  • ESLint: ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
  • Prettier: Prettier is an opinionated code formatter.
  • Shadcn-UI: Shadcn UI is a React UI library that helps developers rapidly build modern web applications.
  • Zustand: Zustand is a small, fast and scalable bearbones state-management solution.
  • BlockNote: BlockNote is a Notion-like editor for React.
  • Zod: Zod is a TypeScript-first schema declaration and validation library.
  • Vercel: Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

Technologies Used

🧰 Get Started

To get this project up and running in your development environment, follow these step-by-step instructions.

πŸ“‹ Prerequisites

In order to install and run this project locally, you would need to have the following installed on your local machine.

βš™οΈ Installation and Run Locally

Step 0:

Note ‼️ the application uses Convex for ORM, therefore, you need to create Convex account here and sets the CONVEX_DEPLOY_KEY and NEXT_PUBLIC_CONVEX_URL environment variables in .env file.

Note ‼️ the application uses Clerk for Authentication and User Management, therefore, you need to create Clerk account here and sets the CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY environment variables in .env file.

Note ‼️ the application uses EdgeStore for file uploads, therefore, you need to create EdgeStore account here and sets the EDGE_STORE_ACCESS_KEY and EDGE_STORE_SECRET_KEY environment variables in .env file.

Also, you need to create a JWT template in Clerk and define the JWKS Endpoint as a provider inside convex/auth.config.js file.

Step 1:

Download or clone this repo by using the link below:

git clone https://github.com/ladunjexa/nextjs14-notion.git

Step 2:

Execute the following command in the root directory of the downloaded repo in order to install dependencies:

npm install

Step 3:

Execute the following command in order to run the development server locally:

npm run dev

Step 4:

Open http://localhost:3000 with your browser to see the result.

πŸ“œ Scripts

All scripts are defined in the package.json file. Here is a list of all scripts:

Script Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:3000
npm run build Build your production site to ./dist/
npm run start Start your production site locally
npm run lint Run ESLint

πŸ”’ Environment Variables

Environment variables[^6] can be used for configuration. They must be set before running the app.

Environment variables are variables that are set in the operating system or shell, typically used to configure programs.

Notion uses Convex, and Clerk as external services. You need to create an accounts on Convex and Clerk and get the required credentials to run the app.

Create a .env file in the root directory of the project and add the following environment variables:

CONVEX_DEPLOY_KEY=<CONVEX_DEPLOY_URL>
NEXT_PUBLIC_CONVEX_URL=<NEXT_PUBLIC_CONVEX_URL>

CLERK_PUBLISHABLE_KEY=<CLERK_PUBLISHABLE_KEY>
CLERK_SECRET_KEY=<CLERK_SECRET_KEY>

EDGE_STORE_ACCESS_KEY=<EDGE_STORE_ACCESS_KEY>
EDGE_STORE_SECRET_KEY=<EDGE_STORE_SECRET_KEY>

πŸš€ Deployment

Deploy to production (manual)

You can create an optimized production build with the following command:

npm run build

Deploy on Vercel (recommended)

The easiest way to deploy this Next.js app is to use the Vercel Platform.

Deploy with Vercel

Deploy on Netlify

You can also deploy this Next.js app with Netlify.

Deploy with Netlify

Check out Next.js deployment documentation for more details.

πŸ’‘ Features

  • Real-time database πŸ”—
  • Notion-style editor πŸ“
  • Light and Dark mode πŸŒ“
  • Infinite children documents 🌲
  • Trash can & soft delete πŸ—‘οΈ
  • Authentication πŸ”
  • File upload
  • File deletion
  • File replacement
  • Icons for each document (changes in real-time) 🌠
  • Expandable sidebar βž‘οΈπŸ”€β¬…οΈ
  • Full mobile responsiveness πŸ“±
  • Publish your note to the web 🌐
  • Fully collapsable sidebar ↕️
  • Landing page πŸ›¬
  • Cover image of each document πŸ–ΌοΈ
  • Recover deleted files πŸ”„πŸ“„

πŸ”§ Contributing

contributors

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

To fix a bug or enhance an existing module, follow these steps:

  1. Fork the repo
  2. Create a new branch (git checkout -b improve-feature)
  3. Make the appropriate changes in the files
  4. Commit your changes (git commit -am 'Improve feature')
  5. Push to the branch (git push origin improve-feature)
  6. Create a Pull Request πŸŽ‰

πŸ“© Bug / Feature Request

If you find a bug (failure of a module to execute its intended function), kindly open an issue here by including the issue with a title and clear description.

If you'd like to request a new function, feel free to do so by opening an issue here. Please include sample queries and their corresponding results.

πŸ’Ž Acknowledgements

I'd like to express my gratitude to the following people who helped me with this project and made it possible:

πŸ“š References

CodeWithAntonio. (2023). Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind. E-Learning.

πŸ“ž Contact Us

Telegram LinkedIn Instagram Discord

πŸ“‹ License

Notion is open source software licensed as MIT and is free to use β€” See LICENSE for more details.

About

Notion is a single space where you can think, write, and plan. Capture thoughts, manage projects, or even run an entire company β€” and do it exactly the way you want. πŸ“‘

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published