Break It Up

Break It Up is an easy way to track and split finances with another person. After users link accounts, they can log information about charges, upload associated images (stored on Amazon S3), and pay each other back using Venmo, Square Cash, or in person cash/check. Users can also upload a picture of their receipt (or take a picture on the fly on mobile devices), select the total, and process the image (using Tesseract-OCR) to default the total onto the charge form. Break It Up is optimized for mobile.

Built by Becca Powell as part of her Hackbright Final Project

Technology Stack

Backend

Python, Flask, Jinja, PostgreSQL, SQLAlchemy, AJAX, Amazon S3 API/Boto, Venmo API, Tesseract-OCR/PyTesseract, Pillow (fork of Python Imaging Library), Mixpanel

Frontend

Javascript, jQuery, C3.js, Bootstrap, HTML5, CSS3

Tesseract Receipt Image Processing

Users can add charges by either selecting the "CHARGE" or "RECEIPT" buttons. If they choose the latter, they can upload a picture of a receipt or take a picture on the fly, crop the "total amount" using Jcrop, and preview and process the image. Alt Text

I copied the Jcrop div onto an HTML5 canvas, base64-encoded the canvas, and sent the selection to the server. Then, I decoded and sharpened the image, processed it using Python-Tesseract, verified it was a decimal value, and returned it on a charge form.

Some images were too large too be previewed and Jcropped on all devices (especially mobile), so I used the following Javascript to resize the image and the Jcrop utility (note: "preview2" is hidden using CSS):

$(document).on('change','#new-receipt', function(){
    displayImage(this);
});
function displayImage(input) {
    if (input.files && input.files[0]){
        var readImage = new FileReader();
        readImage.readAsDataURL(input.files[0]);
        readImage.onloadend = function(e) {
            var imgdisplay = new Image();
            imgdisplay.src = e.target.result;
            imgdisplay.onload = function(c) {
                var orig_h = this.height;
                var orig_w = this.width;
                var canvas = document.getElementById("preview2");
                var context = canvas.getContext('2d');
                canvas.width=300;
                canvas.height=300*(orig_h/orig_w);
                context.drawImage(imgdisplay,0,0,300,300*(orig_h/orig_w));
                transformed = canvas.toDataURL("image/jpeg",1.0);
                $('#receipt-display').attr('src', transformed);
            }     
        }
    }
 };

Recommendation: If taking a picture of a receipt using an iPhone, make sure it is a landscape picture. See Next Steps.

Charge Entry and Organization

Groups

Users can organize charges by adding Groups (using the "GROUP" button). Groups expand to show basic information about charges. Groups can be deleted by clicking on the "x" on the far right hand side of the panel. Deleting a group does not delete the charges in the group.

image

Charges

Users can add and edit charges to Break It Up. Users can specify the amount paid and how it should be split between the two individuals; the total amount, percent split, and total split input fields update each other using jQuery. Any images that may be good to track (e.g. receipts, photos) can be uploaded and saved on Amazon S3 (using a hashed name).

Charges may also be tagged with any of the Groups that have been created (including multiple). Users must proactively create groups with which they want to tag their charges. This feature uses Tag Manager and Typeahead.

image

Payments

Users can pay one another back using Venmo, Square, or in person (cash/check). After verifying the transaction, the payment is logged in the "All Charges" group.

Venmo

Users can authorize Break It Up to make payments using Venmo. After authorizing Break It Up, the page redirects back to the Chargeboard. The "VENMO" button now shows up instead of the "Authorize Venmo" button. The Venmo modal pulls in the user's partner's email address in the system as well as the amount entered, which are used to send the payment via Venmo. The user can change/add the email address, amount, and (private) note in the modal. If the payment is successfully completed, a green NotifyBar pops up at the bottom of the screen, and a payment is logged in "All Charges" (including the payment ID).

image

Square

The Square Connect API is only for merchants, so Break It Up uses Square Cash with Email. When a user selects the "SQUARE" button, a mailto link opens in a new tab (requiring a user to be signed into their email), and a modal verifies that the user sent the Square email. This payment is logged in "All Charges."

c3.js Visualizations

These c3 gauges make it easy to see what percentage of the time and how much out of the total the user pays. The gauges change color depending on how far the numbers stray from ~50%. image

Linking Accounts

Users must link accounts in order to use the application to track expenses and payments. Both users must input each other's email addresses to start tracking expenses. See Next Steps. image

Mixpanel Integration

Break It Up tracks how often users click on different payment methods and submit the respective modals.

Setup

  • Clone or fork this repo:

    https://github.com/bpownow/BreakItUp.git
    
  • Create and activate a virtual environment inside your project directory:

    virtualenv env
    source env/bin/activate
    
  • Install requirements.txt:

    pip install -r requirements.txt
    
  • Set up a .env file. You will need Venmo and AWS S3 developer accounts.

    SECRET_KEY=YOUR_SECRET_ID_HERE
    SQLALCHEMY_DATABASE_URI=postgresql+psycopg2://YOUR_USER_NAME@localhost/YOUR_FILE_DIRECTORY
    CONSUMER_SECRET=YOUR_VENMO_CONSUMER_SECRET
    CONSUMER_ID=YOUR_VENMO_CONSUMER_ID
    AWS_ACCESS_KEY=YOUR_AMAZON_S3_ACCESS_KEY
    AWS_SECRET_KEY=YOUR_AMAZON_S3_SECRET_KEY
    AWS_BUCKET=YOUR_AMAZON_S3_BUCKET
    
  • Set up Foreman to source .env.

  • Run Postgres server in a separate shell window. If you don't have Postgres, check out Postgres.app.

  • Create the database in Postgres

    CREATE DATABASE biu;
    
  • Back in your virtual environment, run the following to set up the tables in your Postgres database:

    foreman run python -i model.py
    db.create_all()
    
  • Run the app:

    foreman run python server.py
    
  • Navigate to localhost:5000 on your browser.

  • If you want to test out the mobile version, download and unzip ngrok. For example, when I downloaded ngrok, it went to my Downloads folder. I used the following to unzip it:

    unzip ../../Downloads/ngrok_2.0.17_darwin_amd64.zip
    
  • To start ngrok, use ./ngrok http 5000. Visit the Forwarding link on your phone's browser.

Next Steps

  1. Use Open Exchange Rates API to add point-in-time currency conversion based on transaction date. May use PyExchangeRates wrapper.
  2. Add a charge-specific chat or notes feature to discuss charges.
  3. Find correct image orientation when displaying receipt images on non-desktop devices. See this.
  4. Allow users to link to multiple other users and groups (many-to-many).
  5. Include more Mixpanel events.
Share this project:
×

Updates