What's In Your Fridge? is an easy-to-use, handy application to track ingredients (or food in general) in your fridge. Don't know what to cook? Browse through suggested recipes and get inspired to prepare your next meal. Best viewed on desktop.
Why this application? I simply love food. As a busy working adult juggling many responsibilities, I do get frustrated when my fridge is cluttered - certain foods expire and are forgotten (sometimes).
- 🍎 Create a new ingredient record by filling in the ingredient name, type, purchase and expiry dates
- 🥥 View all saved records upon reloading the page
- 🍊 Edit an existing record
- 🍇 Delete an existing record
- 🍳 Generate randomised recipes via the use of API
ViteReactCSSBootstrapMaterial-UIAirtableTheMealDB (API)
This is my second project during my course at General Assembly. The time given to complete this project was about a week. I was required to include at least 5 components, 4 props, 2 useStates, 2 react-router routes and 1 lifting state. It was also required for me to integrate a 3rd party API, and Airtable to store my data, and implement a full CRUD (Create, Read, Update and Delete) in my application.
I started by planning the Ice Box items that I wanted to implement in my project using a Kanban board. I placed myself in the shoes of potential users of my application, and as an application user myself. [Trello]
As this was my first time using Airtable, I learnt how to implement CRUD using the GET, PUT, PATCH, and DELETE methods.
Debugging was a challenge especially when dates, combined with Airtable, were involved and it took a significant amount of my time during the project. I learnt that the system uses the ISO-8601 date representation by default and as such, one of the methods above would not work when I tried to re-format the dates to reflect "dd/mm/yyyy" format for readability. I had to ensure that all data fetched, entered/updated, and imported onto Airtable reflects the same format for this to work.
Dev Log #1 (Jan 2024): As I have completed my course, I aim to improve the application to be user-friendly and I derailed from the project requirements stated above. For example, instead of routing to another page when editing an ingredient record (a standalone page), it appears as a pop-up in the main page.
- Filter and sort feature to categorise the listed ingredients e.g. filter by type, sort by ingredients which are expiring soon. Due to the lack of time during the course, I did not manage to implement this, and this feature would definitely add more value to my application.
- Optimise the application for mobile viewing - I would imagine most people to use it on their mobile as they track ingredients near their fridge, as compared to using desktop to do so.
- Replacing Airtable with a SQL database. I pick SQL as it is suitable for structured data that doesn't change much overtime in terms of scalability, and is most suitable for a small project like this. As a start, I pick PostgreSQL to learn more about SQL. With the implementation of database, I plan to use Express and Node.js as part of my backend infrastructure.
- Sign up and login feature
I learnt more about Git and how repositories work when I made a mistake by executing git init and initialised the repo with my node_modules files before creating the .gitignore file (and creating it afterwards does not solve the issue). It was a very rookie mistake and that there are huge consequences when including node_modules files in Git. For major collaborative projects in the future, this will cause slow pulls and pushes and can be highly problematic when merging.
Main Page
(The portal is through the fridge)
Ingredients Tracker
Recipe Randomizer
