Skip to content

Latest commit

 

History

History
105 lines (80 loc) · 2.75 KB

README.md

File metadata and controls

105 lines (80 loc) · 2.75 KB

Screenshot

Better Change

In person cashless donations.

Enabling contactless charity donations without a card reader

The vision

  • We live in an increasingly cashless society. Fewer people carry loose change.
  • Card readers cost £25–100 each and are expensive to distribute and manage.
  • Charity fundraisers and others who rely on cash donations are losing out.
  • Better Change solves this problem by enabling people to receive contactless payments without a card reader.

Installation and set up

Clone the project and run npm install

Create your own local PostreSQL database instance and create the tables by running pgweb navigating to localhost:8081 and running the query in the database.sql file.

Create a .env file with the following variables

DB_HOST=localhost
DB_NAME=
DB_USERNAME=
DB_PASSWORD=
TWILIO_SID_TEST=
TWILIO_AUTH_TEST=
TWILIO_SID_LIVE=
TWILIO_AUTH_LIVE=
S3_REGION=
S3_BUCKET=
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
STRIPE_SECRET_KEY=

Run npm start to launch the app and navigate to localhost:8080

API Keys needed:

  • Amazon S3
  • Stripe
  • Twilio

Tech stack

Front end

  • React
  • Redux
  • React Router
  • Handlebars
  • SCSS

Back end

  • Node.js
  • Express
  • PostreSQL

Build tools

  • Webpack
  • Babel

Unit Testing

  • Jest
  • Enzyme

Features

QR code

  • 'qrcode' node package creates the QR code dynamically
  • The QR code isn't reliant on a 3rd party API
  • The QR code size, style and error correction level are customisable

'qrcode' node package

Card and native payment - Stripe elements

  • Stripe Elements API provides our secure hosting

'Stripe elements' node package

Image hosting - Amazon S3

  • We used the AWS-SDK node package to host images
  • Enabled us to upload / download images to an S3 bucket

Aws-sdk node package

Form validation - Formik

  • Formik node package managed the form validation
  • Solved the problem of getting values in and out of form state
  • Streamlined handling error messages and form submission

Formik node package

Data visulisations - Recharts.js

'Recharts' node package

Authorisation and authentication - Passport

Next Steps

  • Create React Native app
  • Emit bluetooth urls
  • Pay out to bank accounts

QR codes are not always the best solution for in person payment because they require you to be in close proximity to capture with a camera.

We have started playing around with Bluetooth beacons and have used an android phone to emit our unique payment urls for people to pick up in the immediate area.