Simple Expense Tracker

| | |

Features

• Made with Svelte
• Installable PWA with service worker
• Responsive layout for mobile and desktop
• Firestore to store expense entries
• Firebase Storage for image attachments
• Ability to add current location as a description tag
• Firebase authentication using Google sign in
• Dark mode

Getting started

Create your own Firebase project following the instructions here.

Copy your own Firebase config object

var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id",
};

and replace it here.

Make sure Node.js is installed. Clone the repo and

npm install

Start by

npm run dev

and go to localhost:5000.

Build for production using

npm run build

and serve the dist folder.

Details

Service Worker

Workbox is set up to automatically generate the service worker file in the dist folder using the rollup-plugin-workbox plugin.

Note that we are using the Rollup bundler hence the relevant docs are here. The rollup-plugin-workbox plugin can be configured in rollup.config.js.

Now integration

The Now hosting service is a convenient way to host the app. You can use theire built-in integrations with Git to automatically stage your app with each push to your repo.

Changing app bar color in Android

Most of us would know that we can control the app bar color using the <meta name="theme-color"/> element attribute. However, what if the user can switch color themes and you want the app bar color to change dynamically?

Since I don't see this mentioned much, here is a little trick courtesy of Gordon Lesti.

Basically you can programatically update change theme-color

const metaTheme = document.querySelector("meta[name=theme-color]");
metaTheme.setAttribute("content", "#fdfdfd");

and Android will update your app bar color on the fly.

Maskable icon in Android

There is support for maskable icons for PWAs installed on Android devices. In your dist/manifest.json you can specify the maskable icon using "purpose": "maskable". Ensure that your icon design has sufficient gutter space so that your logo isn't cut off.

{
  ...
  "icons": [
    ...
    {
      "src": "/assets/maskable_icon.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
}

More details here.

Cypress testing

Currently there are no tests written but Cypress is built in if required.

License

MIT