Security Events UI for scworld.com
NEXUS needed a public face: FlexibleTable, SingleEventCard, MetricsSummaryCards and related components with 7 Storybook stories and 13 tests — powering product, vendor and event routes with aggregated getStaticProps.
Client context
CRA launched /security-events on scworld.com to expose vulnerabilities, affected products, patch status and vendor context from the NEXUS graph.
Challenge
Same data must render on product, vendor, event, search and live-feed contexts without duplicating UI logic; SEO and meta per dynamic route.
What we did
- Five core components with typed props and configurable columns/cells.
- Three getStaticProps pipelines aggregating API data and SEO meta.
- Storybook + React Testing Library coverage; util-component catalog expansion.
- Integration with NEXUS security-events API slugs.
Process
- Component API design against real NEXUS payloads.
- Page assembly and static generation.
- Visual and snapshot testing.
- Staging QA with 30+ filter URL cases.
Result and impact
One FlexibleTable replaces four table variants; SingleEventCard reused in search, recent and live feeds; faster frontend delivery via contract-first API.
This is an NDA-protected engagement. Client name and identifying details are withheld; industry, region, challenge, solution and outcome are shared in an approved form.
We build pages from blocks now — not one-off tables each sprint.Frontend lead (quote representative, under NDA)