5.6 KiB
Reactivated Implementation Analysis & Plan - January 19, 2025
Current Project Analysis Completed
Project Structure Overview
- Framework: Django 5.0+ with comprehensive theme park management system
- Package Management: UV (confirmed in .clinerules)
- Frontend Stack: HTMX + AlpineJS + Tailwind CSS (to be replaced)
- Database: PostGIS (GeoDjango enabled)
- Authentication: Django Allauth with Google/Discord OAuth
Django Apps Identified
Core Apps:
- accounts (custom user model)
- parks (main entity)
- rides (park rides)
- operators (park operators)
- property_owners (park ownership)
- manufacturers (ride manufacturers)
- designers (ride designers)
- reviews (user reviews)
- media (photo management)
- moderation (content moderation)
- search (search functionality)
- analytics (page view tracking)
- location (geographic data)
- history_tracking (audit trails)
Key Dependencies Analysis
# Current Dependencies (UV-managed)
Django = "^5.0"
django-htmx = "^1.17.2" # TO BE REPLACED
django-tailwind-cli = "^2.21.1" # COMPATIBLE
django-allauth = "^0.60.1" # COMPATIBLE
django-pghistory = "^3.5.2" # COMPATIBLE
psycopg2-binary = "^2.9.9" # COMPATIBLE
django-cleanup = "^8.0.0" # COMPATIBLE
whitenoise = "^6.6.0" # COMPATIBLE
Template Structure Assessment
Current Templates (~100+ files):
- templates/base/base.html (main layout)
- templates/parks/*.html (park views)
- templates/rides/*.html (ride views)
- templates/accounts/*.html (auth views)
- templates/moderation/*.html (admin views)
- templates/*/partials/*.html (HTMX partials)
Implementation Strategy Decision
Phase 1: Foundation Setup (Week 1)
- Install reactivated package via UV
- Configure Django settings for dual template backends
- Create client/ directory structure
- Setup TypeScript configuration
- Create base React components
Phase 2: Core Entity Templates (Weeks 2-4)
- Convert home.html to React
- Convert park list/detail templates
- Convert ride list/detail templates
- Create type-safe Django model interfaces
Phase 3: Authentication & Advanced Features (Weeks 5-6)
- Convert authentication templates
- Convert search functionality
- Convert moderation interface
- Implement AJAX endpoints with @interface decorator
Phase 4: Testing & Optimization (Week 7)
- Update test suite for React components
- Performance optimization
- Bundle size optimization
- Production deployment validation
Technical Decisions
1. Dual Template Backend Strategy
Decision: Keep both Django and JSX template backends during transition Rationale: Allows gradual migration without breaking existing functionality
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
# ... existing config
},
{
"BACKEND": "reactivated.backend.JSX",
"DIRS": [],
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
"django.contrib.messages.context_processors.messages",
"django.template.context_processors.csrf",
"django.template.context_processors.request",
"django.template.context_processors.static",
]
},
},
]
2. Project Structure
Decision: Create client/ directory at project root Rationale: Follows reactivated best practices
thrillwiki_django_no_react/
├── client/ # NEW: React components
│ ├── index.tsx # Client entry point
│ ├── components/ # Reusable components
│ │ ├── Layout.tsx
│ │ ├── forms/
│ │ └── ui/
│ ├── templates/ # Page templates
│ │ ├── HomePage.tsx
│ │ ├── parks/
│ │ ├── rides/
│ │ └── accounts/
│ └── types/ # TypeScript definitions
├── package.json # NEW: Node.js dependencies
├── tsconfig.json # NEW: TypeScript config
└── ... existing Django structure
3. Type Safety Strategy
Decision: Use reactivated's Pick utility for selective model serialization Rationale: Provides type safety while controlling data transfer
from reactivated import Pick, template
from typing import Literal
# Example: Park detail template
ParkPick = Pick[Park, Literal[
"id", "name", "slug", "description", "status",
"opening_date", "website", "operator.name",
"location.latitude", "location.longitude"
]]
@template
class ParkDetail(NamedTuple):
park: ParkPick
rides_count: int
photos: List[Photo]
4. CSS/Styling Strategy
Decision: Maintain Tailwind CSS within React components Rationale: Existing Tailwind setup is working well, no need to change
5. HTMX Migration Strategy
Decision: Replace HTMX partial updates with React state management Rationale: React provides better state management and component reusability
Entity Relationship Compliance
All implementations will follow the established .clinerules entity relationships:
- Parks → Operators (required)
- Parks → PropertyOwners (optional)
- Rides → Parks (required)
- Rides → Manufacturers/Designers (optional)
Next Steps
- Begin Phase 1 implementation
- Install reactivated package using UV
- Configure Django settings
- Create basic React infrastructure
Decision Date: 2025-01-19 Status: Implementation Plan Approved Estimated Timeline: 7 weeks total