ADC Visualization: 3D/2D Molecular Viewers on Next.js 16
Context
ADC (adc.arontier.co, live) is a web application for searching, exploring, and visualizing antibody-drug-conjugate data — DAR (Drug-Antibody Ratio) distributions, representative 3D structures, and related data. It shares the same Molstar + RDKit viewer stack as the AD3 platform, but ADC is a newer product designed from day one with that combination loaded route-scoped.
- A Molstar-based 3D protein-structure viewer and RDKit-based chemical-structure rendering, integrated into a popup/detail view
- The search page and conjugate detail pages built on Next.js 16 (App Router) with Tailwind CSS
- Selected internally as the pilot project for a Claude Code-based AI development workflow
What I did
1. Build the 3D/2D molecular viewers
Drilling from a search result into a conjugate's detail page opens a 3D structure popup, implemented with Molstar; chemical structure diagrams render through RDKit. Having already learned on AD3 that heavyweight scientific libraries can't ship on every route, ADC was designed from the start to load these viewers only on the routes that need them.
2. Establish Playwright as the E2E standard
Other internal products were running Cypress-based E2E tests, but ADC started on Playwright from day one. The conventions set here — playwright.config.ts, smoke-test tagging (@smoke) — became the reference when AD3 was later migrated from Cypress to Playwright.
3. Introduce a Claude Code-based test-generation workflow
Instead of hand-writing Playwright specs for every UI change, I introduced a workflow where Claude Code drafts E2E tests from the UI changes and a human reviews and refines them. It landed as a semi-automated workflow — AI handles the first draft of a spec, a person still verifies it — rather than a fully automated one.
Results
| Metric | Before | After | Change |
|---|---|---|---|
| E2E test framework | Cypress (existing standard elsewhere) | Playwright (ADC is the first standardized case) | standard established |
| E2E test authoring | Hand-written specs | Claude Code draft + human review | workflow adopted |
Because ADC was a smaller, newer project, it was a low-risk place to validate the Playwright conventions and the Claude Code test workflow before extending either to larger, higher-stakes internal projects.
Related
The story of first optimizing this same Molstar/RDKit viewer combination is in the AD3 platform case study; the shared internal CI/CD and test-reporting pipeline is covered in the DevSecOps pipeline case study.
Found this case study interesting?
Always up for a conversation — whether or not there's a project attached.