chrishappy / smooth-shopping

Empowering Food Bank Clients with the Dignity of Choice

Smooth Shopping

Empowering Food Bank Clients with the Dignity of Choice

Smooth Shopping enables food banks to allow their clients to shop for goods online using an monthly credit system. In the backend, Smooth Shopping provides an inventory and order processing system.

Backend: Headless Drupal | Front end: a React app.

Developed in partnership with the House of Omeed during #HACKVAN2021.

Please contact one of the code maintainers to learn more about the project and how you can contribute.

Helpful Links:

• Project Summary (for October 2021 hackathon #HACKVAN2021)
• Figma Prototype and Case Study by Jenny Obrecht
• App Screenshots of the Frontend and the Backend

App Screenshots

Figure 1-2: The login (left) & home (right) pages on the frontend. See more frontend screenshots.

Figure 3: The product overview page on the backend. See more backend screenshots.

Usage Stories

Outlines the basic functionality of the app.

Family - Ordering Groceries

1. (Family receives a shopping credit that is topped up each month)
2. Family opens app on their computer or phone
3. Family scrolls through catalog and selects what they would like to buy
4. Family checks out & deducted from credit
5. Family arrives at the House of Omeed food bank
6. Family show staff an order number.
7. Family receives groceries

Staff - Receive Grocery Order

1. Staff receives a notification
2. Staff open dashboard with recent orders
3. Staff view and collect the requested groceries
4. When family is given the groceries, staff sets the order as complete

Admin - Creating Account for Family

1. Admin registers a new family on their desktop
2. Admin helps family install the app on their phone
3. Input user name and password to log in to family’s account

Staff - Creating or Updating Product

1. Staff opens backend app on their phone
2. Staff takes photos of product (replaces old photos if any)
3. Staff updates any information
4. Staff saves product

smooth-shopping's Issues

Transfer Reactive Variables to Apollo

Allow Staff to view and edit Orders in Backend

Enforce Credit Limit

Do not allow clients to spend more credit than they currently have

Backend: Allow Food Bank Admins to Generate Passwords Easily

Backend: Update quantities when an Order is created

Set up Orders in Backend

Frontend: Only show published products

Filter all the nodeQueries by:

    nodeQuery(filter: {
      conditions: [
        {operator: EQUAL, field: "status", value: ["1"]},
      ]}, limit: 30
    ) {

Backend: Allow products to be limited per customer (per month)

Frontend: Display old orders somewhere

Allow users to see a history of their old orders. So in case, they can't remember if they've ordered rice or something.

Ensure that the user credit is updated properly

Double-check that when an order is created/deleted, the user's credit is updated accordingly.

Enforce Product Quantity Limit

If there is only 1 of product X, only allow users to buy 1 of item X.

In case two people add an item to the cart, the first person to checkout out will receive the item.

Flush Cache after Creating an Order

We want to clear the product + user + order queries after creating an order.

Backend: Secure App by Switching to JSON:API

Easiest is probably just persisting all the queries and just calling them by ID (if apollo supports that).

Optional: Lazily show all elements (on main page) as users scroll down

Allow Clients to Checkout

Backend: Add simple rotate to the image upload fields

Authenticate Users

Connect an access code to each user.

• Allow clients to log in using their access code
• Allow clients to submit orders using their access code
• [Later] Import client information into app (how much credit, etc.)

Re-implement Add & Remove from Cart

• Create local Apollo variable to store cart items (product_id and quantity)
• Create Query to find products using product_id
• Update cart page with above Query

Frontend: Support pagination for node/taxonomy queries

Right now, only retrieves a max if 30 items. Recursively call query until no more items reached

Set up User Management Backend

typo in footer.js - class should be className

Hi @chrishappy and team, just ran the project in my VS code and browser and noticed that there's a "Warning: Invalid DOM property class. Did you mean className" in the footer.

I think the issue is in line 30 of footer.js.

class="footer-wrap"
should be
className="footer-wrap"

Tried the change on my local copy and it got rid of the warning.

Backend: Logic for Creating User Accounts

• Set Current Price to Monthly Credit field on the first of every month
• Disable Current Price
• Set Monthly Credit field to the number of family members * some number
• Generate passwords easily

Backend: Add New Fields to Users

• Address
• Phone Number

Let Kiana Add Fields

Frontend: Tweaks

• Show product descriptions when clicking on a product
• Show a message bar if added too many of a product
• Show snackbar if usernams/password is incorrect

Frontend: Validate the product quantities when creating an order

Since product quantities are not updated in real-time, it's possible that the quantities are invalid (e.g. a different client checked out some of the same items recently).

Thus, before we submit an order, we should check that the quantities are still valid.

Future: Implement Search