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)