Budget Tracker is a progressive web application that allows the user to add and subtract funds onile or offline. Additionally, the application allows the user to visualize a graph of their total spendings in a day over a period of time.
This project enabled me to gain a better understadning of looking at pre-existing code and analyzing where the connections need to be made in order for it to make it a progressive web applciation.Through this program I learned to work in IndexedDB as well as the use of Manifest, Service Worker, and CacheAPI.
- Description
- Technologies
- Application
- Demonstration
- Installation
- Instructions
- Acknowledgements
- Questions
- JavaScript
- Bootstrap
- Web app manifests
- Service Worker
- IndexedDB
- Node.js
- npm
- HTML
- CSS
- MongoDB
- Mongoose
- Heroku
- Express
The following installations are needed for this package:
- npm init
- npm i
- npm install node
Once in the correct directory (server.js), run "node server.js"
These are instructins & tips for anyone who wants to build this app or a similar app as practice:
- Using MongoDB
- Make sure to start MongoDB in your terminal prior to running the application
- Using Web app manifests
Web app manifests are part of a collection of web technologies called progressive web apps (PWAs), which are websites that can be installed to a device’s homescreen without an app store. Unlike regular web apps with simple homescreen links or bookmarks, PWAs can be downloaded in advance and can work offline, as well as use regular Web APIs. The web app manifest provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app.
- Create a manifest.webmanifest in a public folder and populate it with information about your images
- Add a link to index.html ()
- If you have seed data run the following, npm init > npm run seed > npm start
- Using Service Worker
A service worker (similar to AppCache) is a script that your broswer runs in the background, separate from a web page, and allows for a user to use their application offline.
- Create a service-worker.js file in the public folder.
- Copy and analyze the code I have in my service-worker.js file
- Using IndexedDB
IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs.
- Create a db.js file in the public folder
- Copy and analyze the code I have in my db.js file
- UW Coding Bootcamp instructional team and classmates
- test files already provided
- skeleton of html files already provided
- htmlRenderer.js already provided
- Bootstrap
If you have any questions, please contact me on: GitHub at avaarm Email at Emma