← WellesEats (2023)

Overview

WellesEats is a mobile app serving as a centralized platform where Wellesley students can upload and view posts reviewing the food they eat.

Problem Statement

Food quality at Wellesley’s dining halls can vary greatly depending on the meal/location and the Wellesley Fresh online menus don’t always accurately display what is being served.

Project Goals

WellesEats aims to serve as a centralized platform that provides students with more information about the food being served for each meal in addition to giving feedback on the food they’ve eaten. It would act as a supplement to the AVI online menus that currently exist rather than replace or recreate it.

Ideation + Prototyping

To plan out the features of our app, we needed to consider what kind of functionalities a review-posting app would have. We knew our users would be reading and writing data from our database so we would have to have screens with forms for users to fill out either their account information or review information. Our next step was to brainstorm a list of all the features we wanted our app to have and then separate the list into 2 smaller ones: core features and additional features. Core features of our app include sign-up/login, review posting, a main feed to view all of the reviews made in reverse chronological order, view an individual post, display a list of the user's previously made reviews, and profile editing. Based on the features on our list, we then could identify what order a user would encounter them. This made it easier to identify what screens we would need to build.

To fully conceptualize the flow of our app, I created a low-fidelity prototype using Figma. Planning out each screen and interaction helped us think about how to approach implementing certain features and how to store our data.

Coding

Before coding our project, we needed to create our Firebase project for users to read and write data to. I setup our Firestore database to contain 2 collections: Users and Posts. The Users collection would store documents with each user's account details while documents stored in the Posts collection would contain data collected in a user's meal review.

After setting up our database, we began developing the screens. As the first interaction users would have with our app is logging in/signing up, I created the Login and Sign-Up pages. The Sign-Up page consists of a form that writes a new document to the Users collection in addition to adding the user to the Firebase authentication section. Similarly, the Login page compares the email and password inputted by the user with the email and password stored in Firebase's authentication section. To ensure that only Wellesley students are able to use our app and to hold our users accountable for what they post, I setup our account creation functionality to check if the user's email ends with "@wellesley.edu" and send a verification email to the user.

Once account creation and login were fully functional, I developed the Edit Profile feature of our app. Editing a user's profile read their profile information from their account document and allowed users to update their display name, pronouns, and add a profile image. These features allowed users to add a personal touch to their accounts.

The next feature to implement was displaying the user's profile information on their Profile page. This required reading data from the user's account document as well. An additional core function we wanted to include in our app was allow users to view their previously uploaded posts. We decided to display all posts made by a user on their Profile page, as it contains information personalized to them. To implement this, I created Javascript functions that parsed through documents in the Posts collection, finding each document whose author matched the logged-in user's username. While our Figma prototype displays the posts as images on the Profile page, we were only able to display posts' titles, location, and meal time due to time constaints.

At this point in WellesEats' development, my partner had created the upload post and main feed features. Since I had experience reading and writing images to Firebase's image storage section, I implemented image upload and display for review posts as well.

Once our core features were functional, I debugged issues displaying post data, filtering the main feed, and conducted user testing.

Reflection

Given the time constraints of this project, we unfortunately were not able to include our additional features. In future iterations of this project, we would like to implement social features such as following other users, viewing other users' profile pages, and upvoting/downvoting posts based on how helpful they were.

The most prominent challenge I faced while working on this project was uploading images to the Firestore database. Images in Firebase are stored in Firebase's own storage section, separate from the collections storing each document.

Want to see WellesEats's code or a demo video of our app? Email me at el110@wellesley.edu!