thrillwiki_django_no_react/thrillwiki-nextjs-development-prompt.md

# ThrillWiki Next.js Development Prompt

## Project Overview
Build a comprehensive theme park and ride database platform using Next.js. ThrillWiki is a community-driven platform where enthusiasts can discover parks, explore rides, share reviews, and contribute to a moderated knowledge base about theme parks worldwide.

## Core Application Domain

### Primary Entities
- **Parks**: Theme parks, amusement parks, water parks with detailed information, locations, operating details
- **Rides**: Individual ride installations with technical specifications, manufacturer details, operational status
- **Companies**: Manufacturers, operators, designers, property owners with different roles
- **Users**: Community members with profiles, preferences, reviews, and top lists
- **Reviews**: User-generated content with ratings, media, and moderation workflow
- **Locations**: Geographic data for parks and rides with PostGIS-style coordinate handling

### Key Relationships
- Parks contain multiple rides and are operated by companies
- Rides belong to parks, have manufacturers/designers, and reference ride models
- Ride models are templates created by manufacturers with technical specifications
- Users create reviews for parks and rides, maintain top lists, have notification preferences
- Companies have multiple roles (manufacturer, operator, designer, property owner)
- All content goes through moderation workflows before publication

## User Personas & Workflows

### Theme Park Enthusiasts
- Browse and discover parks by location, type, and features
- Search for specific rides and view detailed technical specifications
- Plan park visits with operating information and ride availability
- Track personal ride credits and maintain top lists
- Read authentic reviews from other enthusiasts

### Content Contributors
- Submit new park and ride information for moderation
- Upload photos with proper attribution and categorization
- Write detailed reviews with ratings and media attachments
- Maintain personal profiles with ride statistics and achievements
- Participate in community discussions and rankings

### Park Industry Professionals
- Maintain verified company profiles with official information
- Update park operating details, ride status, and announcements
- Access analytics and engagement metrics for their properties
- Manage official media and promotional content

## Core Features to Implement

### 1. Park Discovery & Information System
- **Park Listings**: Filterable grid/list views with search, location-based filtering, park type categories
- **Park Detail Pages**: Comprehensive information including rides list, operating hours, location maps, photo galleries
- **Interactive Maps**: Geographic visualization of parks with clustering, zoom controls, and location-based search
- **Advanced Search**: Multi-criteria search across parks, rides, locations, and companies

### 2. Ride Database & Technical Specifications
- **Ride Catalog**: Comprehensive database with manufacturer information, technical specs, operational history
- **Ride Detail Pages**: In-depth information including statistics, photos, reviews, and related rides
- **Manufacturer Profiles**: Company information with ride model catalogs and installation history
- **Technical Comparisons**: Side-by-side ride comparisons with filterable specifications

### 3. User-Generated Content System
- **Review Platform**: Structured review forms with ratings, text, photo uploads, and helpful voting
- **Photo Management**: Upload system with automatic optimization, categorization, and attribution tracking
- **Top Lists**: Personal ranking systems for rides, parks, and experiences with drag-and-drop reordering
- **User Profiles**: Personal statistics, ride credits, achievement tracking, and social features

### 4. Content Moderation Workflow
- **Submission Queue**: Administrative interface for reviewing user-submitted content
- **Approval Process**: Multi-stage review with rejection reasons, feedback, and resubmission options
- **Quality Control**: Automated checks for duplicate content, inappropriate material, and data validation
- **User Management**: Moderation tools for user accounts, banning, and content removal

### 5. Location & Geographic Services
- **Location Search**: Address-based search with autocomplete and geographic boundaries
- **Proximity Features**: Find nearby parks, distance calculations, and regional groupings
- **Map Integration**: Interactive maps with custom markers, clustering, and detailed overlays
- **Geographic Filtering**: Location-based content filtering and discovery

## Technical Architecture Requirements

### Frontend Stack
- **Next.js 14+** with App Router for modern React development
- **TypeScript** for type safety and better developer experience
- **Tailwind CSS** for utility-first styling and responsive design
- **Shadcn/ui** for consistent, accessible component library
- **React Hook Form** with Zod validation for form handling
- **TanStack Query** for server state management and caching
- **Zustand** for client-side state management
- **Next-Auth** for authentication and session management

### Data Management
- **API Integration**: RESTful API consumption with comprehensive error handling
- **Image Optimization**: Cloudflare Images integration with multiple variants
- **Caching Strategy**: Multi-level caching with SWR patterns and cache invalidation
- **Search Implementation**: Client-side and server-side search with debouncing
- **Infinite Scrolling**: Performance-optimized pagination for large datasets

### UI/UX Patterns
- **Responsive Design**: Mobile-first approach with tablet and desktop optimizations
- **Dark/Light Themes**: User preference-based theming with system detection
- **Loading States**: Skeleton screens, progressive loading, and optimistic updates
- **Error Boundaries**: Graceful error handling with user-friendly messages
- **Accessibility**: WCAG compliance with keyboard navigation and screen reader support

## Key Components to Build

### Layout & Navigation
- **Header Component**: Logo, navigation menu, user authentication, search bar, theme toggle
- **Sidebar Navigation**: Collapsible menu with user context and quick actions
- **Footer Component**: Links, social media, legal information, and site statistics
- **Breadcrumb Navigation**: Contextual navigation with proper hierarchy

### Park Components
- **ParkCard**: Compact park information with image, basic details, and quick actions
- **ParkGrid**: Responsive grid layout with filtering and sorting options
- **ParkDetail**: Comprehensive park information with tabbed sections
- **ParkMap**: Interactive map showing park location and nearby attractions
- **OperatingHours**: Dynamic display of park hours with seasonal variations

### Ride Components
- **RideCard**: Ride preview with key specifications and ratings
- **RideList**: Filterable list with sorting and search capabilities
- **RideDetail**: Complete ride information with technical specifications
- **RideStats**: Visual representation of ride statistics and comparisons
- **RidePhotos**: Photo gallery with lightbox and attribution information

### User Interface Components
- **UserProfile**: Personal information, statistics, and preference management
- **ReviewForm**: Structured review creation with rating inputs and media upload
- **TopListManager**: Drag-and-drop interface for creating and managing rankings
- **NotificationCenter**: Real-time notifications with read/unread states
- **SearchInterface**: Advanced search with filters, suggestions, and recent searches

### Content Management
- **SubmissionForm**: Content submission interface with validation and preview
- **ModerationQueue**: Administrative interface for content review and approval
- **PhotoUpload**: Drag-and-drop photo upload with progress tracking and optimization
- **ContentEditor**: Rich text editor for descriptions and review content

## Data Models & API Integration

### API Endpoints Structure
```typescript
// Parks API
GET /api/parks/ - List parks with filtering and pagination
GET /api/parks/{slug}/ - Park details with rides and reviews
GET /api/parks/{slug}/rides/ - Rides at specific park
GET /api/parks/search/ - Advanced park search

// Rides API  
GET /api/rides/ - List rides with filtering
GET /api/rides/{park_slug}/{ride_slug}/ - Ride details
GET /api/rides/manufacturers/{slug}/ - Manufacturer information
GET /api/rides/search/ - Advanced ride search

// User API
GET /api/users/profile/ - Current user profile
PUT /api/users/profile/ - Update user profile
GET /api/users/{username}/ - Public user profile
POST /api/users/reviews/ - Create review

// Content API
POST /api/submissions/ - Submit new content
GET /api/submissions/status/ - Check submission status
POST /api/photos/upload/ - Upload photos
GET /api/moderation/queue/ - Moderation queue (admin)
```

### TypeScript Interfaces
```typescript
interface Park {
  id: number;
  name: string;
  slug: string;
  description: string;
  status: string;
  park_type: string;
  location: ParkLocation;
  operator: Company;
  opening_date: string;
  ride_count: number;
  coaster_count: number;
  average_rating: number;
  banner_image: Photo;
  card_image: Photo;
  url: string;
}

interface Ride {
  id: number;
  name: string;
  slug: string;
  description: string;
  park: Park;
  category: string;
  manufacturer: Company;
  ride_model: RideModel;
  status: string;
  opening_date: string;
  height_requirement: number;
  average_rating: number;
  coaster_stats?: RollerCoasterStats;
}

interface User {
  id: number;
  username: string;
  display_name: string;
  profile: UserProfile;
  role: string;
  theme_preference: string;
  privacy_level: string;
}
```

## Authentication & User Management

### Authentication Flow
- **Registration**: Email-based signup with verification workflow
- **Login**: Username/email login with remember me option
- **Social Auth**: Integration with Google, Facebook, Discord for quick signup
- **Password Reset**: Secure password reset with email verification
- **Two-Factor Auth**: Optional 2FA with authenticator app support

### User Roles & Permissions
- **Regular Users**: Create reviews, manage profiles, submit content
- **Verified Contributors**: Trusted users with expedited content approval
- **Moderators**: Content review, user management, community oversight
- **Administrators**: Full system access, user role management, system configuration

### Privacy & Security
- **Privacy Controls**: Granular privacy settings for profile visibility and data sharing
- **Content Moderation**: Automated and manual content review processes
- **Data Protection**: GDPR compliance with data export and deletion options
- **Security Features**: Login notifications, session management, suspicious activity detection

## Performance & Optimization

### Loading & Caching
- **Image Optimization**: Cloudflare Images with responsive variants and lazy loading
- **API Caching**: Intelligent caching with stale-while-revalidate patterns
- **Static Generation**: Pre-generated pages for popular content with ISR
- **Code Splitting**: Route-based and component-based code splitting for optimal loading

### Search & Filtering
- **Client-Side Search**: Fast text search with debouncing and result highlighting
- **Server-Side Filtering**: Complex filtering with URL state management
- **Infinite Scrolling**: Performance-optimized pagination for large datasets
- **Search Analytics**: Track popular searches and optimize content discovery

### Mobile Optimization
- **Responsive Design**: Mobile-first approach with touch-friendly interfaces
- **Progressive Web App**: PWA features with offline capability and push notifications
- **Performance Budgets**: Strict performance monitoring with Core Web Vitals tracking
- **Accessibility**: Full keyboard navigation and screen reader compatibility

## Content Management & Moderation

### Submission Workflow
- **Content Forms**: Structured forms for parks, rides, and reviews with validation
- **Draft System**: Save and resume content creation with auto-save functionality
- **Preview Mode**: Real-time preview of content before submission
- **Submission Tracking**: Status updates and feedback throughout review process

### Moderation Interface
- **Review Queue**: Prioritized queue with filtering and batch operations
- **Approval Workflow**: Multi-stage review with detailed feedback options
- **Quality Metrics**: Track approval rates, review times, and content quality
- **User Reputation**: Contributor scoring system based on submission quality

### Media Management
- **Photo Upload**: Drag-and-drop interface with progress tracking and error handling
- **Image Processing**: Automatic optimization, resizing, and format conversion
- **Attribution Tracking**: Photographer credits and copyright information
- **Bulk Operations**: Batch photo management and organization tools

## Analytics & Insights

### User Analytics
- **Engagement Tracking**: Page views, time on site, and user journey analysis
- **Content Performance**: Popular parks, rides, and reviews with engagement metrics
- **Search Analytics**: Popular search terms and content discovery patterns
- **User Behavior**: Registration funnels, retention rates, and feature adoption

### Content Insights
- **Submission Metrics**: Content creation rates, approval times, and quality scores
- **Review Analytics**: Rating distributions, helpful votes, and review engagement
- **Geographic Data**: Popular regions, park visit patterns, and location-based insights
- **Trending Content**: Real-time trending parks, rides, and discussions

## Development Guidelines

### Code Organization
- **Feature-Based Structure**: Organize code by features rather than file types
- **Component Library**: Reusable components with Storybook documentation
- **Custom Hooks**: Shared logic extraction with proper TypeScript typing
- **Utility Functions**: Common operations with comprehensive testing

### Testing Strategy
- **Unit Testing**: Component and utility function testing with Jest and React Testing Library
- **Integration Testing**: API integration and user workflow testing
- **E2E Testing**: Critical user journeys with Playwright or Cypress
- **Performance Testing**: Core Web Vitals monitoring and performance regression testing

### Deployment & DevOps
- **Environment Management**: Development, staging, and production environments
- **CI/CD Pipeline**: Automated testing, building, and deployment
- **Monitoring**: Error tracking, performance monitoring, and user analytics
- **Security**: Regular security audits, dependency updates, and vulnerability scanning

This comprehensive platform should provide theme park enthusiasts with a rich, engaging experience while maintaining high content quality through effective moderation and community management systems.