ncosd / food-pantry-app Goto Github PK

7.0 3.0 9.0 5.1 MB

Web application for food pantries. Volunteer registration and approval. Creating physical sites and time windows for volunteers to sign up to cover.

License: MIT License

JavaScript 14.29% Vue 81.37% HTML 0.25% SCSS 1.45% CSS 0.72% MDX 1.74% Makefile 0.17%

food-pantries food-banks food-pantry-admin food-insecurity

food-pantry-app's Introduction

Food Pantry App

This is food pantry software written as a web application for Food Pantries. Volunteers can register with the site, and choose locations and days/times from a schedule.

The Food Pantry Application is designed to help run day to day operations and manage food pantry volunteers. The highest priority items are below, and you can see the full roadmap at the projects link. The current sprints are being run off the Project Board. If there is something you need added, please create a new issue.

Guests and Volunteers can register with the application
Volunteers can apply for specific days/hours they would like to volunteer
Guests can apply to be on the delivery list
Admins can maintain the list of volunteers that will attend on specific dates
Admins can maintain the list of deliveries that will be made on delivery days
Admins can maintain an inventory of what is available and amounts of items.

Project Roadmap

The project uses Github projects for its roadmap, you can find the roadmap here: https://github.com/orgs/ncosd/projects/2

Developing

Pull requests are welcome, and will be reviewed. If you are new to open source development there are many resources on github, and this guide can be helpful with getting started.

Use this link to find good first issues https://github.com/ncosd/food-pantry-app/issues?q=is%3Aissue+is%3Aopen+label%3Agood-first-issue and https://github.com/ncosd/food-pantry-app/blob/main/CONTRIBUTING.md has information helpful to get started.

This project uses firebase, Vue.js (version 3), and bootstrap 5.3. The project can be configured with information stored in local files which are not stored in github. You can develop locally on your laptop without deploying to your own firebase project. To develop and run locally without deploying to firebase you can use the emulators and a project that is on the free Spark plan. If you want to deploy to firebase, then you will need to upgrade to the Blaze plan because firebase functions are used in this project. However, as a developer you do not need to deploy to firebase, and do not need to upgrade your project to the blaze plan.

Prerequisites

You should have node and npm installed. If you do not have npm look here to install npm. Firebase is a dependency in the project.
You will need the firebase cli. You can install it using npm.

npm install -g firebase-tools

You will need to create a free firebase application at https://console.firebase.google.com/
1. Click Add Project, give it a name and follow the defaults.
2. Click Authentication, and turn on authentication, enable the "email and password" option.
3. Click Firestore and create a database, the default options should work.
4. Click Hosting and create a site.
5. At the bottom of the hosting page, there is a "add another site". Click this and create another site by adding -admin to the projectid you just created.

Setup

You can run this project locally against the firebase emulators. You can see how to install and configure the firebase emulators here https://firebase.google.com/docs/emulator-suite/install_and_configure.

The first time you need to login to firebase and configure this project to use your application. The projectid is from the firebase project you created above.
firebase login
firebase use _projectid_
firebase target:apply hosting app _projectid_
firebase target:apply hosting admin _projectid_-admin

After login and configuring a project (on the spark plan) clone the repo, or if you plan on contributing by writing code, fork the repo, and then clone your fork. The instructions for cloning the repo are given below.

git clone [email protected]:ncosd/food-pantry-app.git
cd web/functions && npm install
cd ../admin npm install
cd ../app; npm install

Set the env to be the dev one

firebase use dev

Prepare the .env files:

Copy web/app/env.demo to web/app/.env.
Copy web/admin/env.demo to web/admin/.env to create a .env file for both app and admin folders.
Configure the VITE_FB_ values from your firebase project configuration into the following environment variables in the .env files:

VITE_FB_APIKEY="big-long-string"
VITE_FB_AUTHDOMAIN="projectname.firebaseapp.com"
VITE_FB_PROJECTID="projectname"
VITE_FB_STORAGEBUCKET="project-storage-bucket.appspot.com"
VITE_FB_MESSAGINGSENDERID="some-id-number"
VITE_FB_APPID="some-app-id-number"
VITE_FB_MEASUREMENTID="some-app-id"

Use these commands for developing locally:

# you should be in the web/admin directory
npm run serve:firebase:emulator   # leave this running in one terminal
npm run dev                       # Leave this running in another terminal, this will run vite with hot-reloading on port 5174

# to run the guest app in web/app directory
npm run dev                       # leave this running in another terminal, this will run vite with hot-reloading on port 5173

Running these three commands will run the emulators in one terminal, and Vite build in the other for the Guest and Admin apps. You can open your browser to http://localhost:5173 to see the guest pages, and http://localhost:5174 to the volunteer pages. The firebase service will not do hot-reloading in the browser when Vite builds to the dist folder whenever changes are made, so you will need to reload the web browser as you work to load the latest built code.

Java installed?

The firebase emulator needs node.js 8.0 or higher and Java JDK version 11 or higher.

If you see an error message like: "Error: Process java -version has exited with code 1. Please make sure Java is installed and on your system PATH." you can follow the instructions at https://firebase.google.com/docs/emulator-suite/install_and_configure.

macos java?

The easiest way to install the open source jdk on mac is to use homebrew to install java. At the end of the install it will tell you how to create a symlink to openjdk.jdk

brew install java
sudo ln -sfn /opt/homebrew/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk

Hosting port 5000 is not open?

If you see hosting: Port 5000 is not open on 127.0.0.1, could not start Hosting Emulator.

This is because the airplay receiver is listening on port 5000. You can either turn it off in System Preferences | Sharing | uncheck "airport receiver" or configure firebase to use a different port.

Component development

When you are developing components, Storybook helps the process by letting you focus on the component without worrying about all the other dependencies in the site.

You can run storybook with the command:

npm run storybook

This is great, how can I use this for my Food Pantry or Food Bank?

It will get easier over time as the process is refined. Currently, the best way for you to use this project is to:

Fork this repo
Configure for your organization name by creating a .env file in web/app/.env. You can copy env.demo as a starting point. You will also need to do this for the admin app in web/admin. A portion of the file is shown here:

file: web/app/.env

VITE_RUN_LOCAL=true
VITE_APP_NAV_NAME = 'name' # this is the name in the navbar at the top.
VITE_ORGANIZATION_NAME = 'org name' # this is your organization name.
VITE_PROJECT_LONG_NAME = 'long name' # this is the name of the website you are going to deploy.  Usually a long version of you Project Name.
VITE_DELIVERY_MESSAGE="Extended message here.<br>It can have HTML in it."
VITE_DELIVERY_AREA_NAMES="Your Township Name"
VITE_DELIVERY_OUTSIDE_AREA_URL="https://connect4health.org/"
VITE_DELIVERY_ZIPCODES="12345"

Create a firebase project with hosting, firestore, and functions. You will need to configure the functions similar to the json file above.
Build the vue project:

cd web/app; npm run build cd ../admin npm run build
Deploy it to your firebase project

cd web firebase deploy

If you have a question, open a Question issue

food-pantry-app's People

Contributors

Stargazers

Watchers

Forkers

dherbst kishorekolli birajmeshiya16 sahilmulla rakshitriya lukada-taiya harjobandeepsingh nishit-prasad tusharwebd

food-pantry-app's Issues

Create a delivery day view for a route

Feature Description

A delivery route is a set of deliveries. One or more admin users will be assigned to a route on a day. When the route is activated for a day, the admin users should be able to set the state for each household's delivery, one of [Ready to Pack, Packing, Packed, OnVan, Delivered, Exception].

Expected solution

Need to design the document collection in firestore to track the route with the household addresses (DeliveryProfile) and the current state for that day. The guest should be able to see their state for that day in the Guest app. The admins should be able to see the status on the Route for that day in the Admin app.

Testing

Create volunteer profile page

Feature Description

After registration, a volunteer should be able to view their profile. They should be able to:

Specify the days they are available this is on the VolunteerRegistrationForm
Specify location preferences, e.g. All, or checkboxes of locations
Update their personal information e.g. name, email, phone, etc.
Have a checkbox for "inactive" if they are no longer able to be a volunteer but are not ready to delete their account.
A link to delete their account from the system.

View needs a visual design

This view needs to be designed

Create a way to delete my account.

Is your feature request related to a problem? Please describe.
Users need a way to delete their account, and their data from the application.

Describe the solution you'd like
Need a way to delete an account and delete their information from the system.

Ensure they are logged in
Mark authentication invalid
List out all the places someone might have their data in the system
List the areas we should not delete, but we can anonymize their data for reporting purposes
Send a confirmation to their email address once the data has been deleted

https://firebase.google.com/docs/auth/web/manage-users#delete_a_user

Describe alternatives you've considered
Look to see if there is a firebase module for this already.

Additional context
None at this time.

Create list of zip codes to validate for deliveryform

Only allow a deliveryform application if the zip code is listed in the delivery area. Otherwise show a message to the user that they are outside the service area, and provide a link for them to search for other organizations.

Describe the solution you'd like
Put the list of zipcodes in the config.

Page title needs to be set.

The vue application needs to set a page title so that page views are tracked by name in analytics.

framework for doing this is set up in router/index.js and config
Set up a way for forks to do their own config easily.

Create admin app

Feature Description

The firebase hosting has been refactored to use an "app" for the guest application, and "admin" for the admin application. The guest app is in web/app. Need to create a new vue app in web/admin.

Expected solution

Create host target for app in firebase.json - this is the guest site
Create host target for admin in firebase.json this is the admin site
Create admin vuejs app with vuetify
Add vue-router and check custom claim 'admin'

Testing

Volunteer Portal Registration

Feature Description

When registering, select as a volunteer.

Expected solution

Registration signup includes a checkbox to mark user as a volunteer.

https://ncosd.github.io/food-pantry-app-prototype/registration/

Testing

Need a configuration tool

Feature Description

There are quite a few configuration settings needed for local development or if someone wants to use this project for their food pantry. A configuration tool, either as a web page, or command line tool is useful for setting up local files needed for local development.

Expected solution

https://github.com/SBoudrias/Inquirer.js could be a good tool to build a command line tool, that would use the env.demo files as a template to create the .env files in the correct place.

Testing

Create "forgot password" feature

Users that forget their password need a link to 'forgot password'

Follow the guide for sending the email here: https://firebase.google.com/docs/auth/web/manage-users#send_a_password_reset_email

Create delivery application management page

Feature Description

Delivery managers should be able to review delivery applications, and mark them as active or rejected.

Expected solution

Need to add roles for admins and then pages only admins can interact with.

Testing

Volunteer Portal - Admin view of the volunteer list

Feature Description

Admins can view list of the volunteers.

Add a form for guests to apply to receive delivery.

Is your feature request related to a problem? Please describe.
Guests can apply to be put on the delivery schedule.

Describe the solution you'd like
The form is on the website, it needs to follow that.

DeliveryForm component
DeliveryForm View
DeliveryForm in storybook
DeliveryForm loads current state from firestore
DeliveryForm View submits to firestore
DeliveryForm Component has validation rules for input before saving
DeliveryForm View adds flags to component to note when data is saved successfully or if there is an error

Add github workflow to run tests

Is your feature request related to a problem? Please describe.
Add github workflow to run unit tests.

Describe the solution you'd like
Run the unit tests on branches.

Volunteer Portal Demo to volunteers

Demonstrate the volunteer portal

Tasks to demonstrate:

Create a login #111
See and Set your availability windows #24
Select a date and time to volunteer #112
Mark a volunteer session that you need to cancel the volunteer date and time #114
Receive a message for a fill-in schedule, respond that you accept the fill-in #115
Login and mark yourself active during your volunteer date and time session. #116
If your session begins, get a message to confirm you have started, or need to miss the session. #116

Volunteer Portal Calendar Page

Feature Description

Display a calendar view, showing the days of the month

in each day show the volunteers signed up to volunteer that day, and the hours
The logged in user's date/times should be highlighted to them for easy visibility
Allow the user to go forward/back a month
If a window of time has no volunteers, highlight that in (pick a color)
Clicking an uncovered window takes you to the claim page #144

Expected solution

Create a view https://github.com/ncosd/food-pantry-app/blob/main/web/admin/src/views/Home.vue
Create a calendar component https://github.com/ncosd/food-pantry-app/blob/main/web/admin/src/components/AdminCalendar.vue
Read the data from firestore

HTML/CSS is done https://github.com/ncosd/food-pantry-app-prototype/blob/main/content/volunteer/calendar.md

Testing

Create registration flow after signup

After signing up for an account, a person needs to go through a short flow to determine:

will they be a guest, or a volunteer
do they want to submit for a delivery application

Depending on the answers to those questions, they should be directed to pages to collect needed information and then categorized. They should be able to re-answer these questions at any time.

Remove vuetify in admin app

Add Terms view

Page for Terms of Use.

load terms from the config object.
Create /terms page
Create terms view

Service Area component

Feature Description

The https://foodpantrydemo.web.app/delivery-form should have a component that explains the service area that is under the application status component. This will help explain the service area for deliveries. There should be a link to the other places that a guest can look to find other organizations if they are not in our service area.

Expected solution

A ServiceArea component that is displayed on the left nav vertical.
It would be good to list out the zip codes that are covered in the service area (this is in the config). Maybe also include a text field the user can type in their zip code and the component can quickly respond if the guest is inside the service area, or outside. Then provide the link to the other places they can contact for service.

Testing

Set up unit tests

Set up unit testing

local unit tests
github action for running tests

Add Privacy Policy view

Is your feature request related to a problem? Please describe.
Need Terms and Privacy Policy view.

Describe the solution you'd like
Need components and views for

Create a guest check-in process

Feature Description

Members can register with the system today. We need a process to check in a member when they visit the food bank. This will keep a record that someone has visited and was served. This will allow automating reports for usage.

Expected solution

A member will be assigned a UUID. The UUID can be used to create a scannable QR code displayed on an account profile page. The admin application can have a scanning page that uses the camera on the phone to scan the QR code to record the guest has checked in.

An anonymized visit record can be created that uses information needed for reporting.

Create admin page to scan guest qr codes
Create guest page as a tab on profile to display their user.id as a QR code that can be scanned and record the datetime scanned, and which admin scanned it.

Testing

Bring up QR code on the account profile page.
Scan QR code on the admin app
Create report for the day to see that the visit was recorded and aggregated information is in the report.

Add storybook

Add storybook for components

Add empty firebase application

has user register
has user login
has user logout

Connect pinia user to firebase user

Before we were using vuex for state. Want to move to using pinia for state.

Complete the Register form to create a user in firebase
login/logout working with firebase

Admins can invite other admins

Feature Description

When an admin needs to add someone as an admin, they should be able to enter an email address to send an invitation for someone to sign up. Once the new person is signed up, they should be given the admin role.

Expected solution

Testing

Generate pick list and delivery tags for delivery days

Description
On delivery day, a delivery tag needs to be created with information about packing the delivery box

number of people in household by age ranges
address
Notes for exclusions - like allergies, food exclusions, etc.
QR code for scanning for an approved app to find the details about the delivery

Create 404 view

Feature Description

Need a branded 404 page.

Expected solution

Create a NotFound component, and add to the router to display the NotFound component when needed.
This provides an example https://stackoverflow.com/a/45631742

Testing

Volunteer Portal - Pending Volunteers - Component

Feature Description

Component for the Admin homepage (bottom of the page https://ncosd.github.io/food-pantry-app-prototype/volunteer/admin/homepage/)

Pending Volunteers

Name	email	details	action
First last	[email protected]	meets all criteria	- [ ] Activate [ ] Inactivate
First last [email protected] meets all criteria - [ ] Activate [ ] Inactivate
First last [email protected] meets all criteria - [ ] Activate [ ] Inactivate
First last [email protected] meets all criteria - [ ] Activate [ ] Inactivate
First last [email protected] meets all criteria - [ ] Activate [ ] Inactivate

Expected solution

Create Component
Create storybook story

Upcoming Windows Not Covered - Admin Component

Feature Description

Component for the top of the Volunteer Portal Admin Homepage with the heading "Upcoming windows not covered"
see image below:

Expected solution

Create vue component
Create storybook story

Guests should be able to mark their delivery profile as on-hold

When a guest wants to put their delivery profile on hold, they should be able to mark it on-hold.

Guests should be able to mark their delivery application as "on hold" if they are away or not able to accept deliveries.
function to change status to hold only if the user does this.
write to DeliveryHistory the status change

Implement this as a function, because we do not want guests to be able to write their DeliveryApplicationStatus document.

Fix dark/light mode selector

Describe the bug
color-modes.js file needs to move to vue.

To Reproduce
Steps to reproduce the behavior:

Go to homepage
Click on theme selector
Cannot change theme because js is broken.

Expected behavior
Switch themes when selecting a new theme.

Volunteer Portal - Mark yourself active when the window starts

Feature Description

When a volunteer brings up the app on their phone, if they are in a volunteer window they signed up for, they should have a banner message that has a call to action to "check in" they are doing the volunteer activity.

Expected solution

Regardless of the page they are on, they see a message like:

Check in for <TaskType> now?   [ Yes ] [ Dismiss ]

Testing

Volunteer Portal - Select a window/session you need to cancel

Feature Description

If a volunteer is signed up to cover a window/session, they need the ability to cancel. They can select the window either from their profile page or the volunteer calendar.
When they choose to cancel, a message is sent to the admins, either email and/or text message.

Expected solution

Testing

Volunteer Portal - Document running storybook

Feature Description

Add running storybook to the README.md

Hide menu on admin page if not logged in

Feature Description

The nav menu on the admin page should not be displayed if you are not logged in.

Expected solution

Testing

Volunteer Portal - Admin homepage

https://ncosd.github.io/food-pantry-app-prototype/volunteer/admin/homepage/

Volunteer Portal - Create/Update/Delete Locations

Feature Description

The time windows will have up to 4 different locations. Have the ability to Create locations, and use them on the #113 page to create volunteer windows.

Expected solution

Create a component to CRUD the locations components/LocationAdmin.vue

Data

Firestore

locations

Create a volunteer schedule

Feature Description

Admins can create a schedule for volunteers based on a date and time window.
Volunteers can apply to be a part of the date/time window, and the admin can approve the request.
On the volunteer profile page, the upcoming date/time windows approved will be listed, and future windows that can be applied to.

Expected solution

Testing

Volunteer Portal - Admin creates time windows

Feature Description

Admin users can create time windows that specify:

Date/time and duration of the volunteer window which is a contiguous block of time (e.g. 9am-5pm)
How many volunteers are needed to fill the window (2+, etc) (this is the ideal number of volunteers) unlimited after the target number

Expected solution

Use the vue-datepicker on the create page

The "+" button on the admin calendar goes to the create page

Testing

Volunteer Portal - Admins can send a window to a set of volunteers by message

Feature Description

If a cancellation happens, or there is an unclaimed window in the calendar, the admin can open the window and choose to "send to a list of volunteers".
The list of volunteers will be populated by the preferred times a volunteer has selected in their preferences
The message will go either by email and/or SMS/Text depending on the volunteers preferences
If a volunteer responds they will cover the window, the landing page should note that further volunteers are not needed. (Should we send a follow-up message that the window is covered? Seems like too many messages.)

Expected solution

Needs visual design

Testing

Volunteer Portal - Create Volunteer Registration

Feature Description

Create the volunteer form from the website. This registration is for a volunteer rather than a guest.

Create a delivery day function/record to track what deliveries were made

Feature Description

On a delivery day, a bag will be packed for a household. Once the delivery is made to a household, we want to record that the delivery has been made. This will let us reference the household, which has the number of people in it. These numbers can be added to a history record which can be aggregated into a report. The report is a separate issue [link here once created].

Expected solution

Create a function that can be invoked by a delivery team once the delivery is made. This should create a history record.

Testing

Only admins can invoke the function. Once invoked, the history record should have the number of people in the household recorded for that day.

Fix storybook - it isn't loading vuetify components or CSS

Describe the bug
storybook is not currently loading the vuetify components or css

Perhaps work through this to fix storybook https://github.com/nidkil/vuetify-with-storybook

To Reproduce
Steps to reproduce the behavior:

run npm storybook:serve in a terminal
go to http://localhost:5000 and look at a story

Expected behavior
component is missing vuetify components and css

Screenshots
If applicable, add screenshots to help explain your problem.

Remove vuetify in Guest app

Create a way for users to verify their email addresses

Feature Description

Decide if during the registration flow we want to make sure the user verifies their email address, or if we want to have a link from the user profile page.

Expected solution

Use https://firebase.google.com/docs/auth/web/manage-users#send_a_user_a_verification_email to send the verification email.

In the AppNavigation component, create an EmailVerified component which displays if the user is not verified. It should have a link to the user profile page, where they can click a link to have the verification email re-sent to them.

Testing

Add component for "delivery application state"

Once someone submits a delivery application, they should be able to return to the site to see the status of the application, if has been reviewed, accepted, or denied. This form will be where guests will be able to maintain their delivery information - so they should be able to return to this form and update information and be sure that it has been reviewed and accepted. This is important even after their application has been accepted.

Describe the solution you'd like
Need a component that lists:

date the form was submitted
date last updated
status; Submitted, in-review, accepted, denied, guest-action-needed, on-hold

Is in a separate collection, readable by admins and the submitter, writable only by admins

Note
There may be another collection that is readable, writable by admins only for them to keep notes as to why status has been set, and a history log that is only available to admins.

Depends on #9

Create change password form

Feature Description

Create a form to let a user change their password.

Expected solution

The link to change password should be on the user profile page. Use https://firebase.google.com/docs/auth/web/manage-users#set_a_users_password to change the password.

Testing

Volunteer Portal - Admin page to review a volunteer application

Feature Description

When a volunteer registers, their VolunteerProfileState is created with status in-review.
Create a page that displays the information for a single volunteer by id so the admin can change the status.
Status can be one of:

in-review
active
inactive

Set up a dev channel for testing PRs

Following https://github.com/marketplace/actions/deploy-to-firebase-hosting#options a dev channel can be created to set up PR's for testing.