# ZyVOP

ZyVOP is a modern, full-stack blogging and publishing platform designed to empower writers and developers. It supports standalone posts and multi-part series with an advanced rich-text editing experience.

## Technology Stack

### Frontend
- **Framework:** Next.js (App Router)
- **Styling:** Tailwind CSS (Custom themes: Light, Dark, Night)
- **State & Data Fetching:** Apollo GraphQL Client (with Optimistic UI updates)
- **Editor:** Tiptap / ProseMirror (Rich text editor with Markdown support, code highlighting, and image uploads)
- **Icons:** lucide-react

### Backend
- **Framework:** NestJS
- **API:** GraphQL (Code-first approach)
- **Database ORM:** TypeORM (PostgreSQL)
- **Authentication:** JWT (JSON Web Tokens) with Auth Guards and interceptors

## Core Features
1. **Posts & Series:** Users can create standalone articles or organize them into sequential series.
2. **Advanced Editor:** Real-time WYSIWYG editor with features like auto-save, backdating, table of contents generation, and markdown import/export.
3. **Social Features:** Comments, following, bookmarks, and a notification system.
4. **Roles & Permissions:** Role-based access control (Admin vs. Standard User), including requested permissions for creating series.

## Project Structure
- `/frontend`: Next.js application. Contains `/app` (routes), `/components` (UI elements, editor, etc.), `/graphql` (queries/mutations), and `/contexts` (auth, themes).
- `/backend`: NestJS application. Contains `/src/modules` (domain-driven features like posts, series, auth, users) and `/src/common` (guards, decorators, interceptors).

## Notes for AI Agents
- **Styling:** The frontend relies heavily on CSS variables defined in `globals.css` and `utilities.css` for its theming engine. Do not hardcode hex colors; use Tailwind utility classes (e.g., `text-primary`, `bg-secondary`) where applicable.
- **Data Fetching:** Always use Apollo Client's `useQuery` and `useMutation` hooks for data operations in the frontend. Remember to update the Apollo cache or refetch queries when mutations alter data to keep the UI in sync.
- **Icons:** We exclusively use `lucide-react` for icons to maintain a consistent aesthetic. Do not use inline SVGs unless absolutely necessary.