An open API service indexing awesome lists of open source software.

https://github.com/jawahiirn/zention

Notion clone named Zentioned : $ )
https://github.com/jawahiirn/zention

convex nextjs15 shadcn-ui tailwindv4 typescript

Last synced: 3 months ago
JSON representation

Notion clone named Zentioned : $ )

Awesome Lists containing this project

README

          

# πŸ§ͺ ZENTION

![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)
![ShadCN UI](https://img.shields.io/badge/ShadCN_UI-111827?style=for-the-badge&logo=tailwindcss&logoColor=white)
![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)
![Convex](https://img.shields.io/badge/Convex-2F80ED?style=for-the-badge&logo=vercel&logoColor=white)
![Clerk](https://img.shields.io/badge/Clerk-3B49DF?style=for-the-badge&logo=clerk&logoColor=white)

---
## ✨ Features

### Authentication

- Google, GitHub, and email/password sign-in
- Persistent session management with secure authentication

### Content Management

- Intuitive, collapsible & resizable sidebar
- Quick document search, delete, archive, and trash management
- Dark, light, and system color modes

### Document

- Customizable icons and covers
- Title support with an advanced rich-text editor
- Publish documents with real-time collaborative updates

---

## πŸš€ Overview

**ZENTION** is a modern, full-stack web application built with the [Next.js App Router](https://nextjs.org/docs/app).

It features:

- ⚑ **Convex** β€” Real-time backend logic and reactive database
- πŸ›‘ **Clerk** β€” Authentication & session management
- 🎨 **Tailwind CSS + ShadCN UI** β€” Beautiful, reusable components
- πŸ” **TypeScript** β€” Robust type safety and enhanced developer experience

> _Designed for speed, scale, and joyful development._

---

## 🧱 Tech Stack


Next.js
TypeScript
Tailwind CSS
ShadCN UI
Convex
Clerk

---

## πŸ“‚ Folder Structure

```txt
.
β”œβ”€β”€ app/ # App Router pages & layouts
β”‚ β”œβ”€β”€ (main)/ # Authenticated routes
β”‚ β”œβ”€β”€ (marketing)/ # Landing page
β”‚ β”œβ”€β”€ (public)/ # Public document pages
β”‚ β”œβ”€β”€ api/ # EdgeStore upload APIs
β”‚ β”œβ”€β”€ providers/ # Global context providers
β”‚ β”œβ”€β”€ error.tsx # Global error boundary page
β”‚ └── layout.tsx # Root app layout
β”‚
β”œβ”€β”€ components/ # Shared reusable components
β”‚ β”œβ”€β”€ ui/ # Wrapped ShadCN UI components
β”‚ β”œβ”€β”€ layout/ # Navbar, sidebar, page shell
β”‚ β”œβ”€β”€ auth/ # Clerk UI components
β”‚ └── ... # Other custom components
β”‚
β”œβ”€β”€ lib/ # Utility functions and libraries
β”‚ β”œβ”€β”€ edgestore.ts # EdgeStore setup for uploads
β”‚ └── utils.ts # General utility helpers
β”‚
β”œβ”€β”€ convex/ # Convex backend logic
β”‚ β”œβ”€β”€ schema.ts # Data models and validation
β”‚ β”œβ”€β”€ documents.ts # Document operations
β”‚ └── auth.ts # Server-side auth guards
β”‚
β”œβ”€β”€ store/ # Zustand global state store
β”œβ”€β”€ middleware.ts # Clerk middleware for route protection
β”œβ”€β”€ public/ # Static files
β”œβ”€β”€ .env.local # Environment variables
└── README.md # This file
```

---

## πŸ›  Getting Started

### 1. Install dependencies

```bash
npm install
```

### 2. Start development server

```bash
npm run dev
```
### 3. Start backend / convex server (
```bash
npx convex dev
```
_start developement and convex server in separate terminals_
---

## 🀝 Contributing

Contributions are welcome! Feel free to fork, submit pull requests, or open issues. Let’s build something awesome together.

---

## πŸ“œ License

Distributed under the MIT License. See `LICENSE` for details.
---