back to main page CS16: Critical Theory of Technology
Swarthmore Marketplace
2022Flask, Firebase, Python, HTML, CSS, Javascript

for CS075 Software Engineering with Amy Cho, Andy Wu, and Diego Hernandez Monsivais

Swarthmore Marketplace arose in an effort to increase the accessibility of selling, donating, and purchasing used items outside of the designated space of Worthmore, the student-run donation center at the basement of Willets Hall. In order to incentivize continuous efforts in reusing and recycling, a digital platform could streamline this process increasing both reach and convenience.

Swarthmore Marketplace is a full stack application with register/login/logout, email verification, post adding/editing/deleting features, supporting a scalable and secure marketplace platform.

Project Frontend

[registering + logging in]

The website comprises five HTML and CSS pages, each serving a distinct purpose: 1) account creation, 2) user login, 3) viewing all postings (main page), 4) creating and publishing a posting, and 5) viewing user account information and postings.

The application frontend defines several functions that interact with a web server using XMLHttpRequest to dynamically update the content of the webpage. Each function is designed to interact with specific API endpoints, update the DOM dynamically, and handle asynchronous HTTP requests to provide a responsive user experience; the use of XMLHttpRequest ensures compatibility with older browsers.

These functions retrieve and manipulate user and post data. For instance, when a user logs into their account, a function initializes an `XMLHttpRequest`, updating the "name" and "email" elements with the user's details, and the "mobile" element if a number is present. It then sends a GET request to "/api/user" and returns the `xhttp` object. When a user creates a posting, it sends a GET request to "/api/posts'', and returns the `xhttp` object. It also updates the home page of all user’s posts as well as the index page of user’s individual posts by creating `XMLHttpRequest` with JSON response type, logging the response, and dynamically creating and appending HTML card elements for each post to the "cards'' element, adding navigation `onclick` events for the home page, and adding delete buttons for the user’s account page that trigger a specific function deleting the user’s post. This function creates an `XMLHttpRequest` object, checks for a successful response, logs a success message, and hides the deleted post's element, sending a DELETE request to the appropriate endpoint and returning the `xhttp` object.

By leveraging XMLHttpRequest, the application ensures broad browser compatibility while maintaining efficient and dynamic content update, ensuring a responsive and intuitive interface for managing user accounts and postings.

Project Backend

[creating a post]

The application backend ensures secure user authentication, session management, and dynamic content serving, with robust Firebase interactions for data synchronization and storage. It uses the Flask framework, integrating Firebase for authentication, database, and storage services. It begins with imports of necessary modules including `Flask` components (`flash`, `abort`, `session`, `render_template`, `request`, `redirect`, `send_from_directory`, `url_for`), `secure_filename` from `werkzeug.utils`, `pyrebase` for Firebase interaction, `os` for OS functionalities, `requests` for HTTP requests, and `datetime` for date and time manipulation. Firebase was configured with a dictionary containing API keys and URLs. Firebase services for authentication, database, and storage were set up, the current working directory was retrieved, and a secret key for session management was set.

Content-serving routes include the main page, navigation bar, profile page, individual post view, and item posting page. A function for posting items handles `POST` requests to retrieve user info, store item images in Firebase storage, and save posting data to the Firebase database. API routes were made for retrieving logged-in user information, fetching all postings, retrieving postings by the logged-in user, fetching specific post details, and deleting a post if the logged-in user is the owner.

[deleting a post]

A `before_request` function was made as middleware to check user session status, redirecting unauthenticated users to the login page except for specific paths (`/login` and `/register`). The `login` route handles `GET` and `POST` requests; it redirects logged-in users to the main page, attempts user login with provided credentials, and handles email verification. If successful, the user is added to the session and redirected to the main page; otherwise, the login page is re-rendered. The `register` route handles user registration, verifying whether the email domains is ‘@swarthmore.edu’, registering users with Firebase, sending email verifications to complete the registration process, and saving user data to Firebase database before redirecting to the login page or returning error messages. The `logout` route clears the user session and redirects to the login page. Content-serving routes include the main page (`/`), navigation bar (`/navbar`), profile page (`/profile`), individual post view (`/posts/id`), and item posting page (`/postItem`). The `postItem` route handles `POST` requests to retrieve user info, store item images in Firebase storage, and save posting data to the Firebase database. API routes are made for retrieving logged-in user information, fetching all postings, retrieving postings by the logged-in user, fetching specific post details, and deleting a post if the logged-in user is the owner. The comprehensive set of routes and functions forms the backbone of a responsive and dynamic web application.

By integrating Flask with Firebase, the application benefits from authentication, data synchronization, and secure storage solutions. This framework ensures data integrity and security but also supports a scalable infrastructure capable of adapting to future enhancements and growing user demands.