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.
Use Case:
- 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.
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
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.
When the user will click on the button Submit my expense it should trigger the following workflow.
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
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
And here is the result when it’s 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.
