Jotion

A fullstack Notion clone.

Landing Page (Light mode):

Landing Page (Dark mode):

Application (Light Mode):

Application (Dark mode):

Key Features:

• Real-time editor 📝
• Light and Dark mode 🌓
• Infinite child documents 🌲
• Trash bin & soft delete 🗑️
• File upload and replacement 🗃️
• Optional emojis for document title 🌠
• Optional cover image for documents 🖼️
• Expandable sidebar ➡️|⬅️
• Publish and share your note on the web 🌐
• Professional Landing page 🛬
• Restore deleted (archived) files 🔄📄
• Fully mobile responsive 📱

Getting Started

1. Clone this repository:

   git clone [email protected]:domdechiera/jotion.git

2. Install dependencies:

   npm install

3. Rename .env-example to .env and fill in your API keys:

   # Deployment used by `npx convex dev`
   CONVEX_DEPLOYMENT=
   
   # Production
   CONVEX_DEPLOY_KEY=
   
   NEXT_PUBLIC_CONVEX_URL=
   
   # Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=
   
   # Edgestore
   EDGE_STORE_ACCESS_KEY=
   EDGE_STORE_SECRET_KEY=

4. Run Convex development server:

   npx convex dev

5. Run the development server:

   npm run dev

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

The Stack

This is a Next.js project bootstrapped with create-next-app.

This project utilises the following third-party tools:

• TypeScript - JavaScript with syntax for types.
• Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
• shadcn/ui - Beautifully designed components that you can copy and paste into your apps.
• Lucide - Beautiful and consistent icons.
• Vercel - Build, scale, and secure a faster, more personalised web.
• Clerk - Authentication and user management.
• Convex - A fullstack TypeScript development platform.

Deploy on Vercel

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

Check out our Next.js deployment documentation for more details.

---

Looking to learn how to code? Check out Code with Antonio.