Project Description
- The Sextant Networking Dashboard is a single-page application meant to assist field technicians with their day-to-day tasks.
- This web application uses React for the frontend to display the user’s public IP addresses (both ipv4 and ipv6) and the packet latency associated with a service called Pylon.
- The user's public IP addresses are fetched from the ipify API and the packet latency can be streamed using WebSocket connections.
Overview
- Designing the Sextant Frontend
- Created a banner component at the top of the page which displays the site’s title.
- Created an exhibit component that displays a heading.
- Created child components which wrap the components to logically separate different data points.
- Displaying the User's Public IP
- Created a new component to collect and display the user’s public IP addresses.
- The component makes an HTTP request to the ipify API as soon as it is mounted and surface the resultant data to the user.
- The component accepts a prop that determines whether it requests an ipv4 address or an ipv6 address.
- Added two instances of this component to the page, both wrapped in an exhibit component from the last task.
- One displays the user’s ipv4 address, and the other displays the user’s ipv6 address.
- Streaming Data from a Networked Service
- Created a new React Component, which displays packet latency from Pylon.
- Added the component to my React app, living inside an Exhibit.
Ticket Result
Using VPN to hide personal IP addresses
Language & Tools
- JavaScript (React)
- HTML/CSS
- ipify API
- WebSocket
- Pylon
