Period Tracker

Live demo https://electricg.github.io/period-tracker/

Why

• I wanted to play with some of the cool new browser API (service workers, add to home screen, background sync, etc...)
• I wanted a light app that does exactly what I need with only a couple of tap
• I wanted the data to be easy to backup and retrieve

Features

• Work offline using service worker more info
• Add to Home screen more info
• Export to and import from file
• Share data to other apps

TODO

• [x] service worker - work offline
• [ ] when during event, different homescreen
• [x] implement edit entry UI functionality
• [x] add share to app functionality
• [x] add export data as text to app functionality
• [x] better sw (with the "new update, refresh")
• [x] show export data functionality only if supported
• [ ] verify how the storage works with the shared sub domain
• [x] use tag
• [ ] add legend to calendar
• [x] add navigation by year, and back to today, in calendar
• [ ] dark mode
• [x] update moment library
• [x] custom splash screen
• [x] manifest doesn't have a maskable icon
• [ ] add functionality to clear/update sw cache from the app ui
• [x] bug when I'm at day 0 and it doesn't show as future
• [ ] try web components
• [ ] import data from other apps
  • [ ] app that I use
• [ ] use more modern css
• [ ] show fertility and ovulation days
• [ ] add swipe left and right in the calendar page to navigate prev/next months
• [ ] add tests
• [ ] replace svg icons in log with emojis
• [ ] add the auto patch versioning on commit
• [ ] add the github action workflow

Dev notes

Local dev

Run either python -m http.server 8080 or http-server (see below).

package.json is only for eslint.

HTTPS in local dev

From https://web.dev/how-to-use-local-https/

1. Install mkcert brew install mkcert
2. Add mkcert to your local root CAs mkcert -install
3. Navigate to your site's root directory cd Sites/electricg/
4. Generate a certificate for your site mkcert giulia.local
5. Install http-server brew install http-server
6. Start the server http-server -S -C giulia.local.pem -K giulia.local-key.pem -a giulia.local

Logo

Originally from https://hawcons.com/, got it via https://icomoon.io/.

Favicon generator

https://realfavicongenerator.net/

• Favicon for Android Chrome
  • Apply a slight drop shadow, similar to official Google apps (Gmail, Play Store, YouTube...)
• Windows Metro
  • Dark Blue
• macOS Safari
  • Theme color: #0099ff

Icons

From https://icomoon.io/.