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

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

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.