FFMon - Fresh Food Monitor app

What I built

Real experience in my everyday life: leftover food, fresh produce, dairy products got into the fridge and forgotten. What if there's a convenient, fast and mobile-friendly app with focuses solely to monitor and keeping track these foods and reduce wasting valuable food that were forgotten. FFMon is born on that very day

Category Submission:

Phone Friendly

Screenshots

https://freshfoodmonitor.web.app/

Technology stack:

• Vue is arguably the best and easiest web framework to work on front-end UI.
  • Notable vue libraries used:
  • Vuetify - a mobile-friendly Vue UI library, well-documented and has comprehensive list of most-used components in a typical web app.
  • Pinia - an easy to use state management framework to simplify storage solutions in web applications
  • Vue Router - provides routing capability for view transitions
• Firebase: provides hosting solution for the deployment of this app
• Github: provides repository and actions to perform continuous integration. A must-have for a rapid deployment workflow

Description

The Fresh Food Monitor app allows users to keep track of their food inventory by giving them the ability to add, edit and delete item stored in their fridge / shelves / etc . The app is designed to be simple, fast and user friendly

Link to Source Code

FFMon

Permissive License

MIT License

How I built it

1. Setup the repo in the Github
2. Use vuetify generator to speed up the process of installing vuetify into vue app, adding pinia for state management and vue-router for routing feature
3. Start modeling the UI screens, finding the minimum data needed from users or other resources to reach the MVP (minimum viable product)
4. Implement the solutions which involves UI layout management, defining state management actions , validations and view transitions
5. Add Local Storage using a Vue plugin to persist data in the web browser
6. Install firebase into the project directory and test the deployment
7. Add github actions which is conveniently available using firebase generator
8. Try a PR and test the auto-deployment is working after merging to main branch

Background (What made you decide to build this particular app? What inspired you?)

Real experience in my everyday life: leftover food, fresh produce, dairy products got into the fridge and forgotten. What if there's a convenient, fast and mobile-friendly app with focuses solely to monitor and keeping track these foods and reduce wasting valuable food that were forgotten. FFMon is born on that very day.

What's Next

While this app showcases the rapid dev and deployment using Github Action, there are so many features can be added to this app such as food items lookup, more validations, favorites , Unit Tests, E2E Tests, etc
We are more than eager to continue building this app and will share more of it in coming posts. Stay Tune!

Collaborators

Ester Kim dev.to