jakubgarfield/expenses

💰Expense tracker using Google Sheets 📉 as a storage written in React

💰Expenses is a progressive web application on top of Google Sheets 📉 written in React ⚛️. It is only a static HTML that works great on mobile 📱 and can be deployed anywhere.

Check out the demo but please be considerate and don't break it for others.

It was inspired by the expense-manager by mitul45 and it uses the material web components and material icons.

Features

• Multiple accounts
  • Checking, savings, joint, etc.
• Categories
• Google Sheet 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.
• Monthly summary
  • This month. Last month. You immediately know how you doing.

Get started

You will need a somewhat recent version of Node 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 works fine or you can use your own certificate.

1. make a copy of Expense Sheet 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=<replace with your 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.

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 newsletter 🗞. Subscribe to get the top 5 news from React community every week.

expenses's Issues

Client Id Issue

Client id only works on localhost:8080

It won't work in localhost default static port 5000 or any other domain. Please provide steps to create new client id. I guess I need to submit for verification to access sheets api

getting error

cb=gapi.loaded_0:82 Uncaught Object
{
  error: "idpiframe_initialization_failed",
  details: "Failed to read the 'localStorage' property from 'Window': Access is denied for this document."
}
(anonymous) @ cb=gapi.loaded_0:82

what can be wrong?

Stuck with loading page

1. created a copy of google sheet (different name)
2. ran the following command

npm i && REACT_APP_SHEET_ID=<replace with your sheet id> npm run build

3. copied the build contents to my nginx path (under html/*)
4. End up with LOADING page
   

Not working after signin

http://imgur.com/a/vpaBA
Please look at this link there has been an error after the singin

Add Google Charts for monthly summary

https://developers.google.com/chart/interactive/docs/quick_start

seems not able to login demo site

Sign in with Google temporarily disabled for this app

More info:
mitul45/expense-manager#18

Inquiry Regarding Deprecated Google Authentication Library

Hi @jakubgarfield,

I came across your public GitHub repository, and I noticed that the code, last updated five or six years ago, is currently encountering an error related to the use of deprecated Google Sign-In JavaScript libraries.

You have created a new client application that uses libraries for user authentication or authorization that are deprecated. New clients must use the new libraries instead. See the Migration Guide for more information.

The console output suggests migrating to newer authentication and authorization methods, as outlined in the Migration Guide. Given the recent changes by Google, the existing code may not be functioning as expected.

I'm reaching out to inquire if you have any plans to address this deprecation and update the authentication libraries in your project.

Stuck on OAuth screen when logging in from the PWA

When I log in through the PWA app the app opens the OAuth login screen in a new app window. I select my account and see a loading indicator but it never returns to the PWA. It just keeps loading forever. When I log in through the browser it works perfectly fine.

I quickly looked into this but couldn't find a fix.
I'm serving this over HTTPS with AWS CloudFront / S3

can you introduce income tab to make this app complete

can you introduce income tab to make this app complete as we have to open sheet to add income in it which is not cool

Get unable to parse range Current!H1 error

Hi,

When I setup this web application and run it, I get unable to parse the range Current!H1 error. I add two tabs "Current" and "Previous" to fix this issue. Not sure this is really an issue or something I setup wrong. Please take a look at it.

Thanks

Is this app working

Is this app working fine? How to login?

Google API setup

Can you add the "getting started" steps to create the required Google API/Client ID with the correct scopes?

Domain Name has Expired

I just discovered that the domain name (demo-expenses.net) has expired and has not been renewed.

Add evidences to expense/income

Are you intending to add this feature where we can upload image or take picture of certain phisical documents such as expenses, payroll etc.?

Sign-in error

[Error] Failed to load resource: the server responded with a status of 400 (HTTP/2.0 400) (values:batchGet, line 0)
[Error] [object Object]
	(anonymous function) (cb=gapi.loaded_0:75)