thats-me/.github/copilot-instructions.md

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
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

# 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