Modernise the client
React and TypeScript replace the existing presentation layer to build screens and interactions.
All projects
Case study / 04 — Coursework · EMF
NetViewer.
Modernising the interface of a network configuration tool.
Contribution
Frontend redesign and backend contributions
Context
Internal EMF project · Jan. — May 2024
Technologies
React · TypeScript · Java / JAX-RS · MariaDB
NETVIEWER / REDESIGN
Java EEServlets / JSP
React + TypeScriptNew interface
API JAX-RSExisting backend
Explanatory diagram · internal EMF project
01 / The starting point
The starting point
NetViewer lets EMF teachers prepare and deploy network configurations in classrooms. They can group students into VLANs and manage their Internet access.
02 / My contribution
My contribution
I contributed to the technical and visual redesign of this internal project. My main task was to replace the Java EE client, built with Servlets and JSP, with a React and TypeScript interface. I also contributed improvements to the existing backend.
03 / Technical decisions
Keep the backend
The API stays on JAX-RS. The frontend redesign therefore works within the existing application architecture.
Focus on the actual workflow
The interface supports teachers’ tasks: preparing configurations and applying them to classroom workstations.
NETVIEWER / WORKFLOW
TeacherPrepare
ConfigurationDeploy
ClassroomVLANs
Explanatory diagram · internal EMF project
04 / A practical challenge
A practical challenge
Updating the technology and design while retaining the functions of an existing internal tool. The new client needed to communicate with the API and represent network configurations correctly.
05 / The result
The result
A redesigned React and TypeScript frontend, with contributions to the JAX-RS backend. As this is an internal EMF project, this case study describes its context and architecture without a public demo.
Internal EMF project