Virtual Food Bank: A Look Under the hood

This past summer, we took part in the first Wix's Corvid Hackathon: Physically Apart, Virtually Connected and won the first place with our app Virtual Food Bank.

This project allows food banks to grant virtual credit to people in need so they can shop online for essential goods for free. If you want more information about the project itself, I invite you to read our submission on Devpost or to give it a try yourself. In this article, I'm going to share with you how we build it and the lesson we learned along the way.

Wix Store, coupons & checkout

The project relies heavily on Wix Store. The app provides all the features we needed to complete our objectives

1. Built-in product management for the manager

2. Build-in e-store pages for consumer

3. Build-in discount management so beneficiaries can use coupons and checkout for free.

Setting up the project was pretty easy thanks to a Wix template as well as the stock photos that are available within the Editor. We quickly set up the website the store allowing us to focus on our core idea: the social credit.

Social Credit

From the business side, the social credits were to be granted to each user every week for 12 weeks. It should help beneficiaries buy food through our Store checkout and should be free if the cart's value is less than the social credit available to that user; thus the user should only pay the difference if the cart's value exceeds the available social credit.

First issue: usability

In order to benefit from a coupon, Wix requires that the user input their coupon code manually. The project is aimed at a large population with a wide range of IT skill and physical capacity, so having the least friction at checkout is essential.

Second Issue: coupons mechanisms

Wix's coupons system is designed to create sales for products. This means that when a coupon is applied at checkout, it affects the total of all products equally: If you have a -

-$ 30 coupon on 5 items you end up with a 150$ total discount! Which failed our goal to provide only $ 30 credits for the total of the cart

Wix store custom checkout

Luckily for us, Corvid API's team released a new feature to create orders. That allows us to create our own checkout page.

In combination with Wix Pay, we were able to create a transparent experience for the user where the social credits are embedded directly into the checkout process.

Virtual Food Bank custom checkout

Creating the Order

Here a simplified version of the order creation. This piece of code should be placed in the backend and not expose directly to your website (in a javascript web module) as product objects must come from your Wix-store database and beneficiaryId must come from the current Wix user.

import {getBeneficiary} from './beneficiary.jsw';
import {getSocialCreditForBeneficiary} from './socialCredit.jsw';

// a wrapper around wix-store-backend module
import {placeOrder} from './orderService';

//Create an order with products for a beneficiary
export async function createOrder(products, beneficiaryId) {
 const beneficiary = await getBeneficiary(beneficiaryId);
 const socialCredit = await getSocialCreditForBeneficiary(beneficiaryId)

 const options = {beneficiary: beneficiaryId};

//Computing the remaining cart cost after social credit usage
 const remainingCost = products.reduce((total, product) => {
  return total + product.price * product.quantity, 0) -           (socialCredit ? socialCredit.moneyOffAmount : 0)
  };
 
//Initialize a payment if social credit don't cover the cart's value. The payment's id is used by the frontend to collect the payment via wix-pay API once the order has been created
 if(remainingCost > 0) {
    const items =[
       {
          name: "Virtual food bank checkout",
          quanity: 1,
          price: remainingCost
        }
     ];

    const payment = await wixPayBackend.createPayment({
       items,
       amount: remainingCost,
       userInfo: {
          firstName: beneficiary.member.firstName, 
          lastName:beneficiary.member.lastName,
          email: beneficiary.member.loginEmail
       },
    });
       
    options.transactionId = payment.id;
 }

 return placeOrder(products, socialCredit, options)
}

Some other API and technology we used

- wix-coupons to manage all coupons

- wix-users to create custom users account

- mobX for state management

- Wix tasks scheduler to refill social credit automatically

We need your help

Now that we have a working prototype, we are looking for sponsors and food banks to partner with us in order to bring Virtual Food Bank to life, helping communities around the world. If you know of someone who could benefit from our work, please let us know or share the project.

I would like to take the opportunity to thank Kippy from kippyflur.com for helping to design the frontend interface and Robert from big spark creative for helping to design the backend dashboard.

Let us know in the comments if you have any question regarding the project or the code snippet