Skip to content

anthowen/honeydb-viz-snowpack-demo

Repository files navigation

Netlify Status

HoneyDB Vulnerability Data Visualization

✨ Bootstrapped with Create Snowpack App (CSA).

Live URL: https://honeydb-viz.netlify.app/

Tech stack:

  • snowpack to leverage modern web
  • TypeScript for sane development
  • Tailwind technologies as they are just awesome
  • @reach/router for convenient, accssible routing
  • react-query for server state management
  • react-table for table management
  • react-simple-maps for map viz

Why Snowpack?

Now, it's time for the modern web, where 95% of web traffic are from the modern web browsers that natively support ESM.

I've chosen snowpack instead of create-react-app to have a deep DX on the lightning-fast build, designed for the modern web. Snowpack is packed with rollup and esbuild under the hood, which is 10-100x faster than other bundlers like webpack or parcel.

On top of this, one thing made me excited and fascinated is the snowpack's experimental NO more NODE_MODULES feature, which is about importing 3rd-party libraries directly from the Skypack CDN like deno.

Though it was challening (There's still a known issue), but I really loved building all this from scratch, and it helped me gain great experiences with the modern web world.

About HoneyDB

HoneyDB provides real time data of honeypot activity. This data comes from honeypot sensors deployed globally on the Internet.

Features

  • Bad Hosts page

    This page renders the zoomable map from the vulnerability csv data fetched from one of my other repo. (There is a description in the page)

  • Twitter Threat Feed page

    This page renders the IP list data in a paginated table format. (There is a description in the page)

  • Threat Tweets page

    This page renders the list of tweets that reported the certain IP address provided via URL.

  • Declarative, reponsive menu bar (Dropdown menu is just a placeholder)

  • Mobile-friendly website

Tests

  • Unit tests of App, Header, and Navbar components

  • Integration test for useTwThreatFeed custom hook that feeds data into UI component

Available Scripts

yarn start

Runs the app in the development mode. Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

yarn build

Builds a static copy of your site to the build/ folder. Your app is ready to be deployed!

For the best production performance: Add a build bundler plugin like "@snowpack/plugin-webpack" to your snowpack.config.js config file.

yarn test

Goes through the Jest tests of the project. Do yarn test:watch to run in interactive watch mode.