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

1. User clicks "Login" in the application
2. User is redirected to Keycloak login page
3. After successful authentication, user is redirected to the login-success component
4. The application exchanges the auth code for tokens
5. 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

1. Install dependencies:

   bun install
   

2. Start the development server with proxy configuration:

   bun run start
   

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

3. The application will be available at http://localhost:4200

4. API calls are proxied to the backend service running on http://localhost:8080

5. For code formatting:

   bun run format
   

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

6. For linting:

   bun run lint
   

   This runs: ng lint

7. For building the application:

   bun run build
   

   This creates an optimized production build

8. For running tests:

   bun run test
   

   This runs the Jasmine/Karma test suite

Environment Configuration

The application uses environment files for configuration:

• environment.ts: Development configuration
• environment.prod.ts: Production configuration

Key configuration options:

• apiUrl: Backend API base URL
• stripePublishableKey: Stripe public key
• oauth2Config: OAuth2 provider settings

Proxy Configuration

The proxy.conf.json file configures API proxying for development:

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}