AggieReview
Winter/Spring 22 Spark Project
Introduction
We built a platform that incentivizes students to leave unbiased reviews in a constructive format while accommodating various learning and viewing preferences.
The Team
Grisha Bandodkar (Project Manager)
Salma Hassen (Project Manager)
Gennifer Hom (Designer)
Jennifer Diaz (Designer)
Anand Derick (Designer)
Jason Nguyen (Developer)
Daksh Jain (Developer)
Marvin Lee (Developer)
Shyam Agarwal (Developer)
Xi Huang (Developer)
Timeframe
Jan–May 2021 | 15 weeks
Tools
Figma
React
MongoDB
Google OAuth2.0
Express.js
NodeJS
Git
Development
We built AggieReview using an ExpressJS server on the backend and React on the frontend. To store user data, reviews, and courses, we used MongoDB as our database and prefilled it with courses scraped off the university’s course offerings list. We planned the frontend with four core pages in mind, the first being the homepage which gives an overview of what the site does and acts as the entry point for AggieReview.
Google Authentication is implemented for the three remaining core pages and stores a token as a cookie to keep the user logged in. It allows users to see more details on reviews as well as create their own user profiles and reviews. These pages interact with the CRUD routes on the backend to upload and update data. The review writing page breaks down parts of a review into sections with a variety of intuitive inputs like validated text areas and Likert scales for users to compose and post their own experiences with a course and its professor.
The navigation bar in AggieReview is a component that is built on a back-end collection of UC Davis’ classes and professors pertaining to that class. The navbar allows the user to the first search for the class they want and when clicked on will then list out the professors that have taught the class in the past and the present.
The Navbar performs a GET request to the database using Axios. I then created an object that takes in key-value pairs of classes and professors. We handle the user input with a function that handles the filtering such that we can get a class with what the user inputs into the navbar, and then lists them out. When the user clicks on the class that they want, we will perform another call that returns the professor that pertains to the class from the object.
We tried our best to make the homepage as user-friendly and descriptive as possible because it is the first page that the users see when they open our website. The homepage contains a detailed description of the various features of our website, and it is specifically designed to grab the user’s attention by making it colorful and full of images. Development-wise, the entire page is broken into multiple Bootstrap containers in order to make the page responsive. A special feature is the search-bar component which is present on the top of the homepage. Users are supposed to enter their class in the search bar, instead of writing the name of the Professor first. Once they choose their class, the search-bar changes to a different format which allows them to write the Professor’s name. The way the search bar works is an attempt on our part to remove the idea of “rating the professor”, and to promote the idea of “reviewing my class”.
We realized that different users might prioritize some reviews compared to others. After some research, we found out that users might find value in sorting their reviews either on the basis of the date of the creation or on the basis of the rating given to the professors. Thus, we implemented a sort-by feature on the page where the users see reviews. Development-wise, we used a Bootstrap drop-down button. We are storing the value chosen by the user using React state components. Then, we sort the array of reviews that we got by making Axios calls and render it on the screen.
Takeaways & Challenges
- Over the cohort, our team implemented a better way of communication during the GMs to maintain a cross-functional system between our developers and designers.
- The designers worked in parallel with the developers, which involved making frequent changes to the UI. This was better improved when the designers discussed possible future updates with the developers, who gave their feedback.
- Due to time constraints, developers had to skip some features that designers wanted to include in order to implement the main solution. Additionally, the designers had to skip some design processes during the cohort in order to push out the main design of the website in time for developers.
