IP Visualizer - Redis Hackathon submission
Tags: redishackathon, javascript, webdev
Published: 2022-08-16 11:51:00

### Overview of My Submission
IP visualizer is a tool for visualizing IP addresses on a map inside a selected area determined by a circle drawn by the user.

I got the inspiration for this project while I was working on a different project (closed source) and was researching the Redis possibilities, especially the ones tied to GEO stuff.

After finishing that project I noticed the post here on DEV about the Redis hackathon and got the idea to use the Redis GEORADIUS command to fetch IP-addresses (data provided by the MaxMind geolite2 database that I have worked with before on my [IpInfo project](https://ipinfo.karate.monster)) inside a circle and then visualize those IP-address on a map.

Frontend is built with Svelte (just for the simple reason i enjoy using Svelte). It uses MapLibre for the map, Deck.gl for data visualization and Pico.css for styling. I usually write all CSS by myself but I don't enjoy it, especially not when it comes to styling forms so here I wanted to save time and try something new and my choice was Pico.css


Backend is a Node Express API. It uses the following common modules.

- Helmet (security headers)
- Cors (cors support when developing)
- Joi (validation)
- Dotenv (configuration)
- Compression (gzip support)
- Express-async-errors(monkey patch routes so don't need try catch)
- Express-rate-limit(rate limiter)
- Rate-limit-redis (Redis store for express-rate-limit)
- Node-redis (Redis client)

The backend also have some modules I written myself for logging, error handling, etc...

The download scripts have a bunch of dependencies too.
- Download (download and extract files)
- Csv-reader (makes reading csv files ez)
- Fs-extra (makes file and directory handling easier)
- readline-sync (makes it ez to read user input)

Many of these dependencies are just to make development easier, for sure you can use native node features to read input, download files and so on but well, those libraries was made for a reason, simplify development and not having to "reinvent the wheel" every time.

### Submission Category: 
Wacky Wildcards

### Video explaining the project and how it works!
{% embed https://www.youtube.com/watch?v=20ycyDF81xg %}

### Language Used
JS/Node.js


### Link to Code

{% embed https://github.com/zoppatorsk/IP-visualizer %} 

### Additional Resources / Info
Location data is provided by [MaxMind](https://www.maxmind.com/)
The Map used is provided by [Carto](https://carto.com)

A big thanks to all the awesome developers out there creating libraries and tools so even persons like me can cobble together some projects.

### Screenshots

![heatmaplayer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9pwntdeyfvwmselmnl8.png)

![hexagonlayer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msaoe4fakk9dniuo3pf2.png)

### Collaborators
There is only me, myself and I. ;)


* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._