I’m using React and NextJS to build out the UI and the frontend server for a personal project. I haven’t done any serious web development since college, and that was mostly using straight HTML/CSS and Javascript.

There’s a lot I need to learn in order to be an effective web developer using the above frameworks. It took me 3 hours to get a graph to center on a page and respect the bounds of its parent container. I had to learn about hydration, when certain DOM variables become avaiable, and how to update variables used within the returned components JSX.

I clearly need to take a step back and learn how to use react/NextJS with a smaller project and I have the perfect project in mind: A pet meal planner.

Project Breakdown

Whenever I change my cats food or treats, I need to calculate how much to feed them of this new food in order for them to stay in the recommended calorie range as determined by their body type of the vet.

The goal is to create a nice looking calculator that will do most of the work for me, a big step involved in that is figuring out the calorie content of the food, which is why the calculator will try to grab the value from a reliable source such as Chewy but can also take in the exact value.

My plan is to complete an inital version of the calculator that doesn’t take the link and then add the calorie content extraction feature as an add on. Extracting information from a webpage and passing it down to the client will involve learning more about nextJS specific features and can be considered a seperate learning phase. Another add-on to the feature could be how many days the primary/secondary food will last.

This meal planner will take:

  • Target calorie intake: How many calories to maintain your pets weight, or to reach their ideal weight
  • Calories from treats: How many calories should come from treats?
  • Acceptable Diff percentage: How far off the target calorie intake is acceptable?
  • Food Items:
    • Food type: Treat, Wet, Dry
    • Link: link to the chewy page
    • Calories/kg: required if link to the page isn’t provided
    • Calories/treats: required if treat
  • Meal Plan:
    • Number of Feedings: How many times you feed your per day.
    • Treat Frequency: How many times per Day treats are given out?
    • Primary Food Item + Percentage - Required
    • Secondary Food Item + Percentage - Optionals

The output will be:

  • The percise grams of each food item to give per feeding time and the number of treats in order to reach the target calories or stay within an aceptable percentage from the target.