Looking Back
This is where we've looked backed on our objectives and generate conclusions for them
Location Services
In the beginning, I planned on allowing users to give permission for location services. This was to populate an icon on the map, showing their location compared to the foodbanks in the community. I successfully did this by using HTML Geolocation API and Google Maps API. Combining both, I was able to set a marker on the map for the users location.
Ability to Use Inventory Buttons when Logged in
I planned on only allowing managers to manage the inventory for obvious reasons. I implemented this by using firebase.auth(); and checking if the user property is null or not. Depending the the result, the statements would return a string. This string was used as a className which could be edited in CSS.
Realtime food updates
I planned on having a Realtime updating page where inventory will be live. I successfully implemented this by using Firebase and UseState. I was able to take snapshots of the database values and constantly update them every second.
Privacy
I planned on typing out my own privacy terms but I used a free service instead. This website took in my parameters and generated a page that includes privacy terms for all of them. https://www.termsfeed.com/live/0e4de4cc-a45c-4a83-a952-746cc14482d2
Navbar
I planned on implementing a working aesthetic navbar. I implemented this by creating a separate JS file that included all the links. After that I mapped through that array of links to display them one by one. I also used our color scheme to match the rest of the pages. The buttons turn orange when the user hovers on it.
Authentication
When beginning the project, I planned on food bank managers being able to create and login to their accounts in order to update their foodbank's needs. I successfully implemented this through using Firebase and useState(). I was able to create valid food bank accounts through using a vlaid email, password, and a pin. In order to login the user can use the valid email and pasword to access their account.
Sign up
In order to sign up, a user has to enter a valid email, password, confirm password, and a pin. The inbuilt firebase function createUserWithEmailAndPassword() validates if the email is valid and if an account already exists with that email. I created two input fields for password and confirm password to validate the account. In order to avoid any user to register as a food bank we created a pin where if it matches the one stored in the firestore database the account is successfully created. If the pin is incorrect, the passwords do not match, or the email is invalid an error message will be outputted on the UI. These error messages are custom to the specific error being thrown.
Login
In order to login into the food bank , the user has to enter the email and password they inputted to create the account. The inbuilt firebase function signInWithEmailAndPassword() checks if the account exists otherwise throws an error if the email or password is incorrect.
Contact Page
Upon starting the project, I wanted to be able to use a contact page where when a user submits an inquiry, the inquiry automatically gets sent to our FoodSnap email. However, the library required “SMTPjs” was no longer working in the same manner that it had previously been working which required me to find an alternative way of receiving and replying to emails. To resolve this issue, I looked into Firebase. Through Firebase, I was able to store inquiry information sent in by users and reply accordingly. Furthermore, the contact page replies with alerts upon hitting submit message informing the user whether or not the email has been sent, depending on if the required fields for the contact form have been filled accordingly. Otherwise, an alert will given informing the user the form has not been filled appropriately or if the inputted email information is incorrect.
Frequently Asked Questions
When starting our project, it was clear to us that user’s who initially use our website will have many questions as to how it works and who the creators are. So I created an interactable FAQ dropdown menu where the menu itself drops down and shows all the questions on click, and then each answer is shown when each question is clicked. This required multiple functions to be used for this single page which definitely proved to be one of the most difficult parts of this project for me. As well, to allow for ease in all the dropdowns, I assigned variables so I could utilize cacl(var()) to the parameters of the CSS so all aspects of the FAQ page are proportional.
Local Food Banks Page
Initially, we wanted users to be able to go on our website, and be able to find any food banks that are located near them, and then be able to visit the desired food banks website. Using interactable pngs of each food bank’s logo, I was able to complete this task. However, upon nearing completion of this project, we noticed the redundancy between this page and the abilities of Location Services page and we decided to merge the two concepts together.
We constantly checked the UI for mobile and desktop, making sure that they looked proper and worked well. We made sure to look back on fixes and bugs that friends pointed out.
As said above, we gave out website to our friends to test out. Majority of the main functionality was working properly. I used Jest to act as a manager, making sure our buttons worked properly.
This was an absolute pain. Most of the problems were occurring due the the package.json. We had different packages installed for different needs but merging them all into one branch created problems. Fortunately they were all fixed. Manually installing them did the trick.
Hosting had a few problems. One of the files were conflicting with the npm run build command. Fortunately I fixed them and got the website hosted on cloudflare for zero charge
Although we were going to use Adobe, those products were paid and we ran out of free trial. So instead, we used Figma Student. These UI designs, different from the website due to implementation and color scheme changes, can be found on our google drive link.
https://drive.google.com/drive/folders/1CKw5oH6AVZ16pbX5EhdtrpHUw2A7msHt?usp=sharing
We did plan on contacting foodbanks and we did. We emailed a few of them in Mississuaga. The email can be found below.
To the best of our abilities, we have delivered a working web app. Although a few obstacles occurred, the app works.
We assumed that Google Lighthouse would deem our app optimized, but unfortunately this was not the case.
We assumed that the food banks will cooperate with us and provide us with their information. This was the case for the planning phase, where we made contact with the managers. We also attending video calls discussing our plans. Unfortunately, they haven't answered our recent emails; therefore, our info on the home page involving inventory is not authentic.