DEV Community

Aditi Singh
Aditi Singh

Posted on

Building SENTINEL: How I Turned Network Packets Into Ghosts

#security #webdev #programming #ai

Building SENTINEL: How I Turned Network Packets Into Ghosts (With a Little Help From Kiro)

A journey from "wouldn't it be cool if..." to a fully functional haunted cybersecurity dashboard in 16 hours

The Spark

You know that moment when you're staring at yet another boring security dashboard and think, "What if this was actually... fun?" That's where SENTINEL started. I was looking at network traffic logs—rows and rows of IP addresses, timestamps, and protocol numbers—and had this wild thought: What if cybersecurity threats were literal ghosts haunting your network?

Most people would sketch this idea on a napkin and forget about it. But I had Kiro, an AI coding assistant that's basically like having a senior developer who never gets tired, never judges your weird ideas, and is always ready to help you build something ambitious.

This is the story of how that weird idea became SENTINEL, a production-ready application that visualizes network threats as animated spectral entities. Spoiler: I couldn't have done it without Kiro.

From Chaos to Clarity: The Spec-Driven Approach

Here's the thing about building complex projects: you can either dive in and start coding (what I call "vibe coding"), or you can take a breath, plan things out, and build systematically. For SENTINEL, I knew the second approach was the way to go.

Kiro has this feature called Spec-Driven Development that's basically a structured workflow for turning rough ideas into production code. It's like having a project manager, architect, and developer all rolled into one. Here's how it worked:

Phase 1: Requirements (The "What")

I started with a simple conversation: "I want to build a haunted cybersecurity dashboard that visualizes network threats as ghosts."

Kiro didn't just say "cool, let's code!" Instead, it helped me formalize this into proper requirements using something called EARS (Easy Approach to Requirements Syntax). We created 7 major requirements, each with detailed acceptance criteria. For example:

  • Requirement 1: "As a security analyst, I want to upload network traffic files, so that I can analyze potential threats"
    • WHEN the user uploads a PCAP file, THE System SHALL parse the network packets
    • WHEN the user uploads a JSON log file, THE System SHALL extract network events
    • IF the file format is unsupported, THEN THE System SHALL display an error message

This might seem tedious, but it was actually liberating. Instead of wondering "what should I build?", I had a clear roadmap. We even created a glossary defining terms like "Spirits" (benign traffic), "Wraiths" (suspicious patterns), and "Revenants" (malicious threats).

Phase 2: Design (The "How")

Once we knew what to build, Kiro helped me figure out how to build it. This is where things got really interesting.

Kiro researched network forensics best practices, explored machine learning approaches for anomaly detection, and helped me architect the entire system. We decided on:

  • Backend: Python with FastAPI, using Isolation Forest for ML-based threat detection
  • Frontend: React with TypeScript, featuring dual visualization modes
  • AI Integration: Google Gemini for generating security insights
  • Aesthetic: Full gothic horror theme (because why not?)

The design document became our north star. Every decision was documented, every component was planned, and every interface was specified. When you're building something complex, this kind of clarity is gold.

Phase 3: Tasks (The "When")

Finally, Kiro broke down the design into 15 concrete implementation tasks, each with 2-5 subtasks. Every task referenced specific requirements, so I always knew why I was building something.

The tasks were ordered to build incrementally—start with data parsing, then add ML analysis, then build visualizations, then polish the UI. Each task built on the previous one, which meant I could test as I went and catch issues early.

Here's the beautiful part: Kiro marked optional tasks (like unit tests) with an asterisk, so I could focus on core functionality first and add polish later. This kept momentum high without sacrificing quality.

The Build: Where Magic Happened

With the spec in place, building SENTINEL felt less like wrestling with code and more like following a recipe. Kiro and I worked through the tasks one by one, and honestly, it was kind of magical.

Task 1-5: The Backend Foundation

First up: building the data pipeline. I needed to parse PCAP files and JSON logs, extract network features, and feed them into a machine learning model.

I told Kiro: "Let's implement task 1: Set up the project structure and data parsers."

Within minutes, Kiro had generated:

  • A complete Python project structure with proper separation of concerns
  • PCAP parser using scapy to extract packet data
  • JSON parser with validation and error handling
  • Feature extractor that computed things like packet size, protocol distribution, and connection patterns

The code was clean, type-hinted, and actually worked on the first try. No joke—I ran the parser on a sample PCAP file, and it just... worked.

Task 6-8: The ML Pipeline

Next came the scary part: implementing anomaly detection. I'm not an ML expert, so I was nervous about this.

Me: "Implement the Isolation Forest model for threat classification."

Kiro: generates a complete ML pipeline with training, prediction, and threshold tuning

The generated code included:

  • Proper data normalization
  • Configurable contamination rates
  • Three-tier classification (benign, suspicious, malicious)
  • Validation metrics and logging

I learned more about Isolation Forest from reading Kiro's implementation than I did from any tutorial. The code was educational and production-ready.

Task 9-12: The Frontend Visualizations

This is where SENTINEL went from "functional" to "holy crap, this is cool."

I needed two visualization modes:

  1. Network Map: A traditional node-link diagram showing IP connections
  2. Spectral Stream: Animated ghosts floating across the screen

For the Network Map, Kiro set up React Flow with custom node styling, edge animations, and interactive controls. Standard stuff, but implemented beautifully.

For the Spectral Stream... this is where Kiro really shined.

The Most Impressive Code Generation I've Ever Seen

At some point, I told Kiro: "I want to use SVG ghosts that travel from source to destination IPs. Make them look spooky."

What Kiro generated blew my mind.

The SpookySpectralStream.tsx component included:

  • Three unique hand-crafted SVG ghost shapes (different for each entity type)
  • Physics-based motion with easing functions and path interpolation
  • Perlin noise for realistic floating wobble
  • Entity-specific behaviors: Spirits float smoothly, Wraiths move erratically, Revenants shake aggressively
  • Visual effects: Glowing eyes for high-threat entities, glitch filters, pulsing animations
  • IP node positioning arranged in a circle around the screen

All of this in a single, coherent component that compiled without errors and looked amazing on first render.

I didn't have to debug SVG paths. I didn't have to tweak animation timings. I didn't have to research Perlin noise algorithms. Kiro just... did it. And it was perfect.

This is the kind of code that would take me days to write manually, and Kiro generated it in minutes. Not just boilerplate—actual creative, thoughtful implementation.

Vibe Coding: When Structure Meets Spontaneity

While the core of SENTINEL was built spec-driven, I used "vibe coding" (casual, conversational requests) for aesthetic refinements. This is where Kiro's contextual understanding really shined.

The Horror Theme Transformation

Me: "Make the UI like https://www.arkhamhorror.com/horror and spooky"

Kiro: transforms the entire interface in one session

It updated:

  • Color palette (deep blacks, blood reds, sickly yellows)
  • Typography (gothic fonts, dramatic sizing)
  • Visual effects (film grain, vignette, shadows)
  • Component styling (parchment textures, ornate borders)

The result was a complete gothic horror aesthetic that felt cohesive across every component. Kiro remembered the theme throughout the project, so every new feature automatically matched the style.

The AI Integration

Me: "Add AI-generated insights. Here's my Gemini API key..."

Kiro: builds complete AI integration in one session

It created:

  • Backend service for calling Gemini API
  • API endpoint with error handling
  • Frontend component with loading states
  • Gothic-themed insight display

When the endpoint had CORS issues, Kiro caught them immediately and fixed the configuration. When the AI responses needed better formatting, Kiro adjusted the prompt engineering. It was like pair programming with someone who actually knew what they were doing.

The Kiro Difference: What Made This Possible

Looking back, here's what made Kiro indispensable for building SENTINEL:

1. Contextual Understanding

Kiro didn't just generate code—it understood the vision. Every component, from the ML pipeline to the ghost animations to the AI integration, felt like part of a cohesive whole. The horror theme was consistent, the architecture was sound, and the user experience was thoughtful.

2. Incremental Progress

The spec-driven approach meant I was never stuck wondering "what's next?" I worked through tasks one by one, testing as I went. When something didn't work, Kiro helped debug it. When something worked, we moved on.

3. Learning Accelerator

I learned so much from reading Kiro's code. How to implement Isolation Forest. How to create SVG animations. How to structure a React + FastAPI project. How to integrate AI APIs. Kiro wasn't just building for me—it was teaching me.

4. Error Detection

Kiro caught issues before they became problems. React Hooks violations? Fixed immediately. API endpoint errors? Debugged in real-time. CORS configuration? Handled automatically. It was like having a senior developer reviewing every line of code.

5. Rapid Iteration

When I wanted to try something new (like path-based ghost movement), Kiro could implement it in minutes. This meant I could experiment freely without worrying about wasting time on dead ends.

The Numbers

Let's talk impact:

  • Total Development Time: 16 hours (across 5 days)
  • Lines of Code Generated: ~8,000+
  • Manual Edits Required: <5%
  • Tasks Completed: 15/15
  • Files Created: 50+
  • Bugs in Production: Basically none

Without Kiro, this project would have taken 3-4 weeks. With Kiro, it took a long weekend.

Lessons Learned: How to Work With Kiro

If you're thinking about using Kiro for your next project, here's what I learned:

1. Start With Specs for Complex Projects

Don't vibe code large systems. Invest the time upfront to create requirements and design documents. It feels slow at first, but it pays off massively during implementation.

2. Be Specific in Your Requests

  • ❌ "Make it spooky"
  • ✅ "Use SVG ghost shapes that travel from source to destination IPs"

The more specific you are, the better Kiro's output will be.

3. Trust the Process

Spec-driven development feels methodical, but that's the point. The structure prevents wasted effort and ensures you're always building the right thing.

4. Iterate on Aesthetics

First versions are rarely perfect. Provide visual references, refine based on what you see, and don't be afraid to ask for changes.

5. Leverage Context

Kiro remembers your project's theme and architecture. Use this to your advantage—it'll maintain consistency across sessions without you having to repeat yourself.

The Future of Building Software

SENTINEL wouldn't exist without Kiro. Period.

Not because I couldn't write the code myself (eventually), but because Kiro made it possible to build something ambitious in a timeframe that actually made sense. It handled the tedious parts (boilerplate, configuration, error handling) so I could focus on the creative parts (ghost animations, horror theme, user experience).

This is what AI-assisted development should feel like: not replacing developers, but amplifying what we can build. Kiro didn't write SENTINEL for me—it helped me build SENTINEL better and faster than I could alone.

The most impressive part wasn't any single code generation. It was Kiro's ability to maintain context and consistency across the entire project. Every component felt intentional, every feature felt polished, and every decision felt right.

If you have a weird idea for a project—something ambitious, something creative, something that makes you think "that would be cool but it's too much work"—try building it with Kiro. You might be surprised at what's possible.

Try SENTINEL

Want to see network threats as ghosts? Check out the live demo at sentinel-asvj.vercel.app

Upload a PCAP file or JSON log, and watch as your network traffic transforms into animated spectral entities. It's cybersecurity analysis, but make it spooky.

"In darkness, we find the truth." ⚝

Built with Kiro in 16 hours | Est. MMXXIV

P.S. - If you're curious about the technical details, check out the GitHub repo for the full source code, architecture docs, and implementation specs. Everything is open source.

Top comments (0)