# Copilot Instructions for "That's Me" Project

## Project Architecture

This is a dual-stack application with separate **Laravel backend** and **Quasar frontend**:

- **Backend** (`/backend/`): Laravel 12 with Livewire/Volt for server-side rendered admin panels
- **Frontend** (`/frontend/`): Quasar/Vue 3 SPA with anime.js for "LifeWave" visualizations
- **Core Feature**: Interactive wave visualization showing life events as animated points

## Key Technology Patterns

### Backend (Laravel/Livewire/Volt)
- **Livewire Volt**: Single-file components in `resources/views/livewire/` with PHP class logic at top
- **Flux UI**: Use `flux:` prefixed components (`flux:input`, `flux:button`, `flux:modal`) instead of raw HTML
- **Layout Pattern**: Nested layouts via `x-layouts.app` → `x-layouts.app.sidebar` for main app UI
- **Auth**: Uses Laravel Breeze with Volt components (`auth.login`, `auth.register`, etc.)
- **Routing**: Volt routes defined in `routes/web.php` as `Volt::route('path', 'component.name')`

### Frontend (Quasar/Vue)
- **Animation Core**: Uses anime.js for wave animations (see `/test/` prototypes)
- **State Management**: Pinia for Vue state
- **Build Tool**: Vite with Quasar CLI
- **Components**: Lives in `frontend/src/pages/` and `frontend/src/components/`

### Development Setup
- **Backend Dev**: `cd backend && php artisan serve` + `npm run dev` (Vite for assets)
- **Frontend Dev**: `cd frontend && quasar dev`
- **HTTPS Config**: Backend Vite configured for MAMP SSL certificates
- **Testing**: Pest for backend tests (`php artisan test`)

## File Structure Conventions

### Backend Key Files
- `routes/web.php`: Main routing with Volt component mappings
- `resources/views/livewire/`: Volt single-file components 
- `resources/views/components/layouts/`: Layout components
- `app/Providers/VoltServiceProvider.php`: Volt mount configuration
- `resources/css/app.css`: Imports Tailwind + Flux UI

### Frontend Key Files
- `src/pages/WavePage.vue`: Main life visualization component
- `src/utils/ConnectedDotsVisualization.js`: Wave animation utilities
- `quasar.config.js`: Build configuration
- `/test/anime-*.html`: Animation prototypes and examples

## Specific Coding Patterns

### Livewire/Volt Components
```php
<?php
use Livewire\Volt\Component;
use Livewire\Attributes\Layout;

new #[Layout('components.layouts.auth')] class extends Component {
    public string $email = '';
    
    public function someMethod(): void {
        // Component logic
    }
}; ?>

<div>
    <!-- Blade template with Flux UI -->
    <flux:input wire:model="email" :label="__('Email')" />
</div>
```

### Wave Animation Pattern
The project centers around animated life event visualizations:
- Life events have `value` (emotional weight), `x` (timeline position), `imageUrl`, `title`
- Uses anime.js for smooth wave animations with multiple sine wave layers
- See `test/anime-points-animation.html` for complete implementation patterns

### Flux UI Usage
- Always use `flux:` components: `flux:button`, `flux:input`, `flux:modal`, `flux:navlist`
- Layout components: `flux:header`, `flux:sidebar`, `flux:main`
- Include `@fluxScripts` in layout files
- Wire navigation: `wire:navigate` for SPA-like navigation

## Development Workflows

- **Backend Changes**: Run `npm run dev` in `/backend/` for asset hot reload
- **Component Testing**: Use Pest with Volt test helpers: `Volt::test('component.name')`
- **Styling**: Tailwind + Flux UI (no custom CSS files needed)
- **Animation Prototyping**: Create in `/test/` directory first, then integrate

## Project-Specific Guidelines

1. **Animation First**: Wave visualizations are core - always consider animation performance
2. **Offline Support**: Frontend designed for PWA with offline capabilities
3. **Dual Development**: Backend and frontend are separate apps - coordinate API contracts
4. **Component Isolation**: Livewire components should be self-contained with embedded logic
5. **German Language**: UI text often in German (`__('German text')` for translations)

## Common Commands

```bash
# Backend
cd backend && composer install && php artisan serve
cd backend && npm run dev  # Asset compilation

# Frontend  
cd frontend && npm install && quasar dev
cd frontend && quasar build  # Production build

# Testing
cd backend && php artisan test
```