bkaathi / onbudget Goto Github PK

This project was heavily influenced by the amazing work done by Lana Noda and is also a budgeting tool hence why the name is similar. The main difference is that, it's being hosted on a digitalocean server for the static content and Google Firebase for all of the database and authentication logic. You can absolutely self host this (I will describe that later, however) it's currently accessible at onbudget.app.

I was using Lana's app ontrack for a couple of months and fell in love with it, but I'm not a ruby developer and I found the process of development within that project a bit challenging and so I decided to build my own version with all the features I wanted.

• Features
  • Dashboard
  • User Account
  • Request Access
  • Forgot Password
  • Loading States
  • Importing CSVs
  • Add Transaction
  • Add Category
  • Edit Category
• Running Locally
  • Prerequisites
  • Local Development
• Available Scripts
• Dependencies

Currently, the dashboard is an overview of the current month, it gives you how much in bills and expenses you have spent, how much total revenue is coming into your account, breaksdown the monthly spending by category and gives a look back of the last year of spending in a stacked graph.

Signing in allows multiple users to use this on the same machine

Requesting Access is a temporary feature for me to see how much I (dis)like firebase usage

Allows the user to receive an email from firebase if you forgot your password

Sometimes the app is slow, this is just some consistent loading states for the application

Since this app does not make any requests to your actual bank, this allows you to import a statement you can download from you bank account

A simple modal to quickly add an individual expense/transaction

Another modal to create categories for your spending

• Node and npm installed on your machine
• A Firebase project setup in order to get the configuration
• A Firebase billable account in order to deploy functions
• Initialization of firebase cloud firestore and functions

Once you have all of that in place, place your firebase configuration into the appropriate .env file so that it can be used by the application

Given the commands within the package.json you can do one of two things 1. npm start Run locally and point to the firebase production instance 2. npm run start:emulate Run locally and point to the firebase local emulator you have set up

Run locally and point to the firebase production instance

Run locally and point to the firebase local emulator you have set up

Builds the app for production to the build folder. The build is minified and the filenames include the hashes.

Ejects the CRA application in order for you to have access to the webpack instance for further customization

Spins up a fresh firebase emulator for local development without any saved data TODO: Add concurrently in order to put start:emulate and firebase together

Takes the functions folder and uploads them to firebase functions

Spins up a firebase emulator with any previously stored data

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Runs all unit tests in watch mode for file changes

Runs all unit tests and generates a coverage report

ex: npm run create-component -- -c Test A script that creates a component with appropriate scaffolding for scss files, tests and the component

If solving a sentry bug, include the issue # within the commit