Concept Triage: Set-Up & System Architecture

[D1no]

Workspace Areas for integrated trunk based mono-repository structure.

• assets
• content
• features
• infrastructure
• intelligence
• notebooks
• platform
• policy
• services

---

# To-Dos
- [x] Create monorepo scaffold as needed
- [x] #6
- [ ] Unblock End-to-End Type Safety / Storybook

---

Assets

Stack: Figma, Design Tokens, Markdown, i18n, Media Files
Location for all content used within platform, application and external systems (i.e. design / corporate identity exports)

• Move images from web app scaffold to assets and link back to platform

Platform

Stack: pnpm, Node.js, TypeScript, React, Vite, Storybook, Playwright
Location for all application code like apps, server and services as well as application test tooling.

• Create pnpm or nx workspace for integrated application development workflows
  • Add library structure incl. outer bound workspaces like assets/
  • Add vite based react app
  • Separate into ui libs and link / inherit dependencies incl. tsconfig.json
• Create sample web app with interactions
  • Prune boilerplate app scaffold
  • Split app scaffold into ui libs with shell and design system
  • Add an interactive sample component that has delays (i.e. rating, mini-game, etc)
    • Rewrite component to be child first composable (best practice app architecture)
    • Introduce state manager like xState to illustrate event integration
  • Add basic ui analytics for app and user life cycle events
• Add Developer Experience Tooling
  • Add husky pre-commit hooks
  • Add prettier with dependency import sorting for code consistency
  • Add gitmoji intention tags git msg hook
  • Add in-code comment tags via todo-tree
  • Add eslint with proper typescript rules and eslint JSX property sorting for component consistency #2
    • Find solution to automatically sort React JSX properties for xStyled shorthands to sensibly groupe style and component properties
  • Add git msg hook to ensure each commit has at least one github issue associated with it #\d+. Necessary for trunk based development and dev life cycle analytics. #3
  • Add vscode runtime debugger configuration #5
  • Add wallaby interactive test runner configured for mono repo structure (storybook, playwright)
• Add Test Runtime Tooling
  • Add storybook for component and visual testing
    • Add sample component stories
    • Update storybook and add .cache to git ignore
    • Add sample story with storybook interaction test
  • Add playwright for end-to-end browser and integration testing #7
    • Add sample interaction test #8
    • Decide on docs as specs approach (cucumber) and integrate with outer bound documentation workspace area #9

Infrastructure

Stack: kubernetes, argoCD, docker, gitOps
Location for all dev, build and production environments incl. required services such as databases, systems and runners.

• Provision a "cloud neutral" bare metal self hosted example with Ubuntu Server running kubernetes
  • Buy cheap dedicated server (likely kimsufi by OVH)
  • Image server with Ubuntu Server 22.04 LTS and connect to DNS
  • Create kubernetes environment (likely through microk8s) #4
  • Install ArgoCD to enable GitOps
    • Connect ArgoCD to GitHub Repository
  • Turn set-up process into repeatable IaC or post-installation script and add to repository

Global

General items not limited to a particular work area.

• Validate and Add SLSA Security Level Badge
• Validate and Add OpenSSF Scorecard Badge

[D1no]

Needs triage / Ideas

Add CI/CD via github actions and arc for local CI/CD actions sharing
https://youtu.be/Ugonll0e2Os

Add depandabot auto dependency upgrades and auto merging as soon as tests are in place

Add tilt.dev for "desk ready" one command Engineering environment

Consider x86 based docket setup for github codespaces (desk ready)

Add feature flag system along stack

Add neet.js server App scaffold

Create sample CQRS neet.js feature endpoint and combine with react hooks for lose coupling

Add Kafka via Red Panda for event sourcing

• Add note about Azure Event Hub, a kafka compatible and managed cloud solution as to self managing data streaming is often not required.

Add Materialize for event / data projections

Add cerbos authentification data access policy layer

Add Mem Graph for real time graph analysis / analytics

Add figma workspace with export page and design tokens

Add Kubernetes + ArgoCD deployment target

Add snyke security screening

Add and check SLSA 3-4 security compliance and add badge

Add Python data science environment, ray and/or dask

Add machine learning environment (likely TensorFlow)

Add sample machine learning implementation (idea: recommender system based on analytics)

[D1no]

Reading

• https://github.com/stakater-archive/tbd-cd-workflow
• https://github.com/stakater/developer-handbook/blob/master/content/git/tbd.md