Build your own Expensify — Snap a photo of a receipt to automate your expense reporting

Build your own Mobile App for receipt scanner that allows you to snap a photo of your receipt and automatically captures all the details in an expense report that you can export in excel format for your CPA or for the HR team to get a refund.

Share This Post

Build your own Mobile App for receipt scanner that allows you to snap a photo of your receipt and automatically captures all the details in an expense report that you can export in excel format for your CPA or for the HR team to get a refund. 

Let’s say you are a Freelancer or a Sales Rep, this product is for you! With this product, you will automate your preaccounting system with an easy to use expense tracking mobile and web app.

Mobile App to collect your expenses receipts

 

Mobile App to collect your expenses receipts — Built on Bubble

Use Case: 

  1. For Freelancers

Freelancers needs to keep track of all their expenses and to submit to their CPA once a year an excel file with the list of all the expenses, receipts, amounts. The goal is to be able to deducts these expenses from the yearly income statement.

2. For Sales Reps

When Sales Reps are travelling, they need to keep track of the expenses in order to get reimbursed by their company. To do so, they need to provide the HR or the finance team with the receipts and the amount, the date etc. 

Ready? So let’s build it

 

Main Features

As a user

  •  I need to be able to take a picture directly from my mobile app or to upload a document of my receipt. 
  • Extract the following information from my receipt: Amount, Supplier name, Date, Tax, Tax Rate, Picture of the receipt
  • Export all the receipt’s information to excel 

To build this product, I will use for the front end Bubble.io and for the back end Mindee. Bubble is a no code web app builder and Mindee is an API that can turn any document into structured data. 

 

The Back End

Go on https://mindee.com/ and create a Free Trial account. You can use their out of the box Expense Receipt document recognition. 

You can go in the section Live Interface to test their product with your own documents

You can simply add a new document or use your camera. 

Then go in the API Keys section and create a new API Key.

 

Create a new API Key and Save it to use it in Bubble

You will need your API key to connect your back end with your front end in the next step.

Now let’s go in Bubble and set up our backend flow.

First, create a new data type of type Receipts and set up the following fields as showed in the screenshot. 

Next, let’s set up the API call to extract the data from the receipts

 

How to set up the API Call in Bubble

You can set up your API Call as showed in the screenshot. It’s a POST call as you are going to send a document to the Mindee’s API. Don’t forget to set up the authorization API Key in the Header. In the parameter we will upload the document from the front end. 

Once it’s done click on Initialize the Call. If everything has been set up correctly, you should see the data of the document you uploaded in the parameter. 

The Front End

When clicking on the button New Invoice we are going to show a pop up. From the pop up you will be able to upload your receipt document or to take a picture. 

 

Flow to upload a document with a popup

When the user will click on the button Submit my expense it should trigger the following workflow. 

 

Create a new thing of type Receipts

You are going to create a new thing of type receipt with the following fields. These fields will come from the data received back from Mindee’s API 

 

Get data from API

The file uploaded will come from the file uploader of the popup form. 

The next thing we are going to set up is a table to display the receipts. This is a repeating group in Bubble

 

Create a table from a repeating group in Bubble

And here is the result when it’s populated with Data

 

Repeating group populated with Data

The final step is to set up our export to excel button. Set up a workflow when a user click on the Export button to Download data as CSV. Here you can set up the settings of your export as it suits you.

And that’s it! You just created your own Expensify for free and totally customizable. 

I hope you liked it and found it interesting. Feel free to reach out and share your feedback.

Subscribe To Our Newsletter

Get updates and don't miss our Products recipes

More To Explore

FOLLOW US

Join our community of product builder

SUBSCRIBE TO OUR NEWSLETTER

Subscribe to our newsletter to be informed of the latest product updates

Built with ❤️  and with Elementor

bg-01-free-img

LET'S TALK

Feel free to share with me your feedback or your product ideas!