Constellation Front-end Documentation

Welcome to the Constellation front-end documentation hub. This is a comprehensive guide to understanding, developing, and contributing to the project.

📚 Documentation Map

Getting Started

• PROJECT_OVERVIEW.md - Project vision, goals, and architecture
• SETUP_GUIDE.md - Development environment setup and configuration
• QUICK_START.md - 10-minute guide to get coding

Development

• ARCHITECTURE.md - Project structure and design patterns
• CODE_STYLE_GUIDE.md - Coding standards and conventions
• COMPONENTS.md - Component library and reusable components
• HOOKS.md - Custom React hooks reference
• SERVICES.md - API clients and services
• STATE_MANAGEMENT.md - State management patterns

Features

• EDITOR.md - Rich text editor (Plate.js) documentation
• AUTHENTICATION.md - Auth system and OAuth integration
• INTERNATIONALIZATION.md - i18n setup and usage
• FORMS.md - Form handling and validation with Zod

Testing & Quality

• TESTING.md - Testing strategy and guidelines
• TESTING_REFERENCE.md - Test patterns and examples
• LINTING_ESLINT.md - Linting rules and setup

Styling

• STYLING.md - Tailwind CSS and design system
• TAILWIND_GUIDE.md - Tailwind utilities and customization

Advanced Topics

• DEPLOYMENT.md - Build and deployment process
• PERFORMANCE.md - Optimization and performance tips
• DEBUGGING.md - Debugging techniques and tools
• API_INTEGRATION.md - Backend API integration patterns

Troubleshooting

• TROUBLESHOOTING.md - Common issues and solutions
• FAQ.md - Frequently asked questions

Contributing

• CONTRIBUTING.md - How to contribute to the project
• PULL_REQUEST_TEMPLATE.md - PR guidelines

---

Quick Command Reference

# Development
bun install              # Install dependencies
bun dev                  # Start dev server
bun build                # Build for production

# Testing
bun test                 # Run tests in watch mode
bun test:ui              # Open test UI
bun test:coverage        # Generate coverage report

# Code Quality
bun lint                 # Run ESLint

Tech Stack Overview

Category	Technology	Version
Framework	Next.js	15.x
UI Library	React	19.x
Editor	Plate.js	52.x
Styling	Tailwind CSS	3.x
Package Manager	Bun	Latest
Testing	Vitest	4.x
Linting	ESLint	Latest
Component Library	Shadcn/ui	-

Environment Variables

See SETUP_GUIDE.md for detailed environment setup.

Key Features

• 🎨 Rich Text Editor - Powered by Plate.js with extensive plugins
• 🔐 Authentication - Google OAuth integration
• 🌍 Internationalization - Multi-language support (EN, FR)
• 📱 Responsive Design - Mobile-first approach with Tailwind CSS
• 🧪 Comprehensive Testing - Unit and component tests with MSW mocking
• 📊 Graph Visualization - Interactive graph editor and mapping tools
• 🎯 Admin Dashboard - Administrative interface for content management

Project Status

Version: 0.1.0
Status: Active Development
Last Updated: January 2026

---

Getting Help

1. Search the docs - Most questions are answered in the documentation
2. Check troubleshooting - See TROUBLESHOOTING.md
3. Review test files - Tests serve as living documentation
4. Ask questions - Create an issue or reach out to the team

Document Conventions

• 📌 Important - Critical information marked with warning boxes
• 💡 Tips - Helpful hints and best practices
• ⚠️ Warning - Potential pitfalls or common mistakes
• 🔗 Links - Cross-references to related documentation

---

Happy coding! 🚀