Task Manager App

Setup

This repo can be run locally inside of a docker container (recommended) or natively.

Docker, especially in rootless mode, allows for (a) greater security and (b) eliminates platform compatibility issues, e.g. environment variable issues on Windows.

Pre-setup

Toggle Docker section

Docker development container (recommended)

Ensure Docker Engine and Docker Compose are set up. Refer to platform-specific instructions: https://docs.docker.com/engine/install

With Docker Desktop (GUI) your mileage may vary.

To verify, the following commands should print:

docker -v
docker compose version

Optionally, make the [convenience script](./dev # "Acts as a docker compose shortcut so we don't have to type long commands every time") runnable:

chmod +x ./dev

Toggle Native section

Native development environment

Ensure NPM is set up. To verify:

npm -v

Install dependencies:

npm i

Run the Front End app

With docker:

./dev

Or natively:

npm run dev

Features

• Create tasks

• View tasks

• Update tasks

• Delete tasks

• Filter tasks

• Persistence

• Drag and drop

• Search

• Statistics? (view count of filtered/total)

Technical Decisions

Toggle section

• Expensive store subscriber and serialization of all of the state using JSON.stringify upon every state update.

  • Reacting to changes in the storage/fetching not implemented.
  • Trade-off: PoC complexity.

• Nested features

  • Current prefixed component naming pattern (e.g. TaskListFiltersClear.tsx) is potentially not sustainable.

• Selectors and actions

  • Centralized for all task features.
  • Potentially needs to broken out and collocated with sub-feature as the number grows.

• File naming convention

  • Components/Entities/Services/Collections as PascalCase.
  • Anything else as camelCase.

• Hooks vs utils

  • Anything not necessitating life cycle hooking was treated as a util.

• Prettier

  • Opinionated, but results in perhaps not the most readable code.

• Indexes and named exports

  • Results in arguably the best balance of least maintenance/most elegant usage

Todos

Toggle section

• E2E tests

• Entity schemas and form validation

• WCAG

• More performant and robust data storage, potentially indexedDB

• CSS prefers (e.g. motion preference) for greater accessibility, light/dark theme

• Router. Current approach is unsustainable

• Human friendly dates, time alerts

• More polished form components

• Reconsider UX

• Custom code format ruleset for better readability