March 8, 2024

Kelly’s Status Report for 3/9/24

Worked on and completed Design Report
- I took on the Use Case Requirements, half of the Design Trade Studies, Project Management, and helped with proofreading, wording, and formatting the document.
- I created a new gantt chart so that it can fit better on the design report as our current one, which is the timeline feature of Google Sheets, is too spread out and does not fit well on the page.

Created separate Github Repository for the app to separate our server repo from the client repo: https://github.com/kellyycha/sous_chef_app
Worked on the UI of the app to match Figma mockups, building front end components such as:
- Dropdown buttons
- Scrollable list
- Customized widgets for item card
- Icon buttons
- Search bar
- Calendar: edited existing Flutter package: https://github.com/rwbr/flutter_neat_and_clean_calendar
I created widgets in separate files to reuse, such as the search bar, which will be used in the inventory page and the recipes page, and the item card, which will be used in all three pages but with different information passed in.
Creating the elements to match the Figma exactly was difficult as some containers in Flutter do not have all the customization features, like setting colors, borders, rounded edges, background colors, alignment, etc. Therefore, I had to get creative in wrapping different containers in each other to customize as intended.
I have completed the inventory and calendar page thus far and am very satisfied with how to UI looks. Here is a video of me clicking through the app.
The buttons do not have functionality as of now, which is what I will work on with Sebastian.

Last week, I created a phone holder design that attaches to the refrigerator. The purpose is to hold the users phone up while the app displays the video feed of the scanners so the users can see their items being scanned and have an idea of if they are in frame. We are planning on implementing this on the app and also provide a user interface that suggests possible items if the computer vision detection is unsure what the item is. This is the design i came up with. The outer part sticks to the front of the refrigerator, near the opening, and opens outwards so that the user’s phone screen is facing the user even when the refrigerator door is open.

This week, I edited the phone holder design. The old design had the bottom back corner stick out when turning, which would cause it to not open when attached to the refrigerator door. An easy fix would have been to make the stationary part wider. However, I did not want to make the design too bulky. Therefore, I created two axes, one for each way a door can open, left and right, and will allow the user to adjust the phone holder to how they open the door. In addition, I edited the width of the phone holding part to be wider so that it can fit a phone. The dimensions before were too small. I also added a ball at the top of the axis rod so that users can grab onto it to lift up the axis to change the position to open the other way. And the opening for the rod does not go all the way through, it stops half way at the bottom so that it is closed and no closure, adhesive, etc. is needed.

My progress in ahead of our gantt chart since I worked on some things during Spring Break. I completed the design of the phone holder and am almost done with the UI layout/ making the app pretty.