dilden / helth Goto Github PK

Should have done this from the get-go. Could absolutely benefit from TS throughout and can make these changes incrementally.

Come up with a logical layout for the app. It's a mess right now. Maybe use Bootstrap 5 CSS for managing the layouts.

DB needs to initialized before attempting to load data.

Not all items can be found via redsky; need to query more APIs if not found.

Potential sources:

• walmart
• myfitnesspal
• open food facts + api
• shopwell 👍
• yuka
• nutrilio
• smartlabel (supports QR codes on packages) + api ref

Within the tracker, highlight appropriate component in green (success), yellow (warning) or red (fail) for goal succeeded, approaching limit, and limit exceeded

Push current 'today' object onto a history stack also stored in local storage. Clear 'today' object afterwards.

In case a user clears their cache/local storage, allow for exporting history, today, and goals as json. Need to allow for importing it for this to be useful as well.

Relevant links
https://blog.logrocket.com/building-a-pwa-with-svelte/
https://blog.logrocket.com/build-spa-svelte-svelte-spa-router/

https://web.dev/learn/pwa/

Add reactivity to it.

It'd be useful to track total sugar as well as added sugars.

If stylesheets are not yet loaded this may cause a flash of unstyled content.

Found at line 307 iframe.js

Specifically, the counter components do not wrap nicely.

Likely need to use component events

Hamburger menu that pops out from the top right corner of the app showing

• today (dashboard)
• history
• profile

UPC-A/E are the most common formats used in barcodes on retail products like food. To implement scanning of food, that will need to be recognized by the card reader.

This package is supposed to have it resolved zxing-js/browser.

New aliases for use within components don't seem to be recognized.

https://dev.to/danawoodman/how-to-add-module-import-aliases-in-sveltekit-2ck

https://dev.to/brittneypostma/make-pathing-easier-with-aliases-in-sveltekit-37l0

https://kit.svelte.dev/faq#how-do-i-setup-a-path-alias

Been quite a while since I've done anything with this project and dependencies need to be checked and updated.

Navigation shouldn't move the content when opened.

App supports Playwright but has yet to make use of it.

https://svelte.dev/blog/announcing-sveltekit-1.0

Right now, when an item isn't found, upc.js errors attempting to access data from the json that doesn't exist.

Draw horizontal line on charts denoting "goal"

https://stackoverflow.com/questions/38324238/draw-horizontal-lines-in-chart-js-2-0

Users should be informed about changes made to the app. A prompt/notice box at the top of the screen or exclamation mark in the menu on any unread notices would be nice to have.

Allow counter incrementing/decrementing intervals to be set by components built on top of it. Suggest increment x10 and decrement x1 as defaults.

When a barcode is scanned, it should be saved to the local DB so that it can be utilized when offline.

Allow users to set goals for themselves which can be reflected in the history charts

https://stackoverflow.com/questions/46167604/ios-html-disable-double-tap-to-zoom

To add items, a user should be able to click/tap a "➕" in the bottom right side (where 📷 currently resides). It should open a screen that allows a user to search via terms or open the barcode scanner. Both the scanner and search should then give a list of items with each having an image, name, and nutritional information. Each item should be able to "saved" to a list or bookmarked as well as an option to add it to the daily totals. Related to #25

Show history in helpful graphs.

• Buttons are too large in counters
• text space too small in counter
• helth header is stretched vertically

sveltejs/kit#6197

Make use of openFDA API to check if product has been issued a recall.

Video element in the scanner is overflowing on y-axis

svelte.config.js should have this set for builds to work in a subdirectory

kit: {
    paths: {
        base: '/helth'
    },
}

https://www.pausly.app/blog/accessible-hamburger-buttons-without-javascript

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

After using the app for a day, opening on the next morning will show data from yesterday. App should automatically detect and change that. As it stands, the app needs to be force refreshed.

For instance, add the calories taken from the scanned item and put that value in the calories counter

Seeing how many calories are left in a day would be useful.

Cameras tend to focus on the background of the visible area. Getting the camera to focus on the barcode could be accomplished by reducing the size of the camera area. It might be helpful to show a red line for where the camera is most likely to focus

Charts currently only pull feom history but the current day isn't added to charts.

Readme should reflect the app; is currently sveltekit default readme

also, rename Nav folder to nav, again for consistency

Instead of automatically filling in the data for each nutrient fact after a successful scan, build out a list of potential items and allow the user to select the correct one; showing the nutrient facts alongside a title + photo. It would be nice to allow a user to select the number of servings at this time as well. Once selected, insert the data.

Brings project structure in line with official docs.