Food Web App Dev 2 project (MEVN stack)

by Vue.js Examples

? is216-project

? IS216 – G1 – Food-Ful

? Project Overview

What is the problem?

In 2020, Singapore accumulated 665,000 tonnes of food waste, where half of an average waste disposal comprises food wastage in a household (NEA, 2021). Furthermore, $342 million worth of food waste is generated by Singaporean households every year (LIU, 2020). By looking at the contributory factors as to why excessive food waste is generated, we found out that a portion of food wastage comes from unopened items that have been disposed of after households forget about them. Additionally, during this pandemic period, households have been seen to adopt the tendency to over-purchase their groceries which results in more food wastage (Tan, 2020).

How do we solve it?

Introducing, Food-Ful, designed for anyone in the ages between 20-40 years old who are keen on reducing their food wastage. Our team has come up with a web application that aims to reduce food wastage – some features are for users to track the expiry date, and recommending recipes based on their inventory.

Before Implementation

Before the coding process, we came up with rough Figma design prototypes and a Web Navigation Diagram to give us a better idea on how our application will work.

Below is our navigation diagram where we show the different functions and pages of our web application:

Below is our Architecture diagram to show the interactions between our application components:

To view our prototype, click on the links below:

? How to Install and Run Our Web Application (for Developers)

  • This method is applicable to both Mac OS and Windows OS

Firstly, you have to clone this repository into your local environment

  1. On the ‘<> Code’ page, click on the green ‘code’ button and a dropdown will appear.
  2. Make sure you’re under the ‘HTTPS’ tab, and copy the URL.

Open git bash if you have it, otherwise any Command Line Interface that you use.

  1. Change the current working directory to any location where you want the cloned repository to be – use command cd to navigate
  2. Type git clone, and then paste the URL you copied earlier.

It should look something like this:

Press Enter to clone into your local machine

After cloning, change directory into the local repository

  • Note that is216-project-group-1 is the root folder, containing the main sub-folders – backend and front-end

Now you have to install the node modules used in this repository

  • Note that the screens below may defer from yours
  1. Change directory into the front-end folder
  2. Type npm install or npm i for short to install all the node modules used in the front-end folder

  1. Change directory into the backend folder
  2. Type npm install or npm i for short to install all the node modules used in the backend folder

  1. Change directory into the root folder
  2. Type npm install or npm i for short to install all the node modules used in the root folder

You are done with the set-up! Now lets run our application on your localhost

  1. Type npm run dev to start both the front and back end together in your local server

  1. Wait for around 10 to 20 seconds for the [webpack.Progress] to compile successfully
  2. Click on http://localhost:8080/ to open our application locally

Remember to end the servers before you close your Command Line Terminal

  1. In the Command Line Terminal, press Ctrl + C. It will end both servers

? How to Use Our Web Application (for Visitors to our Website)

1. Click on “Get Started”


2. Create a new account by clicking on “Sign Up”. Once your account has been succesfully registered, you will be brought to the login page. Now login into Food-Ful.

3. Once you have successfully login, you are brought to an overview. On this page, you can see how many ingredients you have, the number of items that are still good or expired. You can also see which items are expiring and browse through new recipes to try!

4. But first, let’s add some ingredients. You can click on “View Inventory” on the top Navigation Bar and you will be headed to the Inventory page. On this page, you can search for your ingredients and sort them based on category by clicking on the category icons or by expiry date using the sort button.

5. Add your items using our auto filled form. Feel free to change the the category and metrics to what seems fit. You also have to input the original quantity of your ingredient when you just bought it and the current quantity that is left now. Do not forget to add an expiry date!

6. Once you have added your items, you can see that your items are reflected on the Inventory page. You can delete any items by clicking on the “Delete” icon on the card. Remember to update the quantity left by clicking on the “Edit” icon on the card. On each ingredient card, you can also see which category it belongs too, the number of days till the expiry date and a progress bar on how much you have used up.

7. After adding, you can search for new recipes based on your inventory list. Click on “Browse Recipes” on the top Navigation bar and you will be brought to the Recipe page. On this page, you can Must Try recipes, recipes according to your Inventory list or watch fun cooking videos.

8. When you click on a recipe card, you can view the ingredients needed and follow the step-by-step instructions. You can choose to view the recipe as a whole page too!

9. If you are not up to reading, you can always click on the “Videos” tab and click on any video that might interest you. You can follow along as you cook!

10. That is all you have to know about Food-Ful. We hope that with this application, you are one step closer to reducing your food wastage! Afterall, food taste best when it is fresh!

? Other Things

Explore our Learn More page and get to know our roles and the goals of Food-Ful!


GitHub

View Github