# 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.