PWA-Budget-Tracker

Description

The user will be able to add expenses and deposits to their budget with or without a connection. When entering transactions offline, they should populate the total when brought back online.

Offline Functionality:

  • Enter deposits offline

  • Enter expenses offline

When brought back online:

  • Offline entries should be added to tracker.

Technology used

  • HTML
  • CSS
  • JavaScript
  • MongoDB
  • Mongoose
  • Express.js
  • Heroku

Deployment

Budget-Tracker deployed site

pwa-budget-tracker

Contact Info

please contact me at brandonjavillo@gmail.com

User Story

AS AN avid traveller I WANT to be able to track my withdrawals and deposits with or without a data/internet connection SO THAT my account balance is accurate when I am traveling

Process

When a User opens the budget tracker, the browser will display A total amount of the budget you are working with. A User can add or subtract from the total. The transactions that are made are saved to a list, the transactions are also graphed and tracked by date.

  • Total amount

    • amount will start at 0 until a transaction is added
    • example: paycheck ($5000) + Add Funds
  • Add & Subtract transactions

    • add a name of your transaction
    • include the amount of the transaction
  • Transaction List and graph

    • transactions are added to a list to track for future budgeting etc.
    • graph displays and shows analysis saved per day transaction was added
  • Dev tools

    • user can open browser dev tools and see that application has:
      • working service worker
      • IndexedDB is created
      • cookies
      • Cache Storage created for static and data cache
        • when going offline cache saves until going back online and updating on refresh