PT

Nº 04of 22Featured

TECNA Portal

TECNA's internal super app on Next.js 16: four new systems of mine — Quality with an offline field screen, Planning with critical path, Safety and Project Management —, the homeowner's manual and the website's CMS

Year
2026
Status
LIVE
Role
Full-stack · IOTech team
Stack
Next.js 16 · React 19 · TypeScript · Drizzle ORM +7
portal-tecna
TP

Next.js 16

No public screen — generated cover

01The project

The TECNA Portal puts the builder's internal systems behind a single login — post-handover support, the client portal, personnel administration, procurement, the homeowner's manual and the commercial website's CMS —, in one Next.js 16 / React 19 app with one deploy and one PostgreSQL database, through Drizzle. It is a team project at IOTech, in a private repository: of the 1,288 commits, 256 are mine, from late August to October 2026. What is mine: 118 commits in the homeowner's manual module, the four new systems — Quality, Planning, Safety and Project Management — and the “Site Institucional” CMS that feeds TECNA's commercial website.

02What was built

  1. Quality: the field screen works with no signal — the whole inspection lives in IndexedDB before it touches the network, a service worker reopens the screen offline, and the queue (create, answers, files, complete) only drains on the server's confirmation, capped at 3 MB

  2. Resending without duplicates: the inspection is created with the id generated on the device (the same body again returns 200 with created: false; the same id on another checklist, 409), attachments are deduplicated by clientId, and an older answer never overwrites a newer one

  3. Planning: the schedule calculation is a pure function shared by the server and the on-screen preview — business days, predecessors (the latest one wins), cycles rejected, actual delay and critical path — and the Gantt shows the baseline

  4. Homeowner's manual: the development's board exported to PDF and Excel, and four optimizations of mine — one query per development instead of one per unit, the logo embedded once per PDF instead of per page, the record list without pulling every record's text, and the second PDF of the same development coming out instantly

  5. “Site Institucional” CMS: tabs per page of the commercial website, per-section saving that never wipes another section's edits, post HTML sanitized by a closed allowlist, and batched LLM auto-translation that never overwrites what someone is typing

03Decisions

Decision 01

Question: How does a quality inspection survive a construction site with no signal?

Answer: By treating the network as the part that fails. Everything is written to the device first; sending is an ordered queue that only drops a step when the server confirms — a dropped network, 5xx and 401 stop and keep. On the other side, every route accepts the same request twice without duplicating, because the queue WILL resend: the inspection is born with the device's id and each attachment carries its clientId.

Decision 02

Question: What is mine in a 1,288-commit system?

Answer: It is a team project, and most of the commits belong to other people. What I claim is what the history confirms under my name — the homeowner's manual, the four new systems and the website's CMS. Login, the hub, post-handover support and the client portal are here as context, not as authorship.

04Stack

  • Next.js 16
  • React 19
  • TypeScript
  • Drizzle ORM
  • PostgreSQL
  • Zod
  • IndexedDB
  • Service Worker
  • Vitest
  • Playwright
  • Vercel
Next project →Nº 05

RAG assistant: daily ingestion on GitHub Actions, vector search in Postgres with pgvector, and retrieval-grounded answers