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