A budget tracking web application that utilizes PWA (Progressive Web Application) frameworks to successfully store and track financial transactions during offline and online scenarios.
- No installation is required, as the user can simply visit the deployed application link: https://pwa-budget-2020.herokuapp.com/
- However, if the user wishes to investigate the code locally, the following steps should be performed:
- Clone the repo for use on your local machine
- Use the command line to locate the cloned repo and make it your current directory
- Type
npm installin the command line - This will install the necessary node module packages and dependencies
- Under the assumption that the user has MongoDB previously installed and/or running, no further installation is required
- To run the application locally...
- Use the command line to locate the cloned repo and make it your current directory
- Simply type
node server.jsin the command line - Executed correctly, the command line should respond with
Server listening on http://localhost:#### - Open your preferred browswer and visit
http://localhost:####/ - In both instances above, replace
####with the corresponding PORT number as noted in the server.js file - To end the server instance, simply type "ctrl" + "c"
- To run the application online, please visit the deployed link: https://pwa-budget-2020.herokuapp.com/
- Application functionality is identical whether you are running the server locally or visiting the deployed link:
- After arriving at the landing page, users will see the following:
- A ledger of previous transactions (recalled from a Mongo database)
- A graph documenting the trend/progression of these previous transactions
- Users can then enter additional transactions – adding or subtracting funds – which are posted to the database
- In the event that online connectivity is interrupted, users can still proceed to enter transactions
- During offline status, the transactions are stored with IndexedDB, a "low-level API for client-side storage of significant amounts of structured data"
- Once online status is returned, any offline transactions are posted to the database and cleared from IndexedDB, and normal online functionality resumes
- After arriving at the landing page, users will see the following:
To test offline functionality – and ensure that data collected, stored in IndexedDB, and then subsequently posted when online functionality returns – please take the following steps:
- Take the application offline (e.g. utilize Service Workers)
- Post an offline transaction (e.g. add or subtract funds)
- Confirm that the data has been stored in IndexedDB
- Take the application back online and post an online transaction (e.g. add or subtract funds)
- Confirm that the offline AND online transactions have been posted in your MongoDB
License: MIT License
https://opensource.org/licenses/MIT
https://github.com/JPBrickhouse
This was an informative homework assignment, that afforded many opportunites for learning and growth. While the majority of the initial code was provided – allowing for consistent online functionality – I was required to create and write code for the following files to implement the PWA offline functionality:
public/db.jspublic/manifest.webmanifestpublic/service-worker.js
Beyond that, the following files also required additional modifications:
public/index.htmlpublic/index.jsserver.js
With everything in place, I "connected the dots," ensuring that the budget tracker worked accurately during offline and online scenarios.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent