Project Structure

Overview

This section provides comprehensive guidance on project structure for both frontend and backend development. Our projects follow modern architecture patterns with clear separation of concerns and best practices.

Structure Overview

Our project structure is divided into two main areas:

🎨 Frontend Structure

Modern Vue.js applications with TypeScript, focusing on:

• Component-driven architecture
• State management with Pinia
• Type-safe development
• Modern build tools (Vite)
• Responsive design with Tailwind CSS

View Frontend Structure →

⚙️ Backend Structure

Microservices architecture with support for:

• Node.js (Hono), Go (Gin), and Python (FastAPI)
• Standard design patterns (Repository, Service Layer, Controller)
• Robust exception handling
• OpenAPI documentation
• Containerized deployment

View Backend Structure →

Quick Navigation

Area	Technology Stack	Key Features
Frontend	Vue.js 3 + TypeScript + Vite	Component-driven, Pinia state management, Tailwind CSS
Backend	Node.js/Go/Python	Microservices, OpenAPI, Containerized deployment

Common Principles

Code Organization

• Separation of Concerns: Clear boundaries between different layers
• Modularity: Reusable and maintainable code modules
• Type Safety: TypeScript for frontend, strong typing for backend
• Testing: Comprehensive test coverage for all components

Development Standards

• Naming Conventions: Consistent naming across all projects
• Documentation: Clear and up-to-date documentation
• Code Quality: Linting, formatting, and code review processes
• Version Control: Git workflow with conventional commits

Performance & Security

• Performance: Optimized builds and efficient runtime
• Security: Input validation, authentication, and authorization
• Monitoring: Health checks and error tracking
• Accessibility: WCAG compliance for frontend applications

Getting Started

1. Choose your area: Frontend or Backend
2. Review the structure: Understand the folder organization
3. Follow the patterns: Implement the recommended architecture
4. Use the examples: Reference the provided code examples
5. Maintain standards: Follow the established best practices

---

For detailed information about each area, click on the respective links above.