Wraithwatch

Wraithwatch is an innovative cybersecurity startup founded by a team of former SpaceX engineers.

Client

Wraithwatch’s mission is to identify and eliminate security breaches and vulnerabilities for their clients, thus ensuring the highest security level. The platform provides a clear and convenient interface that visually simplifies complex information about potential threats, their severity levels, and the status of their resolution.

For the past year, we have worked hand-in-hand with the talented Wraithwatch team to advance their front-end development. To bring our client’s ideas to life and achieve the best possible result, we utilized React and React Native services, which was a great experience for us.

Nik, Carlos, and Grace, the founders of the company, have been a strong support to our team throughout the year. Their extensive experience in the field made our collaboration particularly efficient and smooth. From the very beginning, all objectives were clearly defined, plus we regularly received feedback from them and took all their requests into account.

Goal

The primary objective of this project focused only on front-end development. We started this initiative by building the framework from scratch and then performed ongoing maintenance and a number of tasks to improve the quality of the product. Our work largely relied on the API developed by Carlos. We utilized its endpoints for efficient front-end implementation and integration.

The front-end of our application consists of several key components:

The analysis/decision/event tree – this element had to be programmatically developed with the use of Canvas. For that purpose, we utilized the react-konva library.

2. The 3D radar – the initial version of the radar displaying potential threats, was designed in 2D format with the react-konva library.

By clicking on a certain point, the user can access a Risk View window, which reveals in-depth information about specific threats and how they impact the overall system.

To improve the visual experience, we later upgraded this functionality to a 3D graph using the react-force-graph-3d library. This redesign allowed our end-clients to quickly visualize all relevant data in a 3D display.

We have also implemented the corresponding functionalities that extend the radar’s capabilities.

When hovering over a point, an Observation card is displayed. Clicking on it opens the Defense Feed, where the corresponding Observation is highlighted.

The same behavior occurs when clicking directly on a point.

– The Observations display is implemented as points on the radar.
– The distance of points from the center varies depending on the fix_plan_generation_percentage variable on the backend.
– Observations are displayed by sectors.

If the variable fix_plan_deployment_status === MANUAL_START_REQUIRED, the point blinks.
Sector names are displayed on the radar.

The next step was to introduce a support chat service into our system. By integrating it with the API, we extended the capabilities of the support service. In addition, we added a feature that made it possible to create multiple chat dialogs simultaneously.

The Integrations section is an important component of the site, designed to manage the integrations between Wraithwatch and various external services that might be connected to it

5. Environmental Graph – this is another alternative screen to the radar for cyber threat detection. It appears as a 3D cube made of lines, with objects (such as computers, users, etc.) positioned at the intersections.

Hovering over these objects displays an Info Box with detailed information.

When clicking on an object, it pops out of the cube, and related elements are displayed around it.

The cube has an option to hide the grid for a clearer view.

The component was developed using Three.js, much like numerous others in our project. The cube’s grid was developed using the InstancedBufferGeometry component.

However, this is only a small part of the work we have done for the project over the past few months. Our team has been working hard all this time to refine and improve the final product.

Result:

As a result, we boast a polished and effective product for our startup client, which B2B clients are using to fulfill their cyber security needs. .

At Digital Octane, we have been working with both startups and VC funds that support tech startups for a number of years, gaining extensive experience in the field. We handle front-end development, back-end development (when needed), project management, and QA ourselves, ensuring that clients can rest assured their work will be delivered on time and with high quality.

GET IN TOUCH