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.
- 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 🔄📄
To get this project up and running in your development environment, follow these step-by-step instructions.
To install and run this project locally, you would need to have the following installed on your local machine.
Node version 18.x.x
git clone https://github.com/ImRi8/Notion.gitnpm i# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=npx convex dev
npm run dev