01✦A Kognosys case study · Web app · Frontend rebuild
A procurementplatform, rebuilt to run.
“Turn supplier knowledge into smarter buying.”
Silex is France’s intelligent supplier-sourcing platform. Kognosys rebuilt the entire frontend — from a legacy JSF stack to Next.js — with a custom design system and a documented Storybook component library.
100+
Components in the design system
20+
Pages rebuilt in Next.js
~100×
Faster page loads
JSF → Next.js
Full frontend rebuild
02✦The product
Supplier knowledge, made usable.
Silex helps procurement teams source smarter — surfacing the right supplier information so buying is simpler and more responsible. These are the surfaces Kognosys rebuilt.
Intelligent supplier sourcing
Enriched supplier information helps teams select the most relevant suppliers fast — with compliance and transparency built in.
Alternative suppliers
Discover new suppliers and break single-source dependencies — with the confidence of competitive bidding.
Responsible purchasing (CSR)
Find socially responsible and local suppliers, and steer the CSR performance of every sourcing project.
Time saved on sourcing
Cut the time spent on sourcing through optimised workflows and automation.
Supplier risk management
Unify the supplier reference base for a 360° view — share knowledge across the organisation and limit risk.
Digitalised procurement
Digitalise the full purchasing process on a single platform — data- and AI-driven, from need to project tracking.
✦ Trusted across public & private sector
A reference in the French public sector, extending across private enterprise. Shown are Silex’s own published client references.
03✦Web app · Next.js
The same product, rebuilt frontend-up.
Every screen re-expressed in Next.js and React, drawing from one shared design system. These are the surfaces Kognosys rebuilt.
01
Supplier sourcing workspace
Search, filter and shortlist suppliers with enriched data.
02
Supplier 360° profile
A unified view of every supplier — risk, CSR, history.
03
Responsible purchasing
Steer CSR performance across sourcing projects.
04
Design system · Storybook
Every component documented, themed and tested in isolation.
Built on one shared design system — 100+ documented components in the live Silex app.
04✦The stack
Headline tech, nothing fussy.
A deliberately focused frontend stack — the kind a senior team can run in production, replacing a legacy JSF presentation layer.
Framework
Next.js
React framework — the rebuilt Silex web app.
UI
React
Component-driven interface across every screen.
Language
TypeScript
Typed end to end for safer refactors.
Foundation
Custom design system
Tokens, primitives & patterns — one source of truth.
Components
Storybook
Every component documented & tested in isolation.
Migrated from
Legacy JSF
The JavaServer Faces layer it replaced.
Headline frontend technologies only — the Java backend was preserved behind the API; the rebuild was frontend-up.
05✦Architecture
A decoupled frontend.
Two planes, kept distinct: the presentation plane was rebuilt in Next.js and powered by a shared design system; the services & data plane was preserved behind the API.
Clients
Browser
desktop · procurement teams
Legacy JSF
replaced presentation layer
Presentation plane
Next.js / React
rebuilt web app
Design system
tokens · primitives · patterns
Storybook
documented components
Services
Java backend
preserved · APIs unchanged
Data
PostgreSQL
system of record
“Frontend decoupled from the JSF monolith; one design system feeds every screen.”
06✦Outcome & impact
The rebuild, measured.
A full frontend rebuild, in production — measured where it counts.
100+
Components built into the design system.
20+
Pages rebuilt in Next.js.
~100×
Faster — load times cut from seconds to milliseconds.
Real figures from the rebuild: 100+ components across 20+ pages, with page loads roughly 100× faster — seconds reduced to milliseconds against the legacy JSF frontend.
Built & run by Kognosys
We’ve done this rebuild. In production.
Next.js, React, TypeScript, a custom design system and Storybook — replacing a legacy JSF stack. If you’re carrying a legacy frontend you need to modernise, let’s talk.