https://github.com/jakubgarfield/expenses
💰Expense tracker using Google Sheets 📉 as a storage written in React
https://github.com/jakubgarfield/expenses
expense-manager expense-tracker expenses google-api google-sheets material-design material-ui progressive-web-app react react-components reactjs service-worker
Last synced: 14 days ago
JSON representation
💰Expense tracker using Google Sheets 📉 as a storage written in React
- Host: GitHub
- URL: https://github.com/jakubgarfield/expenses
- Owner: jakubgarfield
- License: mit
- Created: 2017-06-06T04:53:58.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-23T13:42:22.000Z (about 1 year ago)
- Last Synced: 2025-04-01T12:06:29.001Z (21 days ago)
- Topics: expense-manager, expense-tracker, expenses, google-api, google-sheets, material-design, material-ui, progressive-web-app, react, react-components, reactjs, service-worker
- Language: JavaScript
- Homepage: https://demo-expenses.chodounsky.net/
- Size: 6.91 MB
- Stars: 1,246
- Watchers: 32
- Forks: 179
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
💰Expenses is a [progressive web application](https://developers.google.com/web/progressive-web-apps/) on top of [Google Sheets](https://developers.google.com/sheets/) 📉 written in [React](https://facebook.github.io/react/) ⚛️. It is only a static HTML that works great on mobile 📱 and can be deployed anywhere.
Check out the [demo](https://demo-expenses.chodounsky.net) but please be considerate and don't break it for others.
It was inspired by the [expense-manager](https://github.com/mitul45/expense-manager) by mitul45 and it uses the [material web components](https://material.io/components/) and [material icons](https://material.io/icons/).
## Features
* Multiple accounts
* Checking, savings, joint, etc.
* Categories
* [Google Sheet](https://docs.google.com/spreadsheets/d/1Lz1_gHIgCKPKhJpFerq9PoNy-TIst7eLZ5plQi5Prv0/edit?usp=sharing) as a backend
* Great privacy and access control.
* Don't share sensitive data with 3rd party.
* Unlimited analysis up to your sheet skill.
* Works great on mobile
* Progressive Web App. Loads quickly and works as a standalone app.
* Beautiful material design
* Better than native ;)
* Recurring expenses
* Totally doable with [Zapier](http://zapier.com/).
* Monthly summary
* This month. Last month. You immediately know how you doing.
## Get started
You will need a somewhat recent version of [Node](https://nodejs.org/en/) and a place to deploy static HTML under a custom domain (doesn't have to be top level). To get the full offline support with service workers you'll need HTTPS – [CloudFlare](cloudflare.com) works fine or you can use your own certificate.
1) make a copy of [Expense Sheet](https://docs.google.com/spreadsheets/d/1Lz1_gHIgCKPKhJpFerq9PoNy-TIst7eLZ5plQi5Prv0/edit?usp=sharing) to your drive `File -> Make a copy...`
2) note the id of your new sheet (it's part of the URL)
3) clone, install dependencies and build the app:
```
npm i && REACT_APP_SHEET_ID= npm run build
```
4) copy the content of `build` folder to your server
### Recurring Expenses
Zapier is a service for connecting apps and automating your workflows. And it can be used to add recurring expenses with the [Google Sheets Integrations](https://zapier.com/zapbook/google-sheets/).
Select a trigger – it could be every month, week, or based on anything else.
Use the `Create Spreadsheet Row` integration and select your expense sheet and fill it with the desired values. Easy.
### Sharing
Adding another person (for example your partner) to the app is easy – you just give them access to the expense sheet in Google Sheets.
After that, they have the same access as you are and can add expenses through the same URL.
---
If you like this project – you might also enjoy [React Digest](https://reactdigest.net/) newsletter 🗞. Subscribe to get the top 5 news from React community every week.