bvaughn / personal-logger

Webapp for tracking personal diet, sleep, and general wellness

Try it out by signing in with your Google, Github, or Twitter accounts at personal-logger.now.sh.

Local Installation

This application was built with create-react-app. To run it locally, clone this repository and then:

yarn install
yarn start

Firestore Configuration

Indexes

This application relies on a single collection, "entries", with a single index on the following fields:

• user, ascending
• `$category`, ascending
• date, descending

Rules

Security for this application relies on the following rules:

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      // Authenticated users can access data that is explicitly associated with them.
      allow read, update, delete: if  request.auth.uid != null &&
                                      request.auth.uid == resource.data.user;

      // Authenticated users can create new records.
      allow create: if request.auth.uid != null;
    }
  }
}

personal-logger's Issues

First-time Twitter authorization throws multiple console errors

Unsure whether any of this is (a) under the originating site's control and (b) whether the project owner is concerned with style-only errors, but better to capture and close than to ignore console errors and have it bite us on the butt later.

Repro steps

1. Fork and clone the project
2. yarn install followed by yarn start
3. Select "Sign in with Twitter" option

Console errors reported

These errors were observed in the console upon loading the https://api.twitter.com/oauth/authenticate?oauth_token=d8MvNgAAAAAA3naZAAABYITTdUk page:

authenticate:7
Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.

authenticate:1
Refused to load the image 'https://api.twitter.com/favicon.ico' because it violates the following Content Security Policy directive: "img-src https://abs.twimg.com https://*.twimg.com https://pbs.twimg.com data:".

js_inst?c_name=ui_metrics:3
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src https://abs.twimg.com https://abs-0.twimg.com". Either the 'unsafe-inline' keyword, a hash ('sha256-0EZqoz+oBhx7gF4nvY2bSqoGyy4zLjNF+SDQXGp/ZrY='), or a nonce ('nonce-...') is required to enable inline execution.

(anonymous) @ js_inst?c_name=ui_metrics:3
lbLOqVsTIaJQiqiPCHbB @ js_inst?c_name=ui_metrics:3
vqWPCicedwRraslSgApo @ js_inst?c_name=ui_metrics:6
js_inst?c_name=ui_metrics:3 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src https://abs.twimg.com https://abs-0.twimg.com". Either the 'unsafe-inline' keyword, a hash ('sha256-0EZqoz+oBhx7gF4nvY2bSqoGyy4zLjNF+SDQXGp/ZrY='), or a nonce ('nonce-...') is required to enable inline execution.

(anonymous) @ js_inst?c_name=ui_metrics:3
lbLOqVsTIaJQiqiPCHbB @ js_inst?c_name=ui_metrics:3
vqWPCicedwRraslSgApo @ js_inst?c_name=ui_metrics:6
js_inst?c_name=ui_metrics:3 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src https://abs.twimg.com https://abs-0.twimg.com". Either the 'unsafe-inline' keyword, a hash ('sha256-0EZqoz+oBhx7gF4nvY2bSqoGyy4zLjNF+SDQXGp/ZrY='), or a nonce ('nonce-...') is required to enable inline execution.

(anonymous) @ js_inst?c_name=ui_metrics:3
lbLOqVsTIaJQiqiPCHbB @ js_inst?c_name=ui_metrics:3
vqWPCicedwRraslSgApo @ js_inst?c_name=ui_metrics:6
js_inst?c_name=ui_metrics:3 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src https://abs.twimg.com https://abs-0.twimg.com". Either the 'unsafe-inline' keyword, a hash ('sha256-0EZqoz+oBhx7gF4nvY2bSqoGyy4zLjNF+SDQXGp/ZrY='), or a nonce ('nonce-...') is required to enable inline execution.

Report view

Create a view that shows all entries, ordered by date, with short, text-only summaries.

This can be useful for sharing with a physician, or for visually scanning for trends (until automated tools exist).

Dashboard view

The root landing page now is blank. We could pick a list to default to, but maybe a dashboard view would be nicer.

Sleep duration should support decimal values

Add spicy Boolean attribute to food

And conditionally show a check box

Unable to authenticate with GitHub provider

GitHub authentication is failing when running the app in development mode (i.e. launched locally via yarn start) and in production (i.e. when attempting to authenticate at https://personal-logger.now.sh).

This has me blocked from being able to test my work on #17.

Repro Steps

0. Use OS 10.13.2, Chrome 63; GitHub account with 2FA enabled.
1. Fork the personal-logger repo.
2. (I'd run yarn install a while back, then git remote.../git fetch.../git merge... after subsequent merges to master).
3. Run git checkout -b mikethecanuck/disable-autocap - but no changes to the code.
4. Run yarn start, browse to http://localhost:3000/ in Chrome
5. Select "Sign in with GitHub"
6. Authorize bvaughn for GitHub authN

Expected Result

• app starts up, presenting the header, nav and main elements (good)

Actual Result

• GitHub authorization for this app appears to succeed, then returns user to the "GitHub/Twitter" sign-in choices
• on all subsequent sign-in attempts, app redirects directly back to the GitHub/Twitter choice
• console briefly flashes the following two Uncaught TypeError exceptions and then clears (I had to video and pause to be able to transcribe the exception contents):

Uncaught TypeError: Cannot read property 'appendChild' of undefined
  at injectScript (content-script.js:10)
  at content-script.js:34

and

Uncaught TypeError: Cannot read property 'version' of undefined
  at installHook (installHook.js:29)
  at installHook.js:53

I don't know if there's some silent error that occurs when authorizing the food-tracker-c6279.firebaseapp.com authDomain.

I'll dig around those scripts but figured I'd report this first in case anyone else was hitting this hurdle.

Direct navigation to pages other than the root URL breaks without service workers

This means that creating or deleting resources results in 404 page on mobile.

Device	Server	Works?
Laptop	localhost	✓
Laptop	*.now.sh	✓
Mobile	localhost	✓
Mobile	*.now.sh	✖

Re-think list view(s)

Rather than homogenous lists of all foods, exercises, etc. it would be nice to show a heterogenous list that shows each day as a card, beginning with sleep, and then continuing with interleaved food, symptoms, and exercise.

Example

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ Tuesday, January 2, 2018      ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ Slept 8hrs, awoke twice.      ┃
┠───────────────────────────────┨
┃ 8:00am Ate cereal             ┃
┠───────────────────────────────┨
┃ 8:05am Drank soy latte        ┃
┠───────────────────────────────┨
┃ 10:00am Energy level high     ┃
┠───────────────────────────────┨
┃ ...and so on...               ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Pros

• The interleaved format might make it easier to spot certain types of patterns, and the cards could be used to highlight missing entries (eg. no sleep entry, fewer than 3 food entries, etc.).
• I could get rid of the individual list views entirely. Perhaps either relying on a summary-like view if I want to filter only specific types of data.
• The new-entry floating action button could pop out a couple of options (one for each data-entry type) when touched. The main button could conver to an "x" to undo the spring. (This is how several of the material UIs work.)
• I could color-code day-cards based on symptoms (to make it easier to visually scan for "good" days and "bad" days).

Cons

• This layout would make react-virtualized integration more difficult. But perhaps I don't actually need to window the displayed elements, if I only show the most recent 1-2 weeks? If pagination was necessary, week boundaries seem like a reasonable place to do it.
• The day "cards" might get long (and possibly hard to view on a single mobile screen). Perhaps this can be mitigated through the use of symbols to reduce the amount of text required.

Protect app from unauthorized users

Thank you for sharing the code It was really helpfull.
I was playing with the React Dev Tools, I found that I can be redirected to the main page without authentication
How can I stop the page from being rendered ?

Add confirmation modal to delete process

Seems too easy to accidentally delete something

Shrink bundle size

This app is 199.9 KB gzipped! Let's make it smaller, perhaps by splitting code by route.

Favicon / logo

Need an icon for the app itself.

Numeric inputs should allow the 0 to be deleted

Disable auto capitalize behavior for inputs

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize

Disable Safari/iOS page bounce behavior

But make sure not to break scrolling.

For example, I tried this (b14aca4) earlier but it caused list-scrolling to sometimes not work.

Add exercise section

Should support types: cardio, strength

Should support duration, notes, and maybe a field like "pace" or "intensity". (Not sure!)

Is linting always desired for JSON and CSS files, or only at precommit?

I'm intrigued by your use of precommit/staged-files linting - I'd like to implement that in my own project.

In my research to understand how the options work for this project, it appears you've configured prettier twice - once for precommit and again for its own script. However, there are different file types being applied depending on the context - is there a particular reason to leave json,css out of the prettier script call, or just historical evolution?

See line 33 of package.json:

    "prettier": "prettier --single-quote --trailing-comma=es5 --write 'src/**/*.{js,jsx}'",

versus the lint-staged configuration at line 22 of package.json:

    "src/**/*.{js,jsx,json,css}": [

Aside: I'd be interested to understand in which contexts you're calling the prettier script outside of the git commit flow? Is this something you do just occasionally or arbitrarily, or is the inclusion of a prettier script an artifact of the initial inclusion of prettier in the project?

Fix elastic scroll bounce for iOS

The way it's currently disabled causes the page to be unscrollable sometimes.

Saving a resource doesn't return to list page (on production)

At least for mobile Chrome.

Add `calories` in the food form

Hi Brian,

It would make more sense that in the food logging section, you could track the calories that you've been taking in.

Also it could be useful to display in a line chart which could possibly be a future feature.

I'd be happy to implement it as well. 😄

Can't login via Google/Github/Twitter in Chrome/Safari

Can't try it out

Support alternate auth sources?

Auth is currently tied to Firebase/Firestore, more specifically to the GoogleAuthProvider implementation. Might be nice to at least add a few others (eg Twitter, Facebook, GitHub)?

This will also require adding an interstitial route with a selection UI for with auth service to use.

Add iOS PWA meta tags

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Replace Firebase/Firstore with something better

In general, I've found Firebase to be awkward to work with- from authentication to querying.

Its support for compound queries is very limited. For example, it doesn't support logical OR or the "!=" operator, pushing the burden onto the client.

Its authentication model feels awkward too: Sessions aren't persisted between page reloads for some providers (eg Google). I was unable to get Facebook to actually work. etc.

Then tonight while testing the new summary page, I started seeing this error:

FirebaseError: [code=resource-exhausted]: Quota exceeded.
Using maximum backoff delay to prevent overloading the backend.

This app has experienced very light traffic, so the above message is concerning.

Anyway, all of the Firebase-specific code is abstracted away behind DataStore so in theory, it should be easy enough to remove.

I asked for recommendations about this on Twitter some time ago, and based on the responses I got, Graph.cool seems like a good option to consider. This article compares GraphQL to Firebase and touches on some of the pain points mentioned above (like limited querying). Another possibility is AWS AppSync.

Handle invalid resource ids

Currently if you try to navigate to a URL with an invalid ID, the app hangs.

Add "meal size" attribute to food entries

Add a conditional enum to the EditFoodForm for type === "food" records to specify a meal size: "snack", "small", "large"

Cleanup styles

Replace current global styles with either CSS modules or a CSS-in-JS solution to make them more modular.