Modules Overview¶

The renting website prototype is composed of several key modules, each playing a vital role in the functionality of the platform. This section provides an overview of these modules, detailing their purpose and functionality.

Frontend Modules¶

The frontend of renting website prototype is developed using HTML, CSS, and JavaScript to provide a dynamic and interactive user interface. Key JavaScript files include:

additional/¶

jquery.min.js: Provides essential functionalities for DOM manipulation and event handling, enhancing the user interface.
pikaday.min.js: A JavaScript date picker library that improves date selection within the application (used for displaying user move in dates).
redwood-f9f87-firebase-adminsdk-w4dk2-c53a064263.json: Firebase Admin SDK configuration file used for server-side interaction with Firebase services.
select2.min.js: Enhances select input elements by adding features like searching and tagging.

form-scripts/¶

editScript.js: Facilitates profile editing, repopulating form fields with existing user data for updates.
login.js: Manages user authentication with Firebase and Google sign-in integration.
userCreation.js: Handles user profile creation, including feature/preference selections, image upload validation, isochrone data collection and other form fields.

main-scripts/¶

matches.js: Orchestrates the display and interaction with user matches, also allows users to chat with other matches
recommendations.js: Core to the recommendation feature, this script manages the display and interaction with user recommendations, ensuring users are presented with tailored roommate suggestions.

Modules/¶

Matches/¶

matchGenerator.js: Generates HTML content for match cards, categorizing user features into informative sections, setting up budget gauges, setting up calendars and more.
matchUtilitySetup.js: Provides utility functions for match-related operations, such as fetching matches and setting up match interactions such as chatting abilities, switching between tabs and more.

Recommendations/¶

recommendationHandler.js: Manages recommendation retrieval, display and interaction, including fetching new recommendations and recording user actions.

SignUp/¶

isochroneInput.js: Handles isochrone input for the sign-up process, enabling users to define their preferred travel times and methods in order to generate isochrones.
profileCreationFormPopulation.js: Populates sign-up forms with predefined lists (e.g., cities, universities) in order to allow users to pick their selections, also populates the list with any previously selected data.
profileImageSetup.js: Manages the setup and validation of profile image uploads during the sign-up process.
resetPreferences.js: Allows users to reset their preferences during profile editing, ensuring users are sure they would like reset this before doing so.

Utils/¶

api.js: Serves as an interface for general backend API requests, facilitating interactions like fetching matches, sending reports and more.
calendarHandler.js: Manages calendar-related functionalities, including displaying move-in dates.
chatSetup.js: Sets up real-time chat functionalities, enabling users to communicate directly within the platform.
map.js: Responsible for generating and managing interactive maps that display isochrones and geographical data relevant to users.
modalDisplay.js: Manages the display and interaction of modals across the platform, such as report modals and match notifications.
recommendationApi.js: Handles API interactions specifically related to recommendations, including fetching recommendations and recording interactions.
sideMenu.js: Manages the side menu’s behavior, including its display and interaction logic.
tabHandler.js: Facilitates tabbed interfaces within the platform, enabling seamless navigation between different UI sections.

Variables/¶

features.js: Defines predefined feature categories used throughout the platform to categorize and display user information.
userCreationLists.js: Contains predefined lists used during user sign-up, such as cities and universities, to streamline the profile creation process.

HTML Documents¶

login.html: This is the entry point for users to log in to the system. It features a simple and intuitive interface for users to sign in with their Google account.
signup.html: Provides a form for new users to create a profile. It includes fields for personal details, preferences, and a profile picture upload.
recommendations.html: Displays personalized user recommendations. It contains complex UI elements for profile cards, including bio, budget, and calendar views.
matches.html: Shows a list of matched profiles. Users can view their matches and access detailed information about each match, most of this is generated dynamically from the matches.js script.
edit.html: Allows users to edit their profile information. It includes the same fields as the signup page, pre-filled with the user’s current data.

CSS Stylesheets¶

The stylesheets are organized into two main directories: form-pages for styling forms and main-design for the main interface components.

additional/pikaday.min.css, select2.min.css: Style third-party plugins used for enhanced select inputs and for showing calendar dates.

animations/animations.css: This file contains any animations we use within the css files in order to store them in one place.

form-pages/login.css: Styles the login page with website’s design language.

form-pages/user-creation.css: Provides styling for the signup and edit profile forms, ensuring consistency in the form design.

main-design/recommendations.css: Applies styles to the recommendations view, handling layout and visual hierarchy, also used for match cards.

main-design/map.css: This css specifically handles the visuals of the map we display for user isochrones.

main-design/about.css, budget.css, calendar.css, contact.css, mutual.css, side-menu.css, bio-extra-info.css, report.css: These stylesheets manage specific components within the user interface, such as the about section, budget constraints, calendar interface, contact details, mutual interests, side navigation menu, additional bio information, and reporting functionality.

Integration with Backend¶

These frontend components are seamlessly integrated with the Flask backend, with HTML templates receiving context data from Flask views. This enables dynamic content rendering based on user data and interactions, which is pivotal for the recommendation system’s functionality.

Backend Modules¶

The backend, developed in Python with Flask, orchestrates the application’s core logic, database operations, recommendation algorithms, and API interactions:

algorithms/¶

collaborative_filtering_web.py: Uses collaborative filtering techniques to identify user similarities for recommendations.
web-recommendations.py: Implements the mixed filtering algorithm, combining collaborative and content-based filtering for enhanced recommendation accuracy. Also faciliates the ability to check for pre existing recommendations and formatting of data.

database/¶

apply_filters.py: This module is used for filtering out recommendations to find candidates when trying to generate recommendations for a target user.
db_connection_web.py: Manages database interactions, including user data retrieval, match fetching, and account deletion.
user_creation.py: Facilitates the addition and updating of user profiles in the database, including handling of user preferences and profile images.

utils/¶

interactions.py: Manages user interactions with the system, such as recording likes, dislikes, and user reports.
similarity_metrics.py: This module is used for calculation the similarity of users, through preferences or features, through the use of cosine similarity.
update_data_structures.py: Ensures the timely update of data structures used in the recommendation process.

web/¶

app.py: Serves as the central hub for routing requests and integrating backend functionalities. It handles user authentication, account management, and orchestrates recommendation processes.