### Overview
We are creating a Django-based starter template that serves as a baseline for future SAAS projects. The project uses Django cookie cutter, Webpack as the static package manager, Django allauth for authentication, and Tailwind CSS for styling. This document outlines the requirements for the frontend work.

### General Requirements
1. **Consistency**: Ensure consistent use of Tailwind CSS classes across the project.
2. **Responsiveness**: All pages must be responsive and work well on mobile, tablet, and desktop views.
3. **Accessibility**: Follow accessibility best practices to ensure the application is usable by everyone.
4. **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 Dropdown 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, dropdowns).
– Documentation on how to extend and customize the frontend components.

### Communication and Collaboration
– Regular updates on progress.
– Prompt communication of any issues or questions.
– Collaboration with backend developers to ensure seamless integration.

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

Hourly Range: $17.00-$33.00

Posted On: June 30, 2024 19:26 UTC
Category: Front-End Development
Skills:Tailwind CSS, Django, Sass

Country: United States

click to apply