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 includes several key components:

The analysis/decision/event tree was built using Canvas and react-konva, enabling dynamic and interactive decision-making visuals.

2. The 3D radar initially displayed potential threats in 2D format. It was also built using the react-konva library, providing a simple yet functional overview of system risks.

By clicking on a point, users can access a Risk View window. This view reveals detailed information about specific threats and their impact on the overall system, helping clients understand the situation quickly.

We upgraded the radar to a 3D graph using the react-force-graph-3d library, improving visuals and adding interactive features.

Hovering over a point shows an Observation card, and clicking it opens the Defense Feed.

The same logic applies when clicking on a point. Observations are represented as points on the radar, and their distance from the center varies based on the fix_plan_generation_percentage variable from the backend. Observations are displayed by sectors for clarity.

If the variable fix_plan_deployment_status === MANUAL_START_REQUIRED, the points blink to signal attention.
Sector names are also displayed on the radar for easier orientation.

Next, we introduced a support chat service into the system. By integrating it with the API, we extended the service’s capabilities. We also added a feature allowing multiple chat dialogs to be open simultaneously.

The Integrations section is an important part of the site. It manages the connections between Wraithwatch and various external services that might be linked, ensuring smooth data flow across the platform.

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 any object reveals an Info Box with detailed information about that element. This feature allows users to explore individual system components, understand their purpose, and see how they relate to other parts of the system.

When clicking on an object, it pops out of the cube, revealing related elements around it. This interaction helps users see the relationships between components and understand their connections within the system.

The cube has an option to hide the grid for a clearer view. This makes it easier to focus on the objects and their interactions without visual distractions, improving overall readability and analysis.

The component was developed using Three.js, like many other parts of our project. The cube’s grid was developed using the InstancedBufferGeometry component.

As a result, we delivered a polished and effective product for our startup client, now used by B2B customers to address their cyber security needs. At Digital Octane, we manage front-end and back-end development, project management, and QA, ensuring high-quality delivery on time.

GET IN TOUCH