diff --git a/.replit b/.replit index 5f30feb2..3520ba63 100644 --- a/.replit +++ b/.replit @@ -54,10 +54,6 @@ outputType = "webview" localPort = 5000 externalPort = 80 -[[ports]] -localPort = 38645 -externalPort = 3002 - [[ports]] localPort = 41923 externalPort = 3000 diff --git a/attached_assets/Pasted--Enhanced-ThrillWiki-Park-Listing-Page-Optimized-Prompt-xml-instructions-Create-an-improved-1758662639774_1758662639774.txt b/attached_assets/Pasted--Enhanced-ThrillWiki-Park-Listing-Page-Optimized-Prompt-xml-instructions-Create-an-improved-1758662639774_1758662639774.txt new file mode 100644 index 00000000..9c437e53 --- /dev/null +++ b/attached_assets/Pasted--Enhanced-ThrillWiki-Park-Listing-Page-Optimized-Prompt-xml-instructions-Create-an-improved-1758662639774_1758662639774.txt @@ -0,0 +1,147 @@ +# Enhanced ThrillWiki Park Listing Page - Optimized Prompt + +```xml + +Create an improved park listing page for ThrillWiki that prioritizes user experience with intelligent filtering, real-time autocomplete search, and clean pagination. Build using Django Cotton templates, HTMX for dynamic interactions, and AlpineJS for reactive filtering components. Focus on accessibility, performance, and intuitive navigation without infinite scroll complexity. + +Key requirements: +- Fast, responsive autocomplete search leveraging available database fields +- Multi-criteria filtering with live updates based on existing Park model attributes +- Clean pagination with proper Django pagination controls +- Optimized park card layout using CloudFlare Images +- Accessible design following WCAG guidelines +- Mobile-first responsive approach + + + +Working with ThrillWiki's existing Django infrastructure: +- Unknown Park model structure - will need to examine current fields and relationships +- Potential integration with PostGIS if geographic data exists +- Unknown filtering criteria - will discover available Park attributes for filtering +- Unknown review/rating system - will check if rating data is available + +The page should integrate with: +- Django Cotton templating system for consistent components +- HTMX endpoints for search and filtering without full page reloads +- AlpineJS for client-side filter state management +- CloudFlare Images for optimized park images (if image fields exist) +- Existing ThrillWiki URL patterns and view structure + + + +Park listing page structure (adaptable based on discovered model fields): +```html + +
+ + + + +
+ +
+ +
+ + +
+ + + + +
+ + + +``` + +Expected development approach: +1. Examine existing Park model to understand available fields +2. Identify searchable and filterable attributes +3. Design search/filter UI based on discovered data structure +4. Implement pagination with Django's built-in Paginator +5. Optimize queries and add HTMX interactions + + + +Park (structure to be discovered), related models TBD +PostgreSQL full-text search, PostGIS if geographic fields exist +Django Cotton + HTMX + AlpineJS +CloudFlare Images (if image fields exist in Park model) +Traditional pagination with Django Paginator +WCAG 2.1 AA compliance +Park model fields, existing views/URLs, current template structure + + + +Since we don't know the Park model structure, the development approach needs to be discovery-first: + +1. **Model Discovery**: First step must be examining the Park model to understand: + - Available fields for display (name, description, etc.) + - Searchable text fields + - Filterable attributes (categories, status, etc.) + - Geographic data (if PostGIS integration exists) + - Image fields (for CloudFlare Images optimization) + - Relationship fields (foreign keys, many-to-many) + +2. **Search Strategy**: Build search functionality based on discovered text fields + - Use Django's full-text search capabilities + - Add PostGIS spatial search if location fields exist + - Implement autocomplete based on available searchable fields + +3. **Filter Design**: Create filters dynamically based on model attributes + - Categorical fields become dropdown/checkbox filters + - Numeric fields become range filters + - Boolean fields become toggle filters + - Date fields become date range filters + +4. **Display Optimization**: Design park cards using available fields + - Prioritize essential information (name, basic details) + - Use CloudFlare Images if image fields exist + - Handle cases where optional fields might be empty + +5. **Performance Considerations**: + - Use Django's select_related and prefetch_related based on discovered relationships + - Add database indexes for commonly searched/filtered fields + - Implement efficient pagination + +The checkpoint approach will be: +- Checkpoint 1: Discover and document Park model structure +- Checkpoint 2: Build basic listing with pagination +- Checkpoint 3: Add search functionality based on available fields +- Checkpoint 4: Implement filters based on model attributes +- Checkpoint 5: Add HTMX interactions and optimize performance +- Checkpoint 6: Polish UI/UX and add accessibility features + + + +1. **Discovery Phase**: Examine Park model, existing views, and current templates +2. **Basic Listing**: Create paginated park list with Django Cotton templates +3. **Search Implementation**: Add autocomplete search based on available text fields +4. **Filter System**: Build dynamic filters based on discovered model attributes +5. **HTMX Integration**: Add dynamic interactions without page reloads +6. **Optimization**: Performance tuning, image optimization, accessibility +7. **Testing**: Cross-browser testing, mobile responsiveness, user experience validation + + + +Before implementation, investigate: +1. What fields does the Park model contain? +2. Are there geographic/location fields that could leverage PostGIS? +3. What relationships exist (foreign keys to Location, Category, etc.)? +4. Is there a rating/review system connected to parks? +5. What image fields exist and how are they currently handled? +6. What existing views and URL patterns are in place? +7. What search functionality currently exists? +8. What Django Cotton components are already available? + +``` \ No newline at end of file