AudIt

Project Overview

After I had just moved from Seattle back to Fremont, where I grew up, I realized that I owned way too many things. And, living in an apartment by myself this year, I noticed that certain items I purchased over and over again on a recurring basis, from more obvious things like shampoo, to less obvious things like sponges. At the same time, I realized it had been a while since I built a web app from end to end, without the help of any AI tools like Cursor.

So, I took a few days to build out a simple React App, called AudIt, which helped me keep track of my personal belongings. I came up with the idea several months prior, but never got around to building it since CSS scared me. I started by using ChatGPT (the one time that I did during this project), if I my conceptual understanding was correct:
1. HTML is like the "what" on the web page
2. JavaScript is like the actions that are performed, the logic to display things
3. CSS is like the makeup that tells the webpage how to render the HTML components

After this, I used v0.dev (Vercel) to have it build out a mock version of the website. Of course, I didn't use any of the source code here. The only reason for this was so that I could have a design to work off (I'm really bad at design still). And from there, by the end of day one, I had a solid skeleton with hardcoded values.

Day two was all about adding state to the website. So having the "Add", "Edit", and "Delete" buttons actually mutate the list of items, and have the corresponding computed values update as well instead of being statically hardcoded.

Day three was introducing a database layer so that the data would persist over refreshes. I decided to go for a Python Flask backend, with a basic PostgreSQL database, just because this was what I was most familiar with.