The Timely Tasker App

Overview

Inspired by D. Shea's ETT productivity worksheet, read more of the philosophy here: https://davidseah.com/node/the-emergent-task-timer/

Try the app out here right now: http://timely-tasker.com/timer

Project Structure:

./cypress    # Test fixtures and boilerplate
./bin        # Dev tools
./fixtures   # Fixtures for use in development
./functions  # Serverless cloud-run code (the REST api lives here, routes map to these filenames)
./lib        # Supporting code for serverless functions
./migrations # Database migrations
./public     # Static assets
./src        # React application code

React Component Structure:

#  Timer.tsx
#  |__TaskRowSummary.tsx
#  |
#  |__TaskRowTicks.tsx
#     |__Tick.tsx

Project Details:

built with CloudFlare Pages
react.js front-end with reduxjs for state management
interactive browser-based test coverage with Cypress
backend data stored using Functions & D1 for lightweight relational storage
pipeline integration with github CI and codecov, ++README badges!

oAuth 2.0 / OpenID Connect via Google

only supports google accounts
establish identity/ownership of data, no google APIs will be authorized via oAuth scopes. For this we can target only the id_token info.
use authorization code flow, server->server code exchange
successful auth results in a crypto-safe unique session ID cookie that is not visible to JS (i.e. marked 'httpOnly' to bust XSRF).
this cookie comes with all future XHRs to CRUD the app's cloud data, that's how we associate it with you
the direct server->server call to google over TLS for token exchange means we don't have to validate a JWT separately, the identity returned is always valid in server context
reference: https://developers.google.com/identity/openid-connect/openid-connect#obtainuserinfo , https://developers.google.com/identity/openid-connect/openid-connect#authuser

Database Schema

schema diagram

Each Summary is one horizontal line with a topic at the beginning, each TimerTick is one of the 96 quarter-hour slots in a day. TimerTicks will be displayed horizontally next to their summary, offering a simple way to track work items and the push/pull between scheduled work and distractions.

TimerTicks can have 2 states: Distracted = 0, Distracted = 1 A TimerTick is created for any "occupied" tick, i.e. whenever the user clicks a tick. Clicking 2 ticks in the same column shall result in the state of both ticks being saved as Distracted = 1, to indicate that time was spread between tasks.

Commands

`npx wrangler pages dev --d1=DB --persist -- npm start`

Runs the app in the development mode, with sqlite persistence enabled.
Open http://localhost:3000 to view it in your browser.

`wrangler d1 migrations apply timely-tasker-dev --local`

Runs migrations on local dev

`wrangler d1 migrations apply timely-tasker-dev`

Runs migrations in preview/staging.

`bin/migrate-prod-db`

!!RUNS MIGRATIONS IN PRODUCTION!!

`sqlite3 .wrangler/state/d1/DB.sqlite3`

Loads a local dev DB console (run migrations to create the db)

readysetawesome/timely-tasker