# FloorGen: Senior Full-Stack Engineer Application

> **An interactive proof-of-work application built with the WolfPack listing engine demonstrating direct alignment with FloorGen's browser-based 2D/3D studio, pure TypeScript engine, offline-first sync, and MCP server architecture.**

Live Listing: [`/floorgen`](https://listingslab.com/floorgen)  
Monorepo Source: [`github.com/goldlabelapps/nx`](https://github.com/goldlabelapps/nx)  
Candidate CV: [`/pdf/Chris_Dorward_CV.pdf`](https://listingslab.com/pdf/Chris_Dorward_CV.pdf)  
FloorGen Studio: [`floorgen.app`](https://floorgen.app)  
FloorGen Careers: [`floorgen.app/careers/senior-full-stack-engineer`](https://floorgen.app/careers/senior-full-stack-engineer)

---

## 1. Executive Summary

FloorGen is revolutionizing spatial design by delivering a free, browser-native 2D/3D floor plan and drawings studio featuring FloorGen AI and an MCP server that empowers external AI agents to co-edit drawings.

Rather than submitting a static PDF into a generic queue, this listing is built as an interactive, production-grade application inside our enterprise Nx monorepo. It serves two distinct purposes:
1. **Direct Demonstration of Technical Competence**: Proves deep mastery across end-to-end TypeScript, complex canvas/document React performance, Node services, offline-first synchronization, and enterprise Nx monorepo architecture.
2. **AI-Accelerated Engineering Showcase**: Demonstrates how disciplined agentic workflows, MCP tool integration, and human guardrails rapidly deliver resilient, tested software.

---

## 2. Target Business & Context

| Property | Details |
| :--- | :--- |
| **Company** | **FloorGen** |
| **Headline** | *"Free Floor Plan Maker: 2D, 3D & No Sign-Up"* |
| **Website** | [floorgen.app](https://floorgen.app) |
| **Careers Source** | [floorgen.app/careers/senior-full-stack-engineer](https://floorgen.app/careers/senior-full-stack-engineer) |
| **Target Role** | Senior Full-Stack Engineer (TypeScript, React, Node) |
| **Team** | Engineering |
| **Location / Comp** | Remote (United Kingdom) • Full-Time |
| **Direct Contact** | `contact@floorgen.app` |
| **Social / Profile** | [LinkedIn: FloorGen](https://www.linkedin.com/company/floorgen) |

---

## 3. Listing Architecture & Specification

Built strictly following the **WolfPack Modern Scroll Blueprint** (`src/app/templates/modern-scroll/`) tailored for high-signal recruitment:

### Visual Design & Tone
- **Theme**: Light mode by default (`defaultTheme: "light"`), with dark mode support.
- **Color Tokens**:
  - Primary Accent: `#6741d9` (FloorGen purple) / Dark mode accent: `#9775fa`
  - Chrome / Background: `#f6f7f9` (Light) / `#0d1015` (Dark)
  - Typography / Ink: `#0f1419` (Light) / `#e9edf2` (Dark)
  - Muted Ink: `#536471` (Light) / `#8b98a5` (Dark)
  - Surface Cards: `#ffffff` with subtle borders (`#e1e8ed` light / `#202731` dark)
- **Typography**: Clean pairings of `Space Grotesk` and `DM Sans` with monospace accents for code elements.

### Section Breakdown
1. **Header (`FloorgenHeader.tsx`)**:
   - Universal mobile drawer pattern across all viewport sizes.
   - FloorGen logo mark & candidate badge.
   - Quick navigation anchors: Overview, Pitch & Monorepo, 1:1 Alignment, Say Hi.
   - Direct header action: **`"CV"`** button linking to `/pdf/Chris_Dorward_CV.pdf`.
   - Theme toggle (`<ThemeToggle defaultTheme="light" />`) placed directly adjacent to the hamburger button.
   - Social sharing (WhatsApp, LinkedIn, X, copy link).
   - Strictly isolated: zero outbound links back to ListingsLab root except footer copyright.

2. **Hero & Recruiter Spotlight (`FloorgenHeroSection.tsx`)**:
   - Dynamic role badge: *"Engineering • Senior Full-Stack Engineer"*.
   - Animated `CleverText` headline: **`"FloorGen + Chris Dorward"`** (`style={{ fontFamily: "inherit" }}`).
   - Subheadline tagline: **`"TypeScript engine mastery, large-document React performance, offline sync, and enterprise Nx monorepo architecture."`**
   - Recruiter Spotlight Card ("What are you looking at?"):
     - Highlights AI-accelerated creation from a single specification prompt.
     - 2x2 Mandate Grid: Role (`"Senior Full-Stack Engineer"`), Location (`"UK Remote"`), Stack (`"TypeScript, React, Node, Nx"`), Focus (`"Editor Engine & MCP Sync"`).
     - Action CTAs: Primary **`"Say hi"`** (smooth scroll to enquiry), Secondary **`"Download CV (PDF)"`**, and prominent **`"View Prompt"`** button opening `public/floorgen/PROMPT.md` in a new tab.

3. **Code & Architecture Proof (`FloorgenPitchSection.tsx`)**:
   - Numbered proof points (`01`, `02`, `03`):
     - **01. Enterprise Monorepo Boundaries**: Proven structure in `goldlabelapps/nx`, isolating pure TypeScript core engines from UI frameworks.
     - **02. Complex Document Editing & Profiling**: Profiler-first habit keeping large trees responsive without jank or unnecessary re-renders.
     - **03. Agentic Tooling & MCP Integration**: Deep hands-on experience authoring MCP servers and deterministic tool schemas.
   - Live code/repository cards linking to GitHub monorepo and public npm packages.

4. **1:1 Alignment Matrix (`FloorgenAlignmentSection.tsx`)**:
   - Maps FloorGen's 5 exact requirements directly to proven candidate deliverables and production proof.
   - Interactive requirement toggle or structured comparative cards with checkmark verification chips.

5. **Enquiry & Contact (`FloorgenEnquiry.tsx`)**:
   - Matching typography: `text-3xl sm:text-4xl font-bold tracking-tight` with `<CleverText style={{ fontFamily: "inherit" }} />`.
   - Dual-routed email form submitting to `/api/notify/send` delivering to both `goldlabel.apps@gmail.com` and ListingsLab system (`DEFAULT_OWNER_EMAIL`) with confetti feedback.
   - One-click WhatsApp direct chat link pre-formatted for FloorGen engineering discussion (`+44 7745 763122`).
   - Direct email and phone fallbacks.

6. **Footer (`FloorgenFooter.tsx`)**:
   - FloorGen brand footer with direct candidate contact info, LinkedIn, GitHub.
   - References list featuring **`"Page Generation Prompt (PROMPT.md)"`** and **`"Download CV (PDF)"`**.
   - Universal copyright linking to `/`: **`"© 2026 Listingslab"`**.
   - Smooth scroll back to top.

---

## 4. Alignment Matrix: Job Description vs. Candidate Delivery

### Requirement 1: Build features end to end, from editing engine to Node API and React editor
> *"Work across all of FloorGen: the React editor, the Node server behind sync, the API and MCP server, and the pure TypeScript engine they share."*
- **Candidate Delivery**: 20+ years of full-stack engineering. Daily practice architecting clean layer boundaries between framework-agnostic TypeScript core logic and React presentation. Extensive experience building Node.js REST/WebSocket backends and authoring custom MCP servers that integrate external AI agents into active tool pipelines.

### Requirement 2: Fast, safe project sync between browser and server, offline included
> *"Keep project sync between the browser and the server fast and safe, offline included."*
- **Candidate Delivery**: Deep practical knowledge of optimistic UI updates, conflict-free document sync, indexed storage in IndexedDB/local storage, and background delta synchronization over WebSockets and resilient HTTP workers.

### Requirement 3: Request pipeline ownership, databases, and admin infrastructure
> *"Own parts of the request pipeline: validation, rate limits, sessions and the admin panel... Node.js services on a document database such as MongoDB: schemas, indexes and migrations."*
- **Candidate Delivery**: Production experience implementing Zod/JSON-schema request validation, token bucket rate limiters, session security, and database schema migrations across MongoDB, PostgreSQL, and document datastores. Architected scalable admin interfaces with telemetry and user management.

### Requirement 4: Test-first culture, profilers, and green suites
> *"Write the failing test first for every fix, and keep the type check, the dependency rules and the suite green. A habit of writing tests and reading a profiler before guessing."*
- **Candidate Delivery**: Strict TDD advocate. Rigorous automated test suites using Vitest, Jest, and Playwright for end-to-end flows. Extensive use of Chrome DevTools / React Profiler to eliminate frame drops, optimize layout thrashing, and memoize expensive spatial calculations before altering code.

### Requirement 5: Enterprise monorepo governance & remote communication
> *"Review code and keep the boundaries of the monorepo clear as it grows... Nx or pnpm monorepos... Clear written communication, since the role is remote."*
- **Candidate Delivery**: Main maintainer of enterprise Nx monorepos (`github.com/goldlabelapps/nx`), enforcing strict module boundary lint rules (`@nx/enforce-module-boundaries`), isolated package scopes, and automated CI pipelines. Two decades of transparent, async-first remote engineering.

---

## 5. Verification & Testing

Quality gates for the listing:

```bash
# 1. Run targeted Vitest suite verifying copy, CV link, PROMPT.md link, and spotlight card
pnpm test src/app/(recruitment)/floorgen/page.test.tsx

# 2. Targeted TypeScript compilation check
pnpm typecheck
```

Vitest assertions:
- `href="/floorgen/PROMPT.md"` exists in both Spotlight Card and Footer.
- `href="/pdf/Chris_Dorward_CV.pdf"` exists in Header, Drawer, Hero CTA, and Footer.
- Recruiter Spotlight property is labeled `"Role"` (not "Target Mandate").
- Contact section title matches section font styling.

---

## 6. How to Start the Conversation

- **Say hi on the live listing**: [listingslab.com/floorgen#say-hi](https://listingslab.com/floorgen#say-hi)
- **Direct Candidate Email**: `goldlabel.apps@gmail.com`
- **Direct Phone / WhatsApp**: `+44 7745 763122`
- **Candidate LinkedIn**: [linkedin.com/in/chris-dorward](https://www.linkedin.com/in/chris-dorward/)