My girlfriend and I use the Splitwise app to keep track of all our shared expenses. Since we pay with a shared account we don't actually use the "splitting" feature in splitwise and it takes a ton of clicks in the app to say you paid for equal shares of something. We also only use 4 main categories for our expenses.
I built this basic Vue.js app to simplify our expense tracking given the above.
It's a single form that sends a POST request to the Splitwise API. The front end takes care of the logic that we would have to do numerous clicks in the Splitwise app to accomplish since we pay with a shared card and don't actually need to split the expenses.
To communicate with the Splitwise API securely I used the available OAuth2 authentication. I used Pizzly to handle the complexity of OAuth2 so I didn't have to do it myself. I configured and hosted a Pizzly instance of my own on Heroku, after adding Splitwise as a supported integration in a PR.
This was my first foray into Vue.js, which helped me learn for my work on DigitalHumani's new dashboard. I used vue-material as my UI kit.
cp .example.env.development .env.development
cp .example.env.development .env.production
VUE_APP_PIZZLY_URL=
- URL of my Pizzly instance on Heroku
cp .example.env .env
DESTINATION_GIT_URL=
SOURCE_DEPLOYMENT_DIRECTORY='dist'
DESTINATION_GIT_BRANCH='gh-pages'
- Customized setup for gh-pages to push to my rented web server
This command builds the Vue.js app for production and then uses the gh-pages library to push the /dist directory to the web server I use for my personal website and projects (for environmental purposes). This could easily be hosted on GitHub pages without additional configuration for the gh-pages plugin.
npm run deploy
npm install
npm run serve
npm run build
npm run lint
- Add formatting for different amounts (negative/etc)
- Refactor into components?
- Make pretty dial like DigitalHumani?