Fitness Tracker v14

Project Archived

Please use the following version higher: https://github.com/michael-255/fitness-tracker-v16

Primary Todos - MEASUREMENTS VIEW

Secondary Todos

Various Ideas

New fields for certain types:

const _Entity = {
  updatedAt: 'equals createdAt when made',
}
const Activity = {
  categories: 'array of Category enums',
  equipment: 'array of Equipment enums',
}

Notes from Jest Talk

ts-jest
JestConfig
- Coverage Reports
- Max concurrency
package.json > args = --watch --verbose --silent
- silent means no console logs
Typescript: Partial<T>
Jest object comparison using .toStrictEqual(...)
npx jest vs npm jest
Process: Given > When > Then
Jest coverageThreshold *
Setup TS info for mock
- jest.mock('...')
use as const to see extra TS info
aws-sdk-client-mock (v3)
- mockClient(...) <- S3, etc.
Example repo: swftdev/typescript-testing

Ideas

Hygen Updates (hygen class new)

Parameters
- Parameter name:
- Parameter type:
  - Simple types...
  - Custom type
- Parameter usage:
  - Required
  - Optional
  - Defaulted
- Parameter default value:
- Parameter updatable? (LocalDatabase classes only)
  - boolean
- Parameter inherited?
  - boolean

{
  parameters: [
    {
      paramName: 'sets',
      paramType: 'ExerciseSet[]',
      paramUsage: 'Defaulted',
      paramDefault: [],
      paramUpdatable: true,
      paramInherited: true,
    },
    // more parameters...
  ]
}

Design Drafts

// Importer & Exporter
interface ExportSummary {
  appVersion: number
  exporterVersion: number
  createdAt: date
  totalCategories: number
  totalEquipment: number
  totalWorkouts: number
  totalWorkoutRecords: number
  totalExercises: number
  totalExerciseRecords: number
  totalMeasurementRecords: number
  categories: []
  equipment: []
  workouts: []
  workoutRecords: []
  exercises: []
  exerciseRecords: []
  measurementRecords: []
}

###############################################################################
#                                                                             #
#                           POST CLONING REMINDERS:                           #
#                                                                             #
#  - Update package.json file                                                 #
#    - "name"                                                                 #
#    - "description"                                                          #
#    - "version"                                                              #
#    - "repository"                                                           #
#    - "bugs"                                                                 #
#    - "homepage"                                                             #
#  - Update this README.md file                                               #
#    - Remove unneeded sections (even this one)                               #
#    - Add detailed project description below heading                         #
#  - Update GitHub repository settings                                        #
#    - Description                                                            #
#    - Website                                                                #
#    - Topics                                                                 #
#    - The "Include in the home page" section                                 #
#                                                                             #
###############################################################################

Usage
Project Setup
Additional Notes

Usage

Install the project dependencies.

npm i

Launch the dev server site.

npm run dev

Build the project dist directory.

npm run build

Run tests and coverage report (press q to quit).

npm test

Build and deploy the dist directory.

npm run deploy

Check for outdated packages.

npm outdated

Update packages based on package.json version settings. Test if you update to the latest version.

npm upgrade

Project Setup

Vue 3 with Vite

Initialize a new Vue 3 project with Vite and follow the prompts.

npm init vue@latest

Vitest

Setup may require you to install the c8 package when you first run vitest.

There are at least two test scripts in the package.json file. One that generates a coverage report (slow). One that does NOT generate a coverage report (fast).

VSCode

I've included the .vscode folder in this project. It has extension recommendations and some useful code snippets.

Git Ignore

Setup with some good defaults based on the default node project .gitignore file.

Prettier

Setup .prettierrc.js and .prettierignore files that should work with ESLint using eslint-config-prettier package.

GitHub Pages

Install gh-pages for GitHub Pages deployments.

npm i -D gh-pages

Use the deploy script in package.json to build and deploy your project. It makes a copy of the index.html in dist as 404.html to address complications related to routing. This let's you avoid using hash based routing (which looks ugly).

Chart.js

The amazing chart.js package.

npm i chart.js

The Vue 3 wrapper for chart.js (vue-chart-3).

npm i vue-chart-3

Quasar

TODO: Might be switching to the Quasar CLI with Vite setup...

Install quasar and it's extras if desired (fonts, icons, etc).

npm i quasar @quasar/extras

Install the Quasar Vite plugin and SASS.

npm i -D @quasar/vite-plugin sass@1.32.0

Use the configurator tool to help setup Quasar for your specific project. It generates the files you'll need to copy over based on your selection.

https://quasar.dev/start/vite-plugin

Dexie

A wrapper package for IndexedDB in the browser.

Using this package to store the apps data in an easy to use local database. I've wrapped Dexie with a class called LocalDatabase in this project.

Installing the package.

npm i dexie

Hygen

Code generator that internally makes use of the inquirer (or enquirer) package.

Install the latest version globally.

npm i -g hygen

Initialize in a project only once. You should see a ~/_templates directory.

hygen init self

My Boilerplate Generators

class
util

Create a new Hygen generator with the following steps:

Create a generator NAME directory in ~/_templates
- Like class, component, or util
Create a generator ACTION directory in the NAME directory
- Like new, add, or help
Add your generator files to the ACTION directory
- *.ejf.t
- *.test.ejs.t
- index.js (if using console prompts)

You can run your generators with the following command.

hygen {NAME} {ACTION}

You can run your ACTION help files with the following command.

hygen {NAME} help

Services

Common services you can reuse in other projects located at ~/src/services/*

LocalDatabase
LocalStorage
Logger

Utils

Common utilities you can reuse in other projects located at ~/src/utils/*

build-id
common
date-time

Additional Notes

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

Disable the built-in TypeScript Extension
1. Run Extensions: Show Built-in Extensions from VSCode's command palette
2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

michael-255/fitness-tracker-v14

Fitness Tracker v14

Primary Todos - MEASUREMENTS VIEW

Secondary Todos

Various Ideas

Notes from Jest Talk

Ideas

Design Drafts

Table of Contents

Usage

Project Setup

Vue 3 with Vite

Vitest

VSCode

Git Ignore

Prettier

GitHub Pages

Chart.js

Quasar

Dexie

Hygen

Services

Utils

Additional Notes

Recommended IDE Setup

Type Support for `.vue` Imports in TS

Customize configuration

michael-255/fitness-tracker-v14

Fitness Tracker v14

Primary Todos - MEASUREMENTS VIEW

Secondary Todos

Various Ideas

Notes from Jest Talk

Ideas

Design Drafts

Table of Contents

Usage

Project Setup

Vue 3 with Vite

Vitest

VSCode

Git Ignore

Prettier

GitHub Pages

Chart.js

Quasar

Dexie

Hygen

Services

Utils

Additional Notes

Recommended IDE Setup

Type Support for .vue Imports in TS

Customize configuration

Type Support for `.vue` Imports in TS