ui-style-guidelisted

# Frontend Style Guide & Coding Conventions This document defines the coding standards, architectural patterns, and design system for the Guessimate Angular frontend. ## 1. Technology Stack - **Framework:** Angular 20+ - **Styling:** Tailwind CSS 4 - **State Management:** Angular Signals & RxJS - **Build System:** Angular CLI (Esbuild) ## 2. Project Structure We follow a **Feature-Based** directory structure. Code is organized by domain feature rather than technical type. ``` src/app/ ├── core/ # Global singletons (Guards, Interceptors, Global Services) ├── layout/ # Layout components (Navigation, Footer, Shell) ├── features/ # Feature modules (Domain logic) │ ├── home/ │ ├── session/ │ │ ├── components/ # Dumb/Presentational components │ │ ├── pages/ # Smart/Container components (Routed) │ │ ├── services/ # Feature-specific state/logic │ │ └── models/ # Feature-specific types │ └── ... ├── websocket/ # WebSocket infrastructure └── shared/ # Shared utilities (Pipes, Directives, Generic UI) ``` ### Naming Conventions - **Files:** Kebab-case (e.g., `session-page.component.ts`, `auth.service.ts`). - **Classes:** PascalCase (e.g., `SessionPageComponent`, `AuthService`). - **Selectors:** `app-` prefix, kebab-case (e.g., `app-user-profile`). - **Signals:** No suffix, descriptive noun/verb (e.g., `user()`, `isLoading()`). - **Observables:** `$` suffix (e.g., `user$`). ## 3. Component Standards #