Overview

We are creating a Django-based starter template that serves as a baseline for future SAAS projects. The project uses Django cookie cutter, Web pack as the static package manager, Django all auth for authentication, and Tailwind CSS for styling. This document outlines the requirements for the front end work.
General Requirements

    Consistency: Ensure consistent use of Tailwind CSS classes across the project.
    Responsiveness: All pages must be responsive and work well on mobile, tablet, and desktop views.
    Accessibility: Follow accessibility best practices to ensure the application is usable by everyone.
    Cross-Browser Compatibility: Ensure compatibility with the latest versions of major browsers (Chrome, Firefox, Safari, Edge).

Paths and Panels to be Covered
1. Authentication Paths

    Login Page:
        Form fields: Email, Password
        Remember me checkbox
        Submit button
        Links: Forgot password, Sign up
        Error messages for invalid login attempts
    Sign-Up Page:
        Form fields: Email, Username, Password, Confirm Password
        Submit button
        Link: Already have an account? Log in
        Error messages for validation errors
    Password Reset Request Page:
        Form field: Email
        Submit button
        Confirmation message after submitting
    Password Reset Page:
        Form fields: New Password, Confirm Password
        Submit button
        Confirmation message after successful reset
    Account Verification Page:
        Confirmation message for successful account verification
        Error message for invalid or expired tokens

2. Main Application Paths

    Home Page:
        Navigation bar with links to major sections (Home, Profile, Settings, Logout)
        Hero section with a welcome message and primary call-to-action
        Example content sections demonstrating different Tailwind CSS components (cards, buttons, alerts)
    Profile Page:
        Display user information (username, email)
        Edit profile button leading to profile edit page
    Edit Profile Page:
        Form fields: Username, Email, Password (optional)
        Save changes button
        Success and error messages for profile updates
    Settings Page:
        Options for account settings (change password, manage linked accounts)
        Submit button for each section
        Success and error messages for settings updates

3. Side Panels and Components

    Navigation Sidebar (if applicable):
        List of links to different sections of the application
        Collapsible sections for better usability on mobile
    Notifications Panel:
        List of notifications with timestamps
        Mark as read button for each notification
        Clear all notifications button
    User Drop down Menu:
        Accessible from the navigation bar
        Links to Profile, Settings, and Logout
    Modal Dialogs:
        For actions such as deleting an account, confirming changes, etc.
        Include title, message, and action buttons (confirm, cancel)

Tailwind CSS Integration

    Ensure all components are styled using Tailwind CSS.
    Use Tailwind's utility-first classes to create a consistent design system.
    Create reusable components for commonly used UI elements (buttons, form inputs, cards).

Additional Requirements

    Error Handling: Display user-friendly error messages for all forms and actions.
    Loading Indicators: Use loading indicators for actions that take time to complete (e.g., form submissions).
    Testing: Ensure thorough testing of all paths and components, including edge cases.

Deliverables

    Complete set of HTML templates for all specified paths and panels.
    Tailwind CSS configurations and customizations.
    JavaScript (if necessary) for interactive elements (e.g., modals, drop downs).
    Documentation on how to extend and customize the front end components.

Communication and Collaboration

    Regular updates on progress.
    Prompt communication of any issues or questions.
    Collaboration with back end developers to ensure seamless integration.

These requirements should provide a comprehensive guide for the front end work needed for our Django project. Feel free to adjust or expand upon these requirements based on your specific needs and project scope.