Inspiration

After trying out lots of expense-tracking apps during my time on Android and iOS, I found that none of them were as flexible, as portable and as simple to use as the good ol' spreadsheet. Over time, I developed certain conventions that work well for me, but editing a spreadsheet on mobile is still a horrible experience, so I wanted to build a better way.

What it does

Provides an easy-to-use mobile interface for entering expense items into a spreadsheet that you've already crafted.

How to use:

  1. Authenticate and authorize with your Google account.
  2. Enter the name of your spreadsheet in Google Drive.
  3. Fill in the details of your expense (these are based on your spreadsheet's columns) and submit!

It's easy to track your expenses when you can record them effortlessly. Since the app lives on the web, you'll have access to it no matter what platform you're on.

How I built it

This app was written in Javascript, HTML and CSS. The app talks to the Google Sheets API via Google's Javascript client libraries. I then generated an HTML form based on the columns that already exist in the spreadsheet. For the mobile-friendly layout, I used Spectre.css, which is also apparently pretty lightweight.

Challenges I ran into

  • The Google Sheets API only allows spreadsheets to be queried using a non-human-readable name, so I needed to locate it via the Google Drive API.
  • Finding a hosting service that wasn't overkill for serving a static page.
  • Styling the app so that it would render nicely on mobile screens.

Accomplishments that I'm proud of

  • Finally getting OAuth right.
  • Scratched an itch I've had for months.

What I learned

  • CDNs make writing minimal web app prototypes very convenient.
  • CSS is a lot of work.
  • You don't always need a framework for a front-end.

What's next for Budgetsimple

  • Create new spreadsheets locally and sync them to the cloud.
  • Sync to different cloud storage services.
  • Edit spreadsheet columns from the interface itself eg. reorder the columns, change header names, etc.
  • Mobile app. Maybe with React Native?

Built With

Share this project:
×

Updates