109 lines
No EOL
4.2 KiB
Markdown
109 lines
No EOL
4.2 KiB
Markdown
# 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
|
|
``` |