thrillwiki_laravel/memory-bank/design/DesignMigration.md

Design Migration from Django to Laravel

Overview

This document tracks the migration of design assets and templates from the original Django project to Laravel/Livewire implementation.

Static Assets Structure (Django)

static/
├── css/
│   ├── alerts.css
│   ├── tailwind.css
│   └── src/
│       └── input.css
├── images/
│   ├── default-avatar.png
│   ├── discord-icon.svg
│   ├── favicon.png
│   ├── google-icon.svg
│   └── placeholders/
│       ├── dark-ride.jpg
│       ├── default-park.jpg 
│       ├── default-ride.jpg
│       ├── flat-ride.jpg
│       ├── other-ride.jpg
│       ├── roller-coaster.jpg
│       ├── transport.jpg
│       └── water-ride.jpg
└── js/
    ├── alerts.js
    ├── alpine.min.js
    ├── cdn.min.js
    ├── location-autocomplete.js
    ├── main.js
    ├── park-map.js
    ├── photo-gallery.js
    └── search.js

Primary Templates (Django)

1. Base Templates

   • base/base.html (Main layout template)

2. Feature-specific Templates

   • accounts/ - User authentication and profile templates
   • rides/ - Ride-related templates including listings and details
   • parks/ - Park management templates
   • companies/ - Company and manufacturer templates
   • location/ - Location-related templates
   • moderation/ - Content moderation templates
   • media/ - Media management templates

Migration Plan

Phase 1: Core Assets

1. Static Assets Migration
   • Copy and organize images in Laravel public directory
   • Set up Tailwind CSS with proper configuration
   • Migrate JavaScript assets to Laravel Vite setup

Phase 2: Component Structure

1. Blade Components
   • Convert Django templates to Blade components
   • Implement Livewire components for interactive features
   • Maintain consistent naming and structure

Phase 3: Layout & Design

1. Base Layout
   • Implement base.blade.php mirroring Django base template
   • Set up layout components and partials
   • Configure asset compilation and delivery

Phase 4: Feature Templates

1. Systematic migration of feature-specific templates:
   • Auth & Profile views
   • Park management views
   • Ride management views
   • Company management views
   • Location components
   • Moderation interface
   • Media management views

Progress Tracking

• Phase 1: Core Assets

  • Image assets migration
  • CSS setup and migration
  • JavaScript migration

• Phase 2: Component Structure

  • Base components
  • Interactive components
  • Form components

• Phase 3: Layout & Design

  • Base layout
  • Navigation
  • Common elements

• Phase 4: Feature Templates

  • Auth templates
  • Park templates
  • Ride templates
  • Company templates
  • Location templates
  • Moderation templates
  • Media templates

Technical Decisions

CSS Strategy

• Using Tailwind CSS for styling consistency
• Maintaining utility-first approach from Django project
• Reusing existing Tailwind configuration where possible

JavaScript Strategy

• Leveraging Laravel's Vite for asset compilation
• Using Alpine.js for interactive features (matches Django implementation)
• Maintaining modular structure for JS components

Component Strategy

• Converting Django template partials to Blade components
• Using Livewire for dynamic features
• Maintaining consistent naming conventions

Next Steps

1. Begin Phase 1 with static asset migration
2. Set up base layout structure
3. Implement core components
4. Migrate feature-specific templates systematically