Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/domdechiera/jotion
Jotion - A Fullstack Notion Clone 📝
https://github.com/domdechiera/jotion
clerk clerk-auth convex css javascript nextjs nextjs13 react reactjs shadcn shadcn-ui shadcnui tailwind tailwind-css typescript
Last synced: about 1 month ago
JSON representation
Jotion - A Fullstack Notion Clone 📝
- Host: GitHub
- URL: https://github.com/domdechiera/jotion
- Owner: domdechiera
- Created: 2024-10-30T08:23:12.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-18T08:06:09.000Z (about 1 month ago)
- Last Synced: 2024-11-18T08:29:38.986Z (about 1 month ago)
- Topics: clerk, clerk-auth, convex, css, javascript, nextjs, nextjs13, react, reactjs, shadcn, shadcn-ui, shadcnui, tailwind, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://jotion-nu-five.vercel.app
- Size: 2.11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#  Jotion
## A fullstack Notion clone.
**Landing Page (Light mode):**
**Landing Page (Dark mode):**
**Application (Light Mode):**
**Application (Dark mode):**
**Live Demo:** [https://jotion-nu-five.vercel.app/](https://jotion-nu-five.vercel.app/)
***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:
```bash
git clone [email protected]:domdechiera/jotion.git
```
2. Install dependencies:
```bash
npm install
```
3. Rename `.env-example` to `.env` and fill in your API keys:
```bash
# 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=
```
5. Run Convex development server:
```bash
npx convex dev
```
6. Run the development server:
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## The Stack
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
This project utilises the following third-party tools:
- [TypeScript](https://www.typescriptlang.org/) - JavaScript with syntax for types.
- [Tailwind CSS](https://tailwindcss.com/) - Rapidly build modern websites without ever leaving your HTML.
- [shadcn/ui](https://ui.shadcn.com/) - Beautifully designed components that you can copy and paste into your apps.
- [Lucide](https://lucide.dev/) - Beautiful and consistent icons.
- [Vercel](https://vercel.com) - Build, scale, and secure a faster, more personalised web.
- [Clerk](https://clerk.com) - Authentication and user management.
- [Convex](https://convex.dev) - A fullstack TypeScript development platform.
## Deploy on Vercel
The easiest way to deploy this app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
---
Looking to learn how to code? Check out [Code with Antonio](https://www.codewithantonio.com/).