doc.dev Documentation Hub

Welcome to the doc.dev documentation platform documentation. This directory contains all technical documentation for the doc.dev project - a modern documentation platform built with Next.js and Convex.

🚨 CRITICAL - READ FIRST

Before doing ANY work on this project, you MUST read these documents:

1. TENETS.md - Core development principles that guide every decision
2. development/GIT_PREFERENCES.md - Git workflow (commit = git add -A, NEVER push without permission)
3. development/TYPESCRIPT_BEST_PRACTICES.md - TypeScript guidelines (ESSENTIAL for deployment success)
4. architecture/PROJECT_STRUCTURE.md - Complete project structure

📂 Documentation Structure

🏗️ Architecture

System design and project structure documentation.

• PROJECT_STRUCTURE.md ⭐ - Complete project structure and organization

🛠️ Development

Development guidelines, standards, and best practices.

• TENETS.md 🎯 - Core development principles (MUST READ)
• GIT_PREFERENCES.md ⚠️ - Git workflow (MUST READ)
• TYPESCRIPT_BEST_PRACTICES.md ⚠️ - TypeScript guidelines
• UI_STANDARDS.md - UI/UX guidelines
• SHADCN.md - ShadCN UI component documentation
• PLAYWRIGHT_MCP_DOCS.md - Playwright testing setup

✨ Features

Feature-specific documentation and implementation guides.

• TIPTAP_EDITOR.md - TipTap rich text editor implementation
• SEO.md - SEO implementation for documentation platform

📋 Projects

Project-specific documentation.

• doc/ - Documentation platform specific docs
  • DOC_PROJECT_PRD.md - Product requirements
  • DOC_EDITOR_NPM.md - Editor NPM package

🚀 Quick Start Guides

For New Developers

1. Read the TENETS - Core principles
2. Review Git Preferences - Essential workflow
3. Study TypeScript Best Practices - Type safety
4. Understand the Project Structure - Codebase layout
5. Check UI Standards - Component guidelines

For Documentation Work

1. Review TipTap Editor docs - Rich text editing
2. Check Project Structure - Doc app architecture
3. Understand Convex backend integration
4. Review Syntax Highlighting - Code highlighting

For UI Development

1. Start with UI Standards - Design guidelines
2. Review ShadCN docs - Component system
3. Check TipTap Editor - Editor components
4. Follow TypeScript best practices

📊 Documentation Overview

Project Components

• Main Web App (apps/doc/web/) - Next.js documentation platform
• CLI Tools (apps/doc/cli/) - Markdown file watcher and processing
• Convex Backend (packages/convex-doc/) - Real-time document storage
• UI Components (packages/ui/) - Shared ShadCN UI components

Technology Stack

• Frontend: Next.js 15.4.1 with Turbopack
• Backend: Convex real-time database
• Language: TypeScript 5.7.3
• Styling: Tailwind CSS v4
• Editor: TipTap rich text editor
• Testing: Playwright
• Package Manager: pnpm 10.4.1

🔍 Finding Documentation

By Topic

• Git/GitHub → development/GIT_PREFERENCES.md
• TypeScript → development/TYPESCRIPT_BEST_PRACTICES.md
• UI Components → development/UI_STANDARDS.md
• Editor → features/TIPTAP_EDITOR.md
• Project Structure → architecture/PROJECT_STRUCTURE.md
• Testing → development/PLAYWRIGHT_MCP_DOCS.md

By Task

• Setting up development → architecture/PROJECT_STRUCTURE.md
• Building UI components → development/UI_STANDARDS.md
• Editor customization → features/TIPTAP_EDITOR.md
• SEO optimization → features/SEO.md
• Code highlighting → SYNTAX_HIGHLIGHTING_FIX.md

🎯 Key Features Documented

Document Management

• Real-time document editing with TipTap
• Markdown support with MDX
• Syntax highlighting with Shiki
• Document organization and templates

Development Tools

• CLI file watching and processing
• TypeScript strict mode configuration
• Component library with ShadCN UI
• End-to-end testing with Playwright

Platform Features

• Responsive design patterns
• SEO optimization for documentation
• Code syntax highlighting
• Real-time collaboration backend

💡 Documentation Guidelines

1. Keep docs current - Update documentation when changing features
2. Use clear examples - Include code snippets and usage examples
3. Link between docs - Cross-reference related documentation
4. Follow naming conventions - Use descriptive filenames in CAPS_WITH_UNDERSCORES.md
5. Focus on doc.dev - All documentation should be relevant to the documentation platform

🔧 Development Commands

# Start development server (port 3016)
pnpm dev

# Start with testing
pnpm dev:doc-tests

# Start CLI file watcher
pnpm dev:doc-watch

# Build for production
pnpm build

# Run tests
pnpm test

# Lint and format
pnpm lint
pnpm format

Remember: doc.dev is a focused documentation platform. All documentation should support building, maintaining, and extending the documentation editing and management features. 📚