🎭 Welcome to the LIPAIX Documentation
Complete Guide to the LIPAIX Web Platform
Everything you need to know about developing, deploying, and maintaining the LIPAIX improv theater group's digital ecosystem.
🌟 What is LIPAIX?
LIPAIX is an improv theater group based in France, and this repository contains their complete digital platform. The project serves multiple purposes:
- 🎪 Public Website - Showcases events, player profiles, and ticket booking
- ⚙️ Admin Backoffice - Content management for event coordinators and team managers
- 🤖 Discord Bot - Real-time communication and availability management for players
- 📱 Modern Web Platform - Built with cutting-edge technologies for performance and maintainability
🏗️ Monorepo Architecture
This project uses a monorepo structure to manage multiple related applications in a single repository. This approach provides several benefits:
What is a Monorepo?
A monorepo (monolithic repository) contains multiple projects or applications in a single Git repository. Think of it as having all your related code in one place instead of scattered across multiple repositories.
LIPAIX Monorepo Structure
lipaix-web-v3/
├── apps/ # Application packages
│ ├── web/ # Next.js frontend + PayloadCMS backend
│ ├── discord-bot/ # Discord bot for player management
│ └── admin/ # PayloadCMS admin interface
├── shared/ # Shared code and utilities
│ └── common/ # Common types, services, and business logic
└── docs/ # Documentation (this site!)Benefits of This Approach
- 🔄 Shared Code - Common utilities and types can be reused across applications
- 📦 Consistent Dependencies - All apps use the same versions of packages
- 🚀 Unified Development - Work on multiple parts of the system simultaneously
- 🧪 Easier Testing - Test integrations between components more effectively
- 📚 Better Documentation - All related code and docs in one place
Package Management with pnpm
We use pnpm (Performance NPM) for managing dependencies. pnpm is faster and more efficient than npm, and it handles monorepo workspaces excellently.
bash
# Install dependencies for all packages
pnpm install
# Run a specific app
pnpm run web:dev # Start Next.js development server
pnpm run discord-bot:dev # Start Discord bot development server
pnpm run admin:dev # Start PayloadCMS admin interface🚀 Key Technologies
Frontend: Next.js 15
- React 18 with modern hooks and concurrent features
- App Router for file-based routing and layouts
- Server Components for improved performance and SEO
- TypeScript for type safety and better developer experience
Backend: PayloadCMS
- Headless CMS for content management
- PostgreSQL database with automatic schema generation
- REST & GraphQL APIs generated automatically from collections
- Custom Admin Interface tailored for LIPAIX workflows
Styling: TailwindCSS
- Utility-first CSS framework for rapid development
- Responsive design with mobile-first approach
- Custom design system built for LIPAIX branding
- Dark mode support and accessibility features
Discord Integration: Discord.js
- Real-time communication with players and audience
- Slash commands for easy interaction
- Integration with backend APIs for data consistency
- Automated workflows for event management
Deployment: Railway
- Cloud platform for hosting applications and databases
- Automatic deployments from Git branches
- Environment management and secrets handling
- Scalable infrastructure for production workloads
🎯 Project Goals
For Event Coordinators
- Easy Event Management - Create, edit, and publish events without technical knowledge
- Player Coordination - Track availability and manage team selections
- Content Publishing - Manage event descriptions, photos, and updates
- Ticket Integration - Connect with external booking systems
For Players
- Availability Management - Easily indicate availability for upcoming shows
- Team Communication - Stay updated on event details and team selections
- Discord Integration - Quick access to information and commands
- Profile Management - Maintain personal information and photos
For Audience Members
- Event Discovery - Find upcoming shows and events
- Ticket Booking - Easy access to ticket purchasing
- Information Access - Detailed event descriptions and venue information
- Mobile Experience - Optimized for all devices and screen sizes
For Developers
- Modern Tech Stack - Work with cutting-edge technologies
- Clean Architecture - Well-structured, maintainable codebase
- Type Safety - Full TypeScript support across the stack
- Comprehensive Testing - Robust testing strategy for reliability
🛠️ Development Philosophy
Clean Architecture Principles
We follow Clean Architecture principles to create maintainable, testable, and scalable code:
- Separation of Concerns - Clear boundaries between different parts of the system
- Dependency Inversion - High-level modules don't depend on low-level modules
- Single Responsibility - Each component has one clear purpose
- Testability - Code is designed to be easily testable
Simplified Implementation
While we follow clean architecture principles, we've made practical simplifications to make the code easier to contribute to:
- Global References - Simple dependency injection using singletons
- Repository Pattern - Clean data access abstraction
- Use Case Pattern - Business logic encapsulation
- Shared Types - Consistent data structures across the stack
Code Quality Standards
- TypeScript for type safety and better developer experience
- ESLint for code quality and consistency
- Prettier for code formatting
- Comprehensive testing with Jest and React Testing Library
📚 Documentation Structure
This documentation is organized to help you understand the system from different perspectives:
🚀 Getting Started
- Quick Start Guide - Get up and running in minutes
- Environment Setup - Configure your development environment
- First Contribution - Make your first change to the codebase
🏗️ Architecture & Design
- Monorepo Structure - Understand how everything fits together
- Clean Architecture - Learn the design principles we follow
- Dependency Injection - See how components are connected
🎨 Frontend Development
- React Fundamentals - Core React concepts and patterns
- Next.js App Router - Modern routing and layouts
- Server vs Client Components - Performance optimization strategies
- TailwindCSS - Utility-first styling approach
- SEO & Metadata - Search engine optimization
- Performance - Optimization techniques and best practices
⚙️ Backend & Admin
- PayloadCMS Overview - Content management system
- Database Collections - Data modeling and structure
- Admin Interface - Custom admin dashboard
- API Development - REST and GraphQL endpoints
- Access Control - Security and permissions
🤖 Discord Bot
- Bot Overview - Purpose and functionality
- Command System - Slash commands and interactions
- Integration - How the bot connects with the backend
🚀 DevOps & Deployment
- Railway Deployment - Cloud hosting platform
- Environment Configuration - Managing different environments
- CI/CD Pipeline - Automated testing and deployment
- Monitoring - Performance and error tracking
📖 Development Guide
- Contributing Guidelines - How to contribute to the project
- Code Standards - Coding conventions and best practices
- Testing Strategy - Testing approaches and tools
- Troubleshooting - Common issues and solutions
🎯 Who is This Documentation For?
👨💻 Developers New to Web Development
- Comprehensive explanations of web development concepts
- Step-by-step guides for common tasks
- Code examples with detailed explanations
- Links to external resources for deeper learning
👨💻 Experienced Developers
- Architecture overview and design decisions
- Technology choices and rationale
- Performance considerations and optimization strategies
- Advanced patterns and best practices
👥 Project Managers & Coordinators
- System capabilities and features
- User workflows and processes
- Content management procedures
- Deployment and maintenance information
🎭 LIPAIX Team Members
- Event management procedures
- Player coordination workflows
- Content publishing guidelines
- Technical support information
🚀 Quick Start
Ready to dive in? Here's how to get started:
- 📖 Read the Getting Started Guide - Set up your development environment
- 🏗️ Explore the Architecture - Understand how everything works together
- 🎨 Check out Frontend Development - Learn about Next.js and React
- ⚙️ Dive into Backend & Admin - Understand PayloadCMS and the database
- 🤖 Learn about the Discord Bot - See how it integrates with the system
- 🚀 Review Deployment - Understand how everything gets deployed
🤝 Contributing
This documentation is a living document that should be updated as the codebase evolves. When you make changes to the code:
- Update relevant documentation to reflect your changes
- Add examples for new features or patterns
- Improve explanations for complex concepts
- Fix any inaccuracies you discover
📞 Support & Questions
- 📚 Documentation Issues - Create an issue in this repository
- 🐛 Code Problems - Check the troubleshooting guide first
- 💡 Feature Requests - Discuss in the project discussions
- 🤝 Community - Join the LIPAIX Discord server