Frontend Architecture

This page documents the frontend architecture of the Casino Gaming Platform.

Tech Stack

Framework: Angular 18
CSS Framework: TailwindCSS
State Management: NgRx Store (for complex state) and Angular Services (for simpler state)
Authentication: Keycloak integration
Payment Processing: Stripe API

Project Structure

The frontend application follows a feature-based structure:

src/
├── app/
│   ├── app.component.*
│   ├── app.config.ts
│   ├── app.routes.ts
│   ├── auth.guard.ts
│   ├── feature/
│   │   ├── deposit/
│   │   ├── home/
│   │   ├── landing/
│   │   └── login-success/
│   ├── model/
│   │   ├── Game.ts
│   │   ├── Transaction.ts
│   │   └── User.ts
│   ├── service/
│   │   ├── deposit.service.ts
│   │   └── user.service.ts
│   └── shared/
│       ├── components/
│       │   ├── confirmation/
│       │   ├── footer/
│       │   └── navbar/
│       └── services/
│           └── modal-animation.service.ts
├── environments/
└── assets/

Key Modules

Feature Modules

Home: Main dashboard showing available games and user balance
Deposit: Handles virtual currency deposits via Stripe
Landing: Public landing page for non-authenticated users
Login Success: Handles successful authentication from Keycloak

Core Services

User Service: Manages user data and authentication state
Deposit Service: Handles virtual currency deposit operations
Modal Animation Service: Provides consistent animations for modals

Design System

The application follows a consistent design system:

Color Palette

Primary Colors

Deep Blue: #0a1219 (background)
Deep Blue Light: #121e27 (secondary background)
Deep Blue Contrast: #1a2835 (cards, elements)

Accent Colors

Emerald: #10b981 (primary buttons)
Emerald Dark: #059669 (button hover)
Emerald Light: #34d399 (highlights)

Text Colors

Primary Text: #ffffff (white)
Secondary Text: #94a3b8 (light gray)
Tertiary Text: #64748b (darker gray)

Additional Accents

Yellow: #fbbf24 (warnings, highlights)
Red: #ef4444 (errors, destructive actions)
Purple: #8b5cf6 (special features, premium content)

Component Library

The application uses a consistent set of UI components:

Cards: Used for game displays and information containers
Buttons: Primary (emerald) and secondary (deep blue) actions
Navigation: Responsive navbar with mobile optimization
Forms: Consistently styled input fields, dropdowns, and validation
Modals: Used for confirmations, settings, and game launches

Authentication Flow

User clicks "Login" in the application
User is redirected to Keycloak login page
After successful authentication, user is redirected to the login-success component
The application exchanges the auth code for tokens
User is redirected to the home page with active session

Best Practices

Component Organization

Each feature is organized in its own directory
Components follow the Angular best practices for naming and structure
Shared components are placed in the shared module for reuse

Style Guidelines

Use PascalCase for class names with suffixes (Component, Service)
Use kebab-case for component selectors with "app-" prefix
File naming follows Angular conventions: name.component.ts, name.service.ts
Import order: Angular → third-party → local
Use RxJS catchError for HTTP error handling

Performance Considerations

Lazy loading of feature modules
OnPush change detection strategy for performance-critical components
Efficient state management with NgRx or RxJS Subjects
Image optimization for game assets

Development Workflow

Start the development server with proxy configuration

bun run start

bunx @angular/cli serve --proxy-config src/proxy.conf.json

The application will be available at http://localhost:4200
API calls are proxied to the backend service running on http://localhost:8080

For formatting code:

bun run format

prettier --write "src/**/*.{ts,html,css,scss}"

For linting:
```
bun run lint
```
or
```
ng lint
```