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

• service worker - work offline
• when during event, different homescreen
• implement edit entry UI functionality
• add share to app functionality
• add export data as text to app functionality
• better sw (with the "new update, refresh")
• show export data functionality only if supported
• verify how the storage works with the shared sub domain
• use tag
• add legend to calendar
• add navigation by year, and back to today, in calendar
• dark mode
• update moment library
• custom splash screen
• manifest doesn't have a maskable icon
• add functionality to clear/update sw cache from the app ui
• 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/.