Frontend-Backend Interaction Documentation

The renting website prototype’s frontend and backend modules interact to provide a seamless user experience. This section outlines how the frontend JavaScript modules communicate with the Flask backend via API endpoints, highlighting key functionalities and data flow.

User Flow

User Flow Diagram

Figure 1: User Flow Overview

API Endpoints and Frontend Handlers

  1. User Authentication and Account Management

    • Frontend: login.js - Handles user authentication using Firebase and Google sign-in. - Communicates with /verify-token endpoint to verify user identity.

    • Backend: app.py - Endpoint /verify-token for Firebase token verification. - Session management for user authentication status.

    User Authentication Flow Diagram

    Figure 2: User Authentication Flow

  2. User Profile Management

    • Frontend: userCreation.js and editScript.js - userCreation.js handles new user profile creation. - editScript.js facilitates user profile editing. - Communicates with /add_user and /update_user endpoints.

    • Backend: app.py - Endpoints /add_user and /update_user for handling user data insertion and updates.

  3. Recommendation System Interaction

    • Frontend: recommendations.js - Manages the display and interaction with user recommendations. - Communicates with /api/recommendations for generating recommendations and /api/check_recommendations for fetching recommendations

    • Backend: app.py - Endpoint /api/recommendations to generate user-specific recommendations and /api/check_recommendations for user-specific fetching recommendations

    Recommendation System Interaction Diagram

    Figure 3: Recommendation System Interaction

  4. Match Interaction and Management

    • Frontend: matches.js - Handles the display and management of user matches. - Communicates with /api/matches, /remove_match, and /report_match endpoints.

    • Backend: app.py - Endpoints for fetching matches, removing matches, and reporting matches.

  5. User Interaction Recording

    • Frontend: recommendations.js - Record user interactions such as likes, dislikes, and reports. - Interacts with /record_interaction and /report endpoints.

    • Backend: app.py - Endpoints /record_interaction and /report for logging user interactions in the database.

  6. Account Deletion

    • Frontend: editScript.js - Provides functionality for users to delete their accounts. - Communicates with /delete-account endpoint.

    • Backend: app.py - Endpoint /delete-account for handling account deletion requests.

  7. Image Handling and Secure Access

    • Frontend: editScript.js, recommendations.js, matches.js - Calls the /images/<requested_id> endpoint to fetch a pre-signed URL for a user’s profile image. - Implements error handling for scenarios where image fetching fails, ensuring a fallback to a placeholder image if necessary.

    • Backend: app.py - Endpoint /images/<requested_id> generates pre-signed URLs for secure, temporary access to images stored in S3. It ensures that only authenticated users can request and access user profile images by checking the session for ‘user_id’. - Utilizes boto3 to interact with AWS S3, creating pre-signed URLs that grant temporary access to private objects in the bucket.

Data Flow and Interaction Patterns

The frontend modules use AJAX requests to communicate with the Flask backend’s API endpoints. User data, preferences, and interactions are sent to the server for processing and storage. The backend, in turn, provides responses that include user-specific data, recommendations, and matches. This interaction allows for a dynamic and responsive user experience, adapting to user actions and preferences.

See Also