#18-online-offline-budget-tracker-pwa-indexedDB

Budget Tracker application allows for offline data capture, later synchronized with main MongoDB collection when internet access is resumed.

Github Repository Page: https://github.com/palowenstein/online-offline-budget-tracker-pwa-indexedDB

Heroku Deployment Page: https://pwa-off-online-budget-tracker.herokuapp.com/

Table of Contents

• GIF
• Overview
• Details
• Instructions
• Screenshots
• Video
• References
• License
• Contributions
• Contact

GIF

Fig. 1. Budget Tracker (MongoDB, Mongoose, Node, Express, Morgan) — Application Demo (GIF)

Overview

• The heroku accessible budget tracker enables the following actions:
  • Enter deposits offline.
  • Enter expenses offline.
  • Offline entries added to data collection when online (internet) access is resumed.

Details

• A .gitignore file is present at the root level to prevent the upload of node_modules, Macintosh .DS_Store files.
• For this application to run locally, MongoDB must be installed and running in the background as seen in the terminal screen capture below. The application will not run correctly without a valid MongoDB install.
• The end user must first execute the package.json file located in the root folder of the application. This can be done in Apple's Terminal via the npm install command and will install the required dependencies (express, mongoose schema, morgan middleware, lite-server) needed for the program to run.
• For the application to run in an heroku environment, a Procfile file with the startup instruction node server.js has been placed into the application folder.

Fig. 2. Background execution of MongoDB in Apple's Terminal. MongoDB is called via the mongo command.

Instructions

Local Execution

• Makes sure MongoDB is installed locally and running in the background as seen in Fig.2.
• In Terminal, locate the application's root directory and enter it via the cd command: cd online-offline-budget-tracker-pwa-indexedDB.
• Still in the root directory, run the npm install command to install the necessary node modules (mongoose, morgan, express, lite-server) from the package.json.
• In the same root directory, run the node server.js command to launch the application.
• This will launch the application which, in terminal, will indicate App running on port 4000!.
• You can now access the application in your browser by loading localhost:4000 from the address bar.
• When run initially, the budget tracker will be blank of any data.
• Enter transactions in the input fields (name / amount) then validate each either as a positive or negative transaction (add / remove funds).
• The x/y axis chart below will reflect the positive / negative transactions entered over time.

Offline / Online Execution

• Access the application on heroku: https://pwa-off-online-budget-tracker.herokuapp.com/
• The budget tracker will appear pre-filled with data from Fig. 1.
• Enter transactions in the input fields (name / amount) then validate each either as a positive or negative transaction (add / remove funds).
• The x/y axis chart below will reflect the positive / negative transactions entered over time.
• Without internet access, add more transactions to the budget tracker.
• With your internet access now back, refresh the page. This will send the previously offline data to the MongoDB collection which will now be updated with that new information.

Screenshots

Fig. 3. Budget Tracker loaded from Heroku. Pre-populated with data from Fig. 1

Fig. 4. MongoDB collection reflecting the data entered via the browser application in Fig. 1. (Robo 3T)

Video

References

• MongoDB + Mongoose (NoSQL).
• Node.js Javascript Library.
• Express for GET/POST/DELETE Requests between REST APIs.
• Morgan Middleware.
• Lite Server
• Package.JSON / NPM for installing dependencies.

License

MIT License | Copyright © [2021] Pierre André Lowenstein

Contributions

• Pull/Fork from master.
• Create your own branch.
• Add your own code (must be tested).
• Push your branch.
• Request a pull.

Please use the [Contributor Covenant Code of Conduct](https://www.contributor-covenant.org/version/2/0/code_of_conduct/code_of_conduct.md)

For major changes, please open an issue beforehand to discuss the changes.

Contact

[www] pierreandrelowenstein.com  |  [e-mail] Send me a 'courriel'