Noot

Overview

Noot was the capstone project I undertook for my Bachelor’s in Computer Science. Over the course of two semesters, me and a team of five other CS students worked to design an application to fetch and present grocery price data across different grocery stores. By the end of our time, we were able to make and present a proof of concept application at the Senior Design Showcase. I worked as the project lead and the main backend developer, helping to manage my team’s work and ensure we met targets on time.

Finding the Idea

The idea for Noot came out of much discussion about the rising cost of groceries and the general tough economic situation that students (and people our age, broadly) are going through. People are constantly flooded with choices for where to get their food, to the point that choice paralysis–where you are given so many choices that your brain cannot handle picking any–has become more and more common. Lots of grocery stores offer the same or similar items for different prices and the only way to know that is to go through the legwork of going to each of their websites (if they have one), searching the item, and finding the price. So we thought: What if there was an easier way to do this?

Execution

In order to appeal to the widest array of people possible, we decided to create Noot as a two-layered system:

1. A rich backend service that fetched, processed, and indexed price and product data. The backend would serve all these results up with a REST API.
2. A responsive frontend application that fetched data from the backend to present to the user. The frontend would offer search functionality, meal planning, and grocery list creation.

Backend

The backend began with a simple Django API and rapidly expanded into a much more complex architecture. In order to add things like search, proper web hosting, and the backing database, the backend was converted into a Docker Compose project so we could spin it up on anyone’s machine and deploy it easily. When we finished the project, the backend consisted of the following:

1. A Django web service that served the main REST API up.
2. A backing MySQL database that stored price information, products, user accounts, lists, and more.
3. Elasticsearch (+ the Kibana dashboard) to ingest the products and documents to offer a comprehensive search experience.
4. Celery (+ its dashboard Flower) to run scheduled tasks to poll websites, conduct DB maintenance, and more.
5. An NGINX reverse proxy and Certbot to secure the API with HTTPS and handle the SSL certificates respectively.
6. A Redis cache that the different processes would use to communicate with each other.

Frontend

To reach as many people and devices as possible, we decided that the frontend would be a Progressive Web App (PWA). A PWA is an application that can run both as a website and as an installable mobile app, meaning the same code can run on a computer as on a phone. To create this PWA, we decided to use Next.js, a popular React-based framework. The application was built out with reusability and mobile design in mind, so the app could work best on the widest variety of devices.

My Work

As the Project Lead, I was in charge of coordinating all the different team members to ensure they were all meeting their goals and the goals of their teams. We split the group evenly into two subteams: one to handle the frontend and the other to handle the backend. I scheduled meetings, built the deliverables we needed to turn in for the class, and created the final presentation poster, which we printed to present during the Senior Design Showcase.

As the main Backend developer, I wrote most of the code in it and worked a lot on the architecture. I was new to Docker and Elasticsearch so there was a steep learning curve but I was able to spend much of the first semester learning and planning before executing anything. I am very proud of how it all turned out.

Outcome

Overall, I think the project turned out great! It was a learning experience, that’s for sure, but we managed to pull off a pretty comprehensive proof-of-concept that worked well enough to demo on everyone’s phones. The backend was professionally built and the frontend was well designed. More than that, we all learned a great deal both about software engineering and project managment. As I wrap this up, I want to give a special shoutout to my teammates, without whom this project would not have been possible:

• Hussain Al-Zubaidi
• Michael Hall
• Collins Pearson
• Alan Saucer
• Donna Storch