Name: Notion Clone
Year: 2023
Info:
Idea:
Source:
Description: This project is a clone of the popular productivity app, Notion. It aims to replicate the core features of Notion, providing users with a platform to manage their notes, tasks, and more in one place.
Deploy:
This Notion clone has a wide range of features designed to provide a comprehensive and user-friendly note-taking experience:
- Real-time Database: The application uses a real-time database, ensuring that your data is always up-to-date. 🔗
- Notion-style Editor: Enjoy a seamless writing experience with our Notion-style editor. 📝
- Light and Dark Mode: Choose between light and dark mode for a comfortable viewing experience. 🌓
- Infinite Children Documents: Create an unlimited number of child documents. 🌲
- Trash Can & Soft Delete: Deleted something by mistake? Don't worry, our trash can feature and soft delete option have got you covered. 🗑️
- Authentication: Keep your notes secure with our authentication feature. 🔐
- File Management: Upload, delete, or replace files with ease.
- Document Icons: Personalize your documents with icons that change in real-time. 🌠
- Expandable Sidebar: Easily navigate through your notes with our expandable sidebar. ➡️🔀⬅️
- Mobile Responsiveness: Take notes on the go with our fully responsive mobile design. 📱
- Publish Your Note to the Web: Share your thoughts with the world by publishing your note to the web. 🌐
- Fully Collapsible Sidebar: Save space with our fully collapsible sidebar.
↕️ - Landing Page: Get started on our user-friendly landing page. 🛬
- Cover Image for Each Document: Customize each document with a unique cover image. 🖼️
- Recover Deleted Files: Accidentally deleted a file? Easily recover it with our file recovery feature. 🔄📄
Required: git
git clone https://github.com/zhenya-paitash/app-notionclone-2023.git
cd app-notionclone-2023
mv .env.local.example .env.local
4.1 Convex
-
4.1.1. Go to the website (https://www.convex.dev/) and create an account
-
4.1.2. Go to dashboard and create a new project
-
4.1.3. Go to Settings -> URL and Deploy Key -> Create a production deployment...
-
4.1.4. After switching to PROD, go to Settings -> URL and Deploy Key -> copy all the necessary data as shown in the screenshot and paste them into the .env.local file
4.2 Clerk
-
4.2.1. Go to the website (https://clerk.com/) and create an account
-
4.2.2. Copy and paste API Keys into .env.local file
-
4.2.3. Go to JWT Templates -> Create new JWT Template -> Convex
-
4.2.4. Copy "Issuer" and paste into convex/auth.config.js in the convex.domain value
4.3 Edgestore
-
4.3.1. Go to the website (https://edgestore.dev/) and create an account
-
4.3.2. Create new Project and copy EDGE_ values into .env.local file
Required: Bun (or Node.js)
-
5.1. Install all requirements, build project, deploy database configuration
bun install && bun run build && bun run db:deploy
-
5.2. Start a project
bun run start
Required: Docker
WARNING: Edgestore cannot work with this Docker configuration. If you need images, use manual installation on your system or try to fix it and give me feedback. I will appreciate your help.
-
5.1. Build image
docker build -t app-notionclone-2023 .
-
5.2. Run container
docker run -d -p 3000:3000 --name notionclone app-notionclone-2023
- Introduction
- Environment setup
- Folders setup
- Landing page
- Authentication & Database
- Sidebar
- User Settings
- Schema & API
- Sidebar Item
- Document list
- Archive functionality
- Trash box
- Search functionality
- Settings
- Navbar
- Banner component
- Toolbar component (Icon, Title)
- Cover image (File upload)
- Advanced file upload (delete, replace)
- Editor component
- Preview functionality (Publish your work)
- Deployment
- Docker setup
- Documentation
888 d8b 888 .d8888b. .d8888b. .d8888b. .d8888b.
888 Y8P 888 d88P Y88b d88P Y88b d88P Y88b d88P Y88b
888 888 888 888 888 888 .d88P
8888b. 88888b. 88888b. 88888b. .d88b. 888888 888 .d88b. 88888b. .d8888b 888 .d88b. 88888b. .d88b. .d88P 888 888 .d88P 8888"
"88b 888 "88b 888 "88b 888 "88b d88""88b 888 888 d88""88b 888 "88b d88P" 888 d88""88b 888 "88b d8P Y8b .od888P" 888 888 .od888P" "Y8b.
.d888888 888 888 888 888 888888 888 888 888 888 888 888 888 888 888 888 888 888 888 888 888 888 88888888 888888 d88P" 888 888 d88P" 888 888
888 888 888 d88P 888 d88P 888 888 Y88..88P Y88b. 888 Y88..88P 888 888 Y88b. 888 Y88..88P 888 888 Y8b. 888" Y88b d88P 888" Y88b d88P
"Y888888 88888P" 88888P" 888 888 "Y88P" "Y888 888 "Y88P" 888 888 "Y8888P 888 "Y88P" 888 888 "Y8888 888888888 "Y8888P" 888888888 "Y8888P"
888 888
888 888
888 888