# ============================================================================= # COMPETENCY RECORD - Cedric Ancellin's demonstrated engineering skills and # experience. Third-party technologies and vendors are named as the concrete # skill surface. Professional background / track record. # ============================================================================= # ============================================================ # MODERN FULL-STACK PRODUCT ENGINEERING - COMPETENCY RECORD # ============================================================ # Core Purpose: # Demonstrated experience shipping a standalone, production # web application on a current TypeScript/React/Next.js stack # - end to end, solo - distinct from the large PHP platform # that anchors the rest of this record. # ============================================================ summary: > Shipped a standalone internal product on a modern full-stack - Next.js 16 (App Router), React 19, and TypeScript, to production: an employee-facing ticket-intake and tracking portal that fronts a third-party issue tracker (Jira) so staff without a tracker license can submit well-structured work and follow its status. Covers the whole app: authentication, a server-side integration layer, a templated submission engine, live reporting, and deployment/ops. Complements the PHP-platform competencies with current server-first React/TypeScript delivery. # ================================================================== # 1. WHAT THE PROJECT IS FOR # ================================================================== product: purpose: > Built to support a managed engineering-delivery process (see COMP-22): the driving goal is clean, well-classified time tracking so engineering effort can be capitalized against open CapEx and rolled into management reporting. The intake and tracking UI is the means, the time data is the point. problem: > Capturing capitalizable engineering effort requires consistent, well-classified tickets and logged time from a whole team, but not everyone holds (or should hold) a paid tracker seat, and raw tracker screens produce inconsistent, malformed work items. solution: > A web app that authenticates staff by corporate Google identity and talks to the tracker through a single service account, so end users submit well-structured, correctly-classified work and view worklog timesheets/reports through a guided UI, without ever logging into the tracker themselves. outcome: - "Effort is captured against classified work (project / work-type / phase), feeding CapEx capitalization and management reporting (see COMP-22)." - "Staff file well-formed, correctly-fielded tickets from pre-built templates, and follow their own tickets in-app." - "Worklog timesheets and date-ranged roll-up reports (with spreadsheet export) are available without a tracker license." cross_reference: $ref: "https://zc8.com/competencies/22_engineering_management_financial_stewardship" # ================================================================== # 2. APP ARCHITECTURE (NEXT.JS APP ROUTER) # ================================================================== architecture: stack: - "Next.js 16 App Router, React 19, TypeScript 5.9." - "Tailwind CSS 4 (v4 config-less syntax), lucide-react, next-themes." - "Node.js 22 runtime; deployed on a cloud compute VM under a process manager." server_first: - "Server Components for data-loading pages, Server Actions for mutations, and API Routes for client-driven fetches, a clear three-way split." - "Edge middleware gates every route: unauthenticated traffic is redirected; a small public allowlist (sign-in, auth callbacks, static) is exempt." - "All third-party credentials and calls stay server-side, never shipped in a client bundle (enforced as a hard rule)." data_flow: - "Dashboard: server component resolves the session identity, then fans out parallel queries to build per-project stats." - "Submission: client builds FormData → Server Action builds the tracker payload → integration client posts it → structured result returned (expected errors are returned, never thrown)." - "Typeahead: client component → local API route → proxied tracker user-search, protected by the same middleware." # ================================================================== # 3. AUTHENTICATION & IDENTITY # ================================================================== auth: provider: "NextAuth 5 with a Google OAuth provider, restricted to a single corporate email domain." sessions: "JWT session cookies; route protection via middleware rather than per-page checks." two_identity_model: description: > The single most important design concept: two distinct identities that must never be confused. service_account: "A service account API token authenticates all calls to the tracker (Basic Auth)." session_user: "The Google-authenticated person is the real subject whose data is fetched and acted on." hazard_managed: "Using the service-account identity for user lookups would show the wrong person's data, codified as a top-severity 'law' with a grep-able enforcement check." cross_reference: $ref: "https://zc8.com/competencies/09_identity_authentication" # ================================================================== # 4. THIRD-PARTY INTEGRATION LAYER # ================================================================== integration: description: > A hand-written server-side client against a third-party SaaS (Jira Cloud) REST and Agile APIs, no vendor SDK. capabilities: - "Identity resolution: corporate email → tracker accountId, preferring the correct account type when the search returns several." - "Issue creation, attachments (multipart), watcher add/remove, and active-sprint placement via the Agile board API." - "JQL search for assignee / reporter / watcher rollups; issue detail with rich-document (ADF) rendered to readable text." - "A 15-second AbortController timeout on every request; result objects instead of thrown exceptions for expected failures." cross_reference: $ref: "https://zc8.com/competencies/05_integrations_etl" # ================================================================== # 5. TEMPLATED SUBMISSION ENGINE # ================================================================== submission_engine: templates: "38+ pre-built intake forms, each defining its visible fields, defaults, required-field rules, and on-submit behavior." programmed_actions: "Per-template automation on creation, auto-assign, watchers, labels, issue links, and sprint placement, configured by template, not by user." rich_text: "A WYSIWYG editor (react-quill-new) whose HTML output is converted to Markdown (turndown) for the tracker payload." consistency: "All forms share one structural pattern and one field-mapping discipline (e.g. a mandatory global stakeholders field), so the submission surface stays uniform." # ================================================================== # 6. REPORTING & DATA EXPORT # ================================================================== reporting: timesheets: "A weekly grid (users × days) and a chronological list view over third-party worklog data (Clockwork), with a per-user calendar drill-down modal." rollups: "A date-ranged report builder that loads the worklog dataset once, then regroups it client-side into several report shapes." export: "Spreadsheet (xlsx) export of report tables." cross_reference: $ref: "https://zc8.com/competencies/13_reporting_analytics_reconciliation" # ================================================================== # 7. DELIVERY & OPERATIONS # ================================================================== delivery: hosting: "Cloud compute VM, application served on a fixed port and kept alive by a process manager (PM2)." environments: "Separate staging and production branches/URLs; promotion is a reviewed merge." ownership: "Designed, built, and operated solo, from first commit to production deploy, as a single-owner product." known_gaps_documented: - "No CI/CD, no automated test suite, and no peer review, the project's governance oracle is the standing quality gate (see COMP-20)." - "These trade-offs are explicitly documented rather than left implicit." cross_reference: ai_orchestrated_delivery: $ref: "https://zc8.com/competencies/20_ai_orchestrated_delivery" note: "This same app is the case study for the AI-first delivery methodology and its governance oracle."