flsoller / ff-hour-tracker

Hour and expense + payout tracker

Description

The project Hour Tracker App started through a request from a friend to help him track and log different metrics for voluntary workers or members. This app aims to provide an easy solution for tracking hours and expenses. The requirements are:

• log work hours by category.
• log expenses, deposits and payouts.
• add / remove members.
• get reports for different metrics.
• authentication.

The frontend features Vue. The backend uses Node with Express, Prisma and Postgres. A fully automated CI pipeline is in place powered by GitHub actions for builds and tests as well as a changelog and release workflow.

The project is setup as a Monorepo, so all parts of the application are co-located in this repository.

---

Installation / Setup

If you want to run the project locally or contribute, please checkout the contribution guide for setup and other instructions.

---

Serverless Architecture Investigation

Since the current API is deployed to a free service, container startup time can take 30 seconds or more. For a side project with next to no traffic, it is not feasible to provision a dedicated instance. As such, it could be an option to leverage AWS Free Tier for optimal performance. Additional Lambda concurrency limits and API Gateway request throttling could serve as a cost protection measure against bad actors:

ff-hour-tracker's Issues

Setup router for auth protected routes

• Should not be able to access private routes
• Login view should be public
• Router should use user store to get auth. state
• Cover functionality with tests

Add member integration tests

• Add integration tests for members controller
• Create helper for setting up organizations before a test

Update release workflow

Try status polling from API / FE deployment services before running next steps
Fix warnings in create-release workflow:

• https://github.blog/changelog/2022-09-22-github-actions-all-actions-will-begin-running-on-node16-instead-of-node12/
• https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/

Swap NestJS for Express with Typescript

Too high level, too much abstraction.

Rework AppSidebar

Rework Sidebar to match design:

extra: active route should be highlighted.

Define/Add schema for work hour types

[API] Implement members page functionality

Add functionality for getting paginated members

• add protected GET request to root in api/src/controllers/Members/index.ts
• should accept following query params:
  "limit" (or default 10) + "offset" (or default 0) + "order" (by lastName [default asc, dsc])
• should return:
  { data: [{ id: string, firstName: string, lastName: string, emailAddress: string}], totalCount: number}
• add response type to core package
• add integration tests

Setup pinia user store

• Setup user store
• Should save accessToken returned from api in memory
• Adjust Login.vue to use store instead of service method
• Adjust tests to cover store in Login.vue
• Remove "pull_request" from trigger in .github/workflows/docker-image.yml

Upgrade all CDK dependencies and integrations

Packages are outdated and need to be updated to reflect their latest versions:

• upgrade all dependencies
• ensure new imports from CDK modules are up to date
• ensure AWS deployment still works with existing Github actions workflow

Setup frontend deployment

• Configure cors for api with chosen domain
• Integrate action to trigger api & frontend deployment when creating a release

aws infrastructure deployment workflow

• should be able to deploy the CDK app to a specified stage via workflow
• workflow should only be triggered manually
• update CDK app to respect stages
• should use OIDC to assume a role for the workflow

Create user model

• Should have username, email, password attrs
• Remove "isAdmin" from members

Create initial configuration page

Should list (dummy) work hour types
Should be able to create new type
Should be able to edit existing type

[FE] Implement members page functionality

Add members in a striped table for members view:

• Should use the paginator option
• Should make GET request to /api/v0/members
• Add abstraction for making authenticated requests with access token from user store as bearer
• Should pass query params from paginator: limit, offset, order (names column)
• Handle api requests through a members.ts service
• Add e2e tests

restructure permissions, add auth protect to all

In order to restrict creation of organisations / users to platform admins, extend the user model with an admin property.

• add isAdmin to user model (default false)
• add logic to respect permission for admin users on relevant routes
• should use req.user to retrieve user info to validate requests
• restrict createUser and addOrganisation to admin users
• add auth protection to all controllers (except auth)
• adjust integration tests to cover auth/permission on all controller routes

api trial deployments

• Setup dockerfile for production build
• Figure out env variable structures for container
• Initialise current prisma schema as migration

Test cdk for deployments

• Add unit tests for the CDK constructs, stack and app
• Dispatch workflow for deployment

Add url rewrite to vercel.json

Set rewrites to avoid not found errors due to spa routing vercel docs.

Should just be:
{ "rewrites": [ {"source": "/(.*)", "destination": "/"} ] }
in frontend/vercel.json

Create seed script for dev env

• Add prisma seed script to seed local admin user to the db
• As it's only for local env, use hardcoded email/pw values
• Update/Review readme for necessary steps to setup local env

Cleanup readme files

• Create readme for each package (add links to root readme section, reduce clutter)
• Add contribution.md (explain pre-commit hook requirements, i.e. convention)
• Add version badge to root readme:
  ![GitHub release (latest by date)](https://img.shields.io/github/v/release/flsoller/ff-hour-tracker?logo=github&logoColor=silver&style=plastic)

Create auth, login route

• Implement auth middleware with JWT
• Create a login route
• Add auth middleware to existing routes

Add PG and Sequelize

After replacing NestJS with Express, the DB connection and setup needs to be re-implemented for the API.

Add basic route configurations

Create placeholder components for each module which will be loaded as the initial screen.

[FE] Add member functionality

Should be able to add a member from the members page

• Create wrapper dialog service
• Create add member dialog that can be called with the dialog service
• Add email validator/no empty string to API endpoint for creating members (add to core?)
• Add e2e's

Postgres init script

Create an init script that sets up PG tables and columns matching the models.

Setup aws cleanup workflow

• Should delete the deployed stack (dev only for now)

• Set workflow names in the files to:

  • AWS_Deploy_Stack
  • AWS_Offboard_Stack

• Check if OIDC auth job can be made reusable as a drop in to workflows

Define/Add schema for work hour entry

Add integration tests for timelogs route

Setup fetch intercept for access token refresh

Implement an interceptor using native fetch, to catch requests that are performed with an expired access token

• Should refresh access token silently when expired (i.e. API returns 401)
• Should retry the initial request with the new access token
• Should be re-usable for any protected api route requests
• Refactor existing uses of authenticated requests
• For now, ignore router actions when refresh token is expired

Improve Login view

Due to the free instance used for the web server, the service scales down after 15min of inactivity and can take up to 30 seconds for starting.

• Add a loading indicator to the login button
• If request takes longer than 2 seconds, show sticky Message under the button
  Content: The free resources enabling this project can take up to 30 seconds to initialise. Please wait...
• Display an InlineMessage for login form validation errors
• Add tests

try out buefy

Add Buefy component library to the project and test it out

Implement Jest

Replace default test runner of Angular with Jest

setup code deployments for cdk

• Should reference code in either S3 bucket or ECR when going for docker based lambdas
• Should use the refs to identify code for deployments
• Ignore version tags for now but keep in mind when building

Setup Vitest for frontend

• Integrate Vitest
• Add tests for Login component and related functions
• Integrate frontend tests into .github/tests.yml
  • Remove test runs for pull_requests against master to avoid running twice (once on push and again when opening the PR)

Add integration tests for activities route

Create login page, setup proxy config

• Create a login screen with email/password form inputs
• Should submit validated form inputs to api endpoint (create reusable fetch service for api requests)
• Setup vite proxy config for dev (localhost)

Create workspaces

Create workspaces and add core module with types to share between frontend/api

refactor tests to just return valid token

Rather than making a login request against the app with supertest, just return a valid access token for the test user

integrate ecr build into deployment workflow

• setup commit hash for tagging images instead of hardcoded latest
• set ecr repo lifecycle to 2 images (maybe handle create via script or cdk for future repos)
• combine image build with deploy

Create minimal AWS - CDK setup

• should be able to provision locally (SAM local or localstack)
• infrastructure needs to be setup with CDK
• initial services should be an API Gateway + that returns a dummy response from a Lambda

cleanup ci test runs

• Investigate docker cache usage for github actions
• Try to use the docker image from the docker-image-ci workflow in the test workflows
• Implement correct api proxy for frontend in playwright test runs (different for container network and local development)

Add all api route interfaces to core-types

As part of testing #25 api typescript interface has been added for organizations. Add remaining interfaces.

Create basic time logging input form

Should contain:
placeholder for member dropdown selector

Should contain form group for:
Date: Month / Year selector (default last month)
Type: Type of work/hour (placeholder for now)
Hours: Number of hours

Should be able to add more groups dynamically

Add playwright for headless e2e

Investigate integration of playwright (https://playwright.dev/) for headless browser tests. This would allow for e2e test runs without the necessity of deployments and have them located as a service in docker compose.

• Should be a separate service in docker compose
• Should run as part of the tests.yml actions