Next.js 14 Notion
🌐 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
```bash 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
- [Live Demo](#-live-demo) - [Description](#-description) - [Technologies Used](#-technologies-used) - [Get Started](#-get-started) - [Prerequisites](#-prerequisites) - [Installation and Run Locally](#-installation-and-run-locally) - [Scripts](#-scripts) - [Environment Variables](#-environment-variables) - [Deployment](#-deployment) - [Deploy to production (manual)](#-deploy-to-production-manual) - [Deploy on Vercel (recommended)](#-deploy-on-vercel-recommended) - [Deploy on Netlify](#-deploy-on-netlify) - [Features](#-features) - [Contributing](#-contributing) - [Bug / Feature Request](#-bug--feature-request) - [Acknowledgements](#-acknowledgements) - [References](#-references) - [Contact Us](#-contact-us) - [License](#-license)✨ Technologies Used
Notion is built using the following technologies:
- [TypeScript](https://www.typescriptlang.org/): TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. - [Next.js](https://nextjs.org/): Next.js is a React framework for building server-side rendered and statically generated web applications. - [Tailwind CSS](https://tailwindcss.com/): Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. - [Convex](https://convex.dev/): Convex is a TypeScript-first ORM for Node.js and the browser. - [Clerk](https://clerk.dev/): Clerk is a developer-first identity and user management service. - [ESLint](https://eslint.org/): ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. - [Prettier](https://prettier.io/): Prettier is an opinionated code formatter. - [Shadcn-UI](https://ui.shadcn.com/): Shadcn UI is a React UI library that helps developers rapidly build modern web applications. - [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction): Zustand is a small, fast and scalable bearbones state-management solution. - [BlockNote](https://blocknote.dev/): BlockNote is a Notion-like editor for React. - [Zod](https://zod.dev/): Zod is a TypeScript-first schema declaration and validation library. - [Vercel](https://vercel.com/): Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.[](https://skillicons.dev) ## 🧰 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. - [Node.js](https://nodejs.org/en/) - [NPM](https://www.npmjs.com/get-npm) - [Git](https://git-scm.com/downloads) ### ⚙️ Installation and Run Locally **Step 0:** Note :bangbang: the application uses Convex for ORM, therefore, you need to create Convex account [here](https://convex.dev/) and sets the `CONVEX_DEPLOY_KEY` and `NEXT_PUBLIC_CONVEX_URL` environment variables in `.env` file. Note :bangbang: the application uses Clerk for Authentication and User Management, therefore, you need to create Clerk account [here](https://clerk.dev/) and sets the `CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` environment variables in `.env` file. Note :bangbang: the application uses EdgeStore for file uploads, therefore, you need to create EdgeStore account [here](https://edgestore.dev/) 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: ```bash 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: ```bash npm install ``` **Step 3:** Execute the following command in order to run the development server locally: ```bash npm run dev ``` **Step 4:** Open [http://localhost:3000](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](https://en.wikipedia.org/wiki/Environment_variable) are variables that are set in the operating system or shell, typically used to configure programs. **Notion** uses [Convex](https://appwrite.io), and [Clerk](https://clerk.com) 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: ```env CONVEX_DEPLOY_KEY=