feat: complete monorepo structure with frontend and shared resources

- Add complete backend/ directory with full Django application
- Add frontend/ directory with Vite + TypeScript setup ready for Next.js
- Add comprehensive shared/ directory with:
  - Complete documentation and memory-bank archives
  - Media files and avatars (letters, park/ride images)
  - Deployment scripts and automation tools
  - Shared types and utilities
- Add architecture/ directory with migration guides
- Configure pnpm workspace for monorepo development
- Update .gitignore to exclude .django_tailwind_cli/ build artifacts
- Preserve all historical documentation in shared/docs/memory-bank/
- Set up proper structure for full-stack development with shared resources
This commit is contained in:
pacnpal
2025-08-23 18:40:07 -04:00
parent b0e0678590
commit d504d41de2
762 changed files with 142636 additions and 0 deletions

View File

@@ -0,0 +1,130 @@
# Park Search Implementation
## Search Flow
1. **Quick Search (Suggestions)**
- Endpoint: `suggest_parks/`
- Shows up to 8 suggestions
- Uses HTMX for real-time updates
- 300ms debounce for typing
2. **Full Search**
- Endpoint: `parks:park_list`
- Shows all matching results
- Supports view modes (grid/list)
- Integrates with filter system
## Implementation Details
### Frontend Components
- Search input using built-in HTMX and Alpine.js
```html
<div x-data="{ query: '', selectedId: null }"
@search-selected.window="...">
<form hx-get="..." hx-trigger="input changed delay:300ms">
<!-- Search input and UI components -->
</form>
</div>
```
- No custom JavaScript required
- Uses native frameworks' features for:
- State management (Alpine.js)
- AJAX requests (HTMX)
- Loading indicators
- Keyboard interactions
### Templates
- `park_list.html`: Main search interface
- `park_suggestions.html`: Partial for search suggestions
- `park_list_item.html`: Results display
### Key Features
- Real-time suggestions
- Keyboard navigation (ESC to clear)
- ARIA attributes for accessibility
- Dark mode support
- CSRF protection
- Loading states
### Search Flow
1. User types in search box
2. After 300ms debounce, HTMX sends request
3. Server returns suggestion list
4. User selects item
5. Form submits to main list view with filter
6. Results update while maintaining view mode
## Recent Updates (2024-02-22)
1. Fixed search page loading issue:
- Removed legacy redirect in suggest_parks
- Updated search form to use HTMX properly
- Added Alpine.js for state management
- Improved suggestions UI
- Maintained view mode during search
2. Security:
- CSRF protection on all forms
- Input sanitization
- Proper parameter handling
3. Performance:
- 300ms debounce on typing
- Limit suggestions to 8 items
- Efficient query optimization
4. Accessibility:
- ARIA labels and roles
- Keyboard navigation
- Proper focus management
- Screen reader support
## API Response Format
### Suggestions Endpoint (`/parks/suggest_parks/`)
```json
{
"results": [
{
"id": "string",
"name": "string",
"status": "string",
"location": "string",
"url": "string"
}
]
}
```
### Field Details
- `id`: Database ID (string format)
- `name`: Park name
- `status`: Formatted status display (e.g., "Operating")
- `location`: Formatted location string
- `url`: Full detail page URL
## Test Coverage
### API Tests
- JSON format validation
- Empty search handling
- Field type checking
- Result limit verification
- Response structure
### UI Integration Tests
- View mode persistence
- Loading state verification
- Error handling
- Keyboard interaction
### Data Format Tests
- Location string formatting
- Status display formatting
- URL generation
- Field type validation
### Performance Tests
- Debounce functionality
- Result limiting (8 items)
- Query optimization
- Response timing