PWA (Progressive web apps): Online/Offline Budget Trackers

Click here to open site:

• Introduction
• User Story
• Acceptance Criteria
• Installation
• Screenshots
• Dependencies & Technologies
• Resource
• Author
• Questions

The budget tracker app allows the user to add expenses and deposits to their budget with or without an internet connection. When entering transactions offline, they should populate the total when brought back online. This application uses IndexDB, Service workers, and Web Manifest for offline functionality and is deployed on Heroku.

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

GIVEN a user is on Budget App without an internet connection
WHEN the user inputs a withdrawal or deposit
THEN that will be shown on the page, and added to their transaction history when their connection is back online.

Install the packages/dependencies by hitting following command on your terminal console:

npm i
npm init
npm i express
npm i morgan
npm i mongoose
npm install --save
npm i compression

Budget Tracker App:

Manifest

• YouTube Video: DemoVideo

 "dependencies": {
    "compression": "^1.7.4",
    "express": "^4.17.1",
    "mongoose": "^5.13.2",
    "morgan": "^1.10.0",
    "nodemon": "^2.0.9"
  },
  "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.7.2"
  }
}

• PWAs
• Measure performance with the RAIL model
• IndexedDB
• Webmanifest
• Google Offline Cookbook
• Google Lighthouse
• Audit the Performance of Your Web Application
• Set Up MongoDB Atlas
• Deploy with Heroku and MongoDB Atlas

Written by Tatyana Yarushin student in full stack web development in the Coding Bootcamp course at Carleton University

I hope you found something interesting! 📜

❓ For any additional information or questions find me at:

• Email: [email protected]

• Github: TatyanaYarush