Skip to content

jawahiirn/Zention

Repository files navigation

🧪 ZENTION

Next.js
TypeScript
ShadCN UI
TailwindCSS
Convex
Clerk


✨ 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.

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

.
├── 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

npm install

2. Start development server

npm run dev

3. Start backend / convex server (

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.