Current State

The development of the Foodable project has gone by well these past couple of months. Nearly all of the user interface has been completed and a large portion of the backend functionality has been implemented, allowing users to save grocery lists and recipes. I personally have been responsible for the user interface of the grocery page, as well as making the initial implementations of grocery list creation. I have also more recently begun work on implementing some of the third party API’s the application will use to identify nearby grocery stores and view their database of products. Additionally, users are able create their own accounts for the application and role based access control is being fleshed out so that the application can differentiate between guests, registered users, and admins. We’re approaching an application that simplifies meal planning and grocery shopping, making the process more manageable and budget-friendly.

Who Will Use Foodable?

Foodable is designed for individuals who want to make smarter grocery purchases by finding the most affordable nearby stores. It also is a place for people to create and share their recipes with Foodable community, as it will have social features. Foodable encourages users to discover, create, and share recipes while fostering a community centered around cost-effective and delicious meals.

The Benefits

Foodable offers a convenient way to manage grocery lists while helping users locate the best deals on food in their area. They will also be exposed to more recipes that will encourage healthy eating, as they will be supported by a community that appreciates meals that are both affordable and nutritious. By connecting with a community that values nutritious and budget-friendly meals, users can improve their meal planning experience while saving money.

Introduction

The Foodable Project has grown significantly in the past few weeks. Many of the UI pages have been developed to near completion and we have adopted several new technologies to aid us in implementing new features. Technologies like React, TanStack, Shadcn, Tailwind CSS, and MongoDB have pushed this application into new heights and are inching it closer to production. Many of the technologies we are using have been new to me and getting adjusted on how to use them have been a challenge. There is one in mind that at first frustrated me but I have come to appreciate its functionality, and have ultimately made development much easier.

Learning to Appreciate Zustand

Zustand is a state management library for React which has come to replace the standard React useStates that we were using previously. At first, it was difficult for me to move from useStates to Zustand, as both states and stores had to be implemented to get Zustand states working, along with wrapping components that use them in their respective providers. This caused a bit of a headache for me as I was ignorant to the several prerequisites that must be in place. Eventually, I came to understand how Zustand worked and now implementing new components and UI features are much easier as these states are global compared to the local useStates, which had forced me to pass functions from component to component when proper interactions were required in the past. I now can’t think of not using Zustand when working on a web application.

Introduction

As an aspiring software engineer constantly learning new coding concepts and strategies, my coding practices have been improving both directly and subconsciously. Now that I am reaching the end of my journey as only a student of computer science, It’s important to recognize that mastering clean code principles and eliminating code smells are vital in building maintainable codebases .

Clean Code

After reading an article from FreeCodeCamp.org on writing clean code, one thing I want to start doing more often is called the Single Responsibility Principle (SRP) which states that every class or module should only have one responsibility.

Here are some examples found on FreeCodeCamp.org:

// Example 1: Withouth SRP
function processOrder(order) {
  // validate order
  if (order.items.length === 0) {
    console.log("Error: Order has no items");
    return;
  }

  // calculate total
  let total = 0;
  order.items.forEach(item => {
    total += item.price * item.quantity;
  });

  // apply discounts
  if (order.customer === "vip") {
    total *= 0.9;
  }

  // save order
  const db = new Database();
  db.connect();
  db.saveOrder(order, total);
}

The above code block shows processOrder which isn’t utilizing SRP. It handles several functions, which makes it hard to understand. Furthermore a change to one function may change the others which makes it hard to maintain.

// Example 2: With SRP
class OrderProcessor {
  constructor(order) {
    this.order = order;
  }

  validate() {
    if (this.order.items.length === 0) {
      console.log("Error: Order has no items");
      return false;
    }
    return true;
  }

  calculateTotal() {
    let total = 0;
    this.order.items.forEach(item => {
      total += item.price * item.quantity;
    });
    return total;
  }

  applyDiscounts(total) {
    if (this.order.customer === "vip") {
      total *= 0.9;
    }
    return total;
  }
}

class OrderSaver {
  constructor(order, total) {
    this.order = order;
    this.total = total;
  }

  save() {
    const db = new Database();
    db.connect();
    db.saveOrder(this.order, this.total);
  }
}

const order = new Order();
const processor = new OrderProcessor(order);

if (processor.validate()) {
  const total = processor.calculateTotal();
  const totalWithDiscounts = processor.applyDiscounts(total);
  const saver = new OrderSaver(order, totalWithDiscounts);
  saver.save();
}

This above code shows the same method but this time utilizing SRP. The processOrder has been split up into multiple classes, OrderProcessor and OrderSaver which gives each classes its own functionality. This makes the code easier to understand and maintain.

Code-Smells

A code smell, which are indicators in code that reveal that there may be a problem in the design of the code, is something I am unashamed to admit that I am guilty of. The first step in correcting a problem is to admit you have one, and there is one thing that I wish to avoid doing in the future to make my code less smelly.

Code duplication an easy issue to create, as it can be so easy to just ignore it because its functional, but failure to correct these kinds of problems early can make the codebase unmaintainable. By performing refactoring, one can remove duplicated code.

Here are some examples of what I mean that I found on Medium.com:

The above code block shows two functions can contain duplicate code, one function to calculate the area of a rectangle, and the other to calculate the perimeter. While they do serve to distinct purposes, the code is so incredibly similar they don’t need to be in two different functions.

The code block above shows the refactored version, which creates a function that utilizes the logic of the area function, and simply reuses it for the perimeter. This solves the issue with duplicate logic and improves maintainability.

Sources

https://www.freecodecamp.org/news/how-to-write-clean-code/?utm_source=chatgpt.com

https://leonardoherdy.medium.com/clean-code-does-code-smell-part-1-7cf593f1e502

An Incredible Course

Senior Software Engineering Project I has been an incredible experience. I’ve had the opportunity chance work with some very gifted peers on a project that I have come to believe in. The coursework has been manageable, valuable, and highly relevant to my field. It’s rare that I can say I’ve found value in every topic presented in a course, but this one has exceeded my expectations. The experiences I have gained will undoubtedly stick with me throughout my future career.

Current State of Foodable

We have successfully completed v0.0.2 of Foodable, and are proud to announce that our application has some real functionality to it. We have begun on the functionality to create users, groceries, and recipes, which are core components to the application. We’ve also created our landing page and started work on the recipe page, where user can view and search for recipes. Our progress has so far been outstanding, as we have gone above and beyond the requirements for v0.0.2, and implemented multiple features along with two UI pages. Those that follow this project should come to expect even more from this application in the coming months.

Future Plans

The Foodable Team is soon approaching a well-deserved winter break, where our development will slow for about a month, but we already have more planned, so we can hit the ground running with new features when the winter term begins! The recipe page will be fully fleshed out, allowing users to view details about individual recipes and even create their own within the app. We will also have grocery pages set up, along with the beginnings of setting up location services, so Foodable will be able to detect nearby stores. This application is on a good track to completion, and will be available to users sooner rather than later!

What is Foodable?

Foodable is the project I am working on with two of my peers for the remainder of the school year. It is the application that we are working on for the Senior Capstone course for Computer Science students. The purpose of Foodable is meant to be a solution for people who struggle in finding food options that are both healthy and affordable. This will be used for finding groceries to stock up your pantry or for specific recipes. It will also be a social platform where users to can share and comment on people’s recipes, encouraging people to collaborate with the Foodable community. The application will leverage AI in order to provide users with personalized assistants to help them in creating their grocery list or recipes.

Current Progress

So far we have only begun the documentation of the project, where the groundwork is being laid to begin coding the application. Several designs of the components have been constructed that will greatly assist us when we begin coding it. It is actually this week where we start version 0.0.1, so we can finally begin making this application a reality.

Future Plans

We still have two more terms worth of worth of work to do on the project after this one, so much still needs to be done. Once we are finished implementing the initial structure for our codebase this term, in the following terms, we are going to begin implementing the core functionalities of Foodable. This will be the create of grocery lists and recipes, providing users with the most affordable and relevant options, AI integration, and the ability to share and collaborate with other users.

Hello! My name is Nicholas Nelson, and I am beginning my fourth and final year at OSU! I live in Grand Ronde, Oregon, which is an hour’s drive away from the Corvallis campus. After spending the last year making that commute, I decided to take most of my classes online this year to save the time I used to spend driving.

I have one dog and one cat, and I enjoy playing strategy video games and Magic: The Gathering.

I became interested in computers at a very young age, always wanting to go through my dad’s computer and check out every installed application. I loved learning how to build a computer and understanding what each component did just by watching YouTube videos. In high school, I got into coding when I joined a robotics club. I had the opportunity to code how our robot moved and performed complex tasks, and it was then that I decided I wanted to study computer science after graduation.

I didn’t immediately attend OSU. Instead, I spent my first two years of college at Chemeketa Community College as it was financially the best idea. After completing two years there, I transferred to OSU, with it being my preferred choice. I met some amazing people during my first year here and I hope to meet even more!

I currently work as a prep cook at Spirit Mountain Casino, where they have been very accommodating of my school schedule in allowing me to focus on my education.

My favorite programming languages are Python and C++. I originally learned C++ as my primary language, but I have come to appreciate Python as well. My preferred IDE is Visual Studio Code, and I recently learned React.js over the summer which I enjoyed a lot.