Fix dependencies and GeoDjango configuration

cline_docs/frontendArchitecture.md

@@ -0,0 +1,208 @@
+# Frontend Architecture Documentation
+Last Updated: 2024-02-21
+
+## Core Technologies
+
+### 1. HTMX
+- Used for dynamic updates and server interactions
+- Enables partial page updates without full reloads
+- Integrated with Django backend for seamless data exchange
+- Used for form submissions and dynamic content loading
+
+### 2. AlpineJS
+- Handles client-side interactivity and state management
+- Used for dropdowns, modals, and other interactive components
+- Provides reactive data binding and event handling
+- Key features used:
+  - x-data for component state
+  - x-show/x-if for conditional rendering
+  - x-model for two-way data binding
+  - x-on for event handling
+
+### 3. Tailwind CSS
+- Utility-first CSS framework for styling
+- Custom configuration in tailwind.config.js
+- Responsive design utilities
+- Dark mode support with class-based implementation
+- Custom color scheme with primary/secondary colors
+
+## Styling System
+
+### 1. Base Styles
+- Font: Poppins (400, 500, 600, 700 weights)
+- Color Scheme:
+  - Primary: Indigo (#4F46E5)
+  - Secondary: Rose (#E11D48)
+  - Gradients for interactive elements
+  - Dark mode compatible color palette
+
+### 2. Component Classes
+- Button Variants:
+  - .btn-primary: Gradient background with hover effects
+  - .btn-secondary: Light/dark mode aware styling
+  - Social login buttons with brand colors
+- Form Elements:
+  - .form-input: Styled input fields
+  - .form-label: Consistent label styling
+  - .form-error: Error message styling
+- Cards:
+  - .card: Base card styling with shadows
+  - .auth-card: Special styling for authentication forms
+- Status Badges:
+  - .status-operating: Green success state
+  - .status-closed: Red error state
+  - .status-construction: Yellow warning state
+
+### 3. Layout Components
+- Responsive container system
+- Grid system using Tailwind's grid utilities
+- Flexbox-based navigation and content layouts
+- Mobile-first responsive design
+
+## Interactive Components
+
+### 1. Navigation
+- Responsive header with mobile menu
+- User dropdown menu with authentication states
+- Theme toggle (light/dark mode)
+- Mobile-optimized navigation drawer
+
+### 2. Forms
+- Location autocomplete system
+- Form validation with error states
+- CSRF protection integration
+- File upload handling
+
+### 3. Alerts System
+- Timed auto-dismissing alerts
+- Slide animations for entry/exit
+- Context-aware styling (success, error, info, warning)
+- Accessible notifications
+
+### 4. Modal System
+- HTMX-powered dynamic content loading
+- Alpine.js state management
+- Backdrop blur effects
+- Keyboard navigation support
+
+## JavaScript Architecture
+
+### 1. Core Functionality
+- Theme management with local storage persistence
+- HTMX configuration and setup
+- Alpine.js component initialization
+- Event delegation and handling
+
+### 2. Location Autocomplete
+- Progressive enhancement for location fields
+- Country/Region/City hierarchical selection
+- Dynamic filtering based on parent selections
+- AJAX-powered suggestions
+
+### 3. Form Handling
+- Client-side validation
+- File upload preview
+- Dynamic form updates
+- Error state management
+
+## Performance Optimizations
+
+### 1. Asset Loading
+- Deferred script loading
+- Preloaded critical assets
+- Minified production assets
+- Cached static resources
+
+### 2. Rendering
+- Progressive enhancement
+- Partial page updates
+- Lazy loading of images
+- Optimized animation performance
+
+### 3. State Management
+- Efficient DOM updates
+- Debounced search inputs
+- Throttled scroll handlers
+- Memory leak prevention
+
+## Accessibility Features
+
+### 1. Semantic HTML
+- Proper heading hierarchy
+- ARIA labels and roles
+- Semantic landmark regions
+- Meaningful alt text
+
+### 2. Keyboard Navigation
+- Focus management
+- Skip links
+- Keyboard shortcuts
+- Focus trapping in modals
+
+### 3. Screen Readers
+- ARIA live regions for alerts
+- Status role for notifications
+- Description text for icons
+- Form label associations
+
+## Development Workflow
+
+### 1. CSS Organization
+- Utility-first approach
+- Component-specific styles
+- Shared design tokens
+- Dark mode variants
+
+### 2. JavaScript Patterns
+- Event delegation
+- Component encapsulation
+- State management
+- Error handling
+
+### 3. Testing Considerations
+- Browser compatibility
+- Responsive design testing
+- Accessibility testing
+- Performance monitoring
+
+## Browser Support
+
+### 1. Supported Browsers
+- Chrome (latest 2 versions)
+- Firefox (latest 2 versions)
+- Safari (latest 2 versions)
+- Edge (latest version)
+
+### 2. Fallbacks
+- Graceful degradation
+- No-script support
+- Legacy browser handling
+- Progressive enhancement
+
+## Security Measures
+
+### 1. CSRF Protection
+- Token validation
+- Secure form submission
+- Protected AJAX requests
+- Session handling
+
+### 2. XSS Prevention
+- Content sanitization
+- Escaped output
+- Secure cookie handling
+- Input validation
+
+## Future Considerations
+
+### 1. Potential Improvements
+- Component library development
+- Enhanced type checking
+- Performance monitoring
+- Automated testing
+
+### 2. Maintenance
+- Regular dependency updates
+- Browser compatibility checks
+- Performance optimization
+- Security audits

cline_docs/techContext.md

@@ -20,22 +20,22 @@
 
 ### Frontend Technologies
 1. HTMX
-   - Dynamic updates
-   - Partial rendering
-   - Server-side processing
-   - Progressive enhancement
+   - Dynamic updates and server interactions
+   - Partial rendering and progressive enhancement
+   - Server-side processing and form handling
+   - See frontendArchitecture.md for detailed implementation
 
 2. AlpineJS
-   - UI state management
-   - Component behavior
-   - Event handling
-   - DOM manipulation
+   - UI state management and reactivity
+   - Component behavior and lifecycle
+   - Event handling and DOM manipulation
+   - See frontendArchitecture.md for component patterns
 
 3. Tailwind CSS
-   - Utility-first styling
-   - Component design
-   - Responsive layouts
-   - Custom configuration
+   - Utility-first styling with custom configuration
+   - Component design system
+   - Responsive layouts and dark mode support
+   - See frontendArchitecture.md for styling guide
 
 ## Integration Patterns
 
@@ -87,16 +87,24 @@
 
 ### Frontend Libraries
 1. CSS Framework
-   - Tailwind CSS
-   - Custom plugins
-   - Theme configuration
-   - Utility classes
+   - Tailwind CSS with custom configuration
+   - Theme system with light/dark mode support
+   - Component-specific style patterns
+   - See frontendArchitecture.md for complete styling guide
 
 2. JavaScript
-   - AlpineJS core
-   - HTMX library
-   - Utility functions
-   - Custom components
+   - AlpineJS for reactive components
+   - HTMX for server interactions
+   - Location autocomplete system
+   - Alert and modal components
+   - See frontendArchitecture.md for component documentation
+
+3. UI Components
+   - Form elements and validation
+   - Navigation and menus
+   - Status indicators and badges
+   - Modal and alert system
+   - See frontendArchitecture.md for implementation details
 
 ## Infrastructure Choices
 
@@ -143,10 +151,14 @@
 
 ### Technology Limitations
 1. Frontend
-   - HTMX/AlpineJS only
-   - No additional frameworks
-   - Browser compatibility
-   - Performance requirements
+   - HTMX/AlpineJS only (no React/Vue/Angular)
+   - Progressive enhancement approach required
+   - Must support latest 2 versions of major browsers
+   - See frontendArchitecture.md for detailed browser support
+   - Performance targets:
+     * First contentful paint < 1.5s
+     * Time to interactive < 2s
+     * Core Web Vitals compliance
 
 2. Backend
    - Django version constraints