Eggonomics is a web-based mobile application looking to help users shop smarter, cheaper, and reduce waste. Our team is designing an app to help users track the prices of everyday household goods and aid them in reducing food waste. Eggonomics will provide users with a price tracker, shopping list, food pantry list, and data analytics on spending and food waste.
Technologies used for this project:
- HTML, CSS
- JavaScript
- Bootstrap
- Firebase
- Cloud Storage
Content of the project folder:
Top level of project folder:
├── .gitignore # Git ignore file
├── index.html # Landing HTML file, this is the login page users see when they go to the url
├── sampleAPIdata.csv # CSV file containing sample product data
└── README.md # Overview of our project and repo
It has the following subfolders and files:
├── .git # Folder for git repo
├── html # Folder for html files
/404.html # HTML file for Firebase's default 404 page
/all_shopping_list.html # HTML file for the shopping list main page
/main.html # HTML file for the landing page
/pantry.html # HTML file for the pantry page
/price_tracker.html # HTML file for the price tracker page
/profile.html # HTML file for the user profile page
/single_shopping_list.html # HTML file for the individual shopping list page
├── img # Folder for images
/apple_homepage.jpg #
/apple-icon.jpg #
/banana_homepage.jpeg #
/banana-icon.jpg #
/brocoli_homepage.jpeg #
/kiwi-icon.jpg #
/list-placeholder.jpg #
/logo.png #
/orange-icon.jpg #
/placeholder.jpg #
/profile.png #
/transparent.png #
/sampleAPIimgs # Sample images used for the Price Tracker output
├── scripts # Folder for javascript files
/all_shopping_list.js # Javascript file for the shopping list main page
/firebaseAPI.js # Javascript file for the Firebase API
/index.js # Javascript file for the login page
/main.js # Javascript file for the landing page
/pantry.js # Javascript file for the pantry page
/price_tracker.js # Javascript file for the price tracker page
/product_display.js # Javascript file for main and price tracker pages' product display
/profile.js # Javascript file for the user profile page
/single_shopping_list.js # Javascript file for the individual shopping list page
├── styles # Folder for css files
/404.css # CSS file for Firebase's default 404 page
/all_shopping_list.css # CSS file for the shopping list main page
/index.css # CSS file for the login page
/main.css # CSS file for the landing page
/pantry.css # CSS file for the pantry page
/price_tracker.css # CSS file for the price tracker page
/products.css # CSS file for the price tracker page
/profile.css # CSS file for the user profile page
/single_shopping_list.css # CSS file for the individual shopping list page
/styles.css # CSS file for our app's skeleton
Firebase hosting files:
├── storage.rules # Storage rules for Firebase
├── firestore.rules # Rules for Firestore
├── firestore.indexes.json # Firestore index definition reference
├── firebase.json # Firebase hosting configuration
├── .firebaserc # Settings for deploy targets
├── 404.html # Default Firebase 404 error page
├── .firebase # Folder for hosting cache
/hosting..cache #
Tips for file naming files and folders:
- use lowercase with no spaces
- use dashes (not underscore) for word separation
References
5FA9Images: Fruits image (https://www.boldsky.com/health/nutrition/fruits-that-are-extremely-beneficial-for-your-health-131531.html) Pole image (https://kitchensanctuary.tumblr.com/post/169311613351/chicken-noodle-soup-with-turmeric?is_related_post=1) Chicken wings image (https://costum-case-theatrical-costume-supplier.business.site/) Burger image (https://www.ubereats.com/za/store/the-burger-shack-panorama/dEad-XZSVRWwdY0hicmd-g) Apple icon (https://www.harvie.farm/profile/warner-farm) Banana icon (https://www.getwhatyouwant.ca/thinking-of-selling-your-home-in-2021-the-winter-surge-is-here-and-its-bananas) kiwi icon (https://www.healthline.com/nutrition/kiwi-fruit-benefits-for-skin) orange icon (https://healthyfamilyproject.com/recipes/citrus-sage-roasted-turkey/)
Sample API Images: bigbrain image (https://unsplash.com/photos/A6c4cUoFrHg) butter image (https://unsplash.com/photos/LcfdOp72zdE) cereal image (https://unsplash.com/photos/vLHzjRNFbEQ) chocobar image (https://unsplash.com/photos/IfZ5WNmnSFg) cola image (https://unsplash.com/photos/X6aY_j6JD_Y) egg image (https://unsplash.com/photos/a5JMF6XyFYI) elmo image (https://unsplash.com/photos/pOOX1ER3aiE) icedtea image (https://unsplash.com/photos/CCowelQ2pLw) ketchup image (https://unsplash.com/photos/qlBVmQrdfMk) pizza image (https://unsplash.com/photos/SU1LFoeEUkk) pwingles image (https://unsplash.com/photos/YYDeTuqUHAs) python image (https://unsplash.com/photos/U_82hv1mKSo) sevenc image (https://unsplash.com/photos/296kqnmcgUQ) slugma image (https://unsplash.com/photos/qaTolf5xgC4) sql image (https://unsplash.com/photos/NfaZjll9-8g) waffle image (https://unsplash.com/photos/yxZSAjyToP4)
Code: Drag to scroll (https://htmldom.dev/drag-to-scroll/) Modal (https://www.w3schools.com/howto/howto_css_modals.asp)