dilden / helth Goto Github PK

View Code? Open in Web Editor NEW

7.0 2.0 1.0 2.52 MB

PWA for tracking nutrients and water

Home Page: https://helth.app/

License: GNU General Public License v3.0

JavaScript 25.94% HTML 0.37% Svelte 44.61% CSS 3.76% TypeScript 25.32%

js pwa svelte sveltekit

helth's Introduction

helth app

Helth app aims to be a minimalist web app for tracking calories, sodium, and water intake. It's a PWA built with SvelteKit. Helth app doesn't use any third-party services for managing your data. Instead, your data is stored locally on your device. It also has a sweet barcode scanner that can magically ✨ download packaged food items and the nutrients for that particular food by connecting you to the Open Food Facts API.

Getting started developing helth app

Clone this repository
npm install
npm run dev

Building

To create a production version of helth app:

npm run build

Production builds can be previewed with npm run preview. Helth app currently uses the Cloudflare adapter but aims to be a static web application meaning it could be host from anywhere that can serve HTML, CSS, and JS files. This can be accomplished switching out the adapter with the SvelteKit static adapter.

Structure

Various reusable components are located in src/lib/. All data is stored locally in the user's browser and is managed via src/stores/stores with database connections handled at src/stores/db. Pages routes are found in src/routes/ and utility classes for transforming data can be found in src/utils/.

3rd Party Tools

This development of this app is made easier by utilizing the following tools:

helth's People

Contributors

Stargazers

Watchers

Forkers

jimmyhogoboom

helth's Issues

Error handling for items not found in upc.js

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

readme

Readme should reflect the app; is currently sveltekit default readme

Create goals

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

Upgrade SvelteKit to 1.0

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

Deploy static assets (build) via npm script

Add data sources

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

Reset local storage each day @ midnight

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

Accessible Hamburger Menu sans JS

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

Inventory Search

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

Fetch information about SKU on successful scan

more tests plz

tests

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

App should be installable as a PWA

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/

Item selection

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.

Decrementing counters allows < 0

'Today' should reset automatically

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.

Show goals as lines in charts

Draw horizontal line on charts denoting "goal"

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

Graph history data

Show history in helpful graphs.

Add current day to charts

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

Scanner video exceeds mobile width

Video element in the scanner is overflowing on y-axis

Mobile first design

Specifically, the counter components do not wrap nicely.

Save to DB on scan

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

Make typing in counter components update values

Add reactivity to it.

Update dependencies

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

Move $components -> $lib

Brings project structure in line with official docs.

App fails on first load of IndexedDB

DB needs to initialized before attempting to load data.

Disable double tap to zoom on iOS

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

Show remaining daily amount from goals minus tracked

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

Camera area in scanner is too large

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

Add scanned results to appropriate components

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

Support TypeScript

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

Formatting + styles

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

Goal limit approaching

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

Fix module aliases

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

Looks absolutely terrible on iOS

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

Close barcode scanner modal on successful scan

Likely need to use component events

Create updates/changes/news page

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.

Alert user if a barcode they've scanned has been listed for a recall

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

Set 'base' on build but leave base empty '' in dev.

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

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