Planning
- Originally selected an API oriented toward insider-trading signals that could not support the project goals.
- Transitioned the product direction to PhishStats as the phishing threat data source.
Global Phishing Threat Tracker
ShowMeTheVillain
A cybersecurity visualization platform that maps phishing activity around the world using a Plotly density map, interactive filters, a FastAPI backend, and a Cloudflare-based static demo path.
Project Phases
The project evolved from an early data-source pivot into a shipped map and API stack documented in the ShowMeTheVillain repository: a Plotly map, FastAPI services, and Cloudflare Pages / Worker deployment.
Phase 1 (Alpha)
- Designed the Cloudflare D1 database and table schema.
- Built an API handler using PhishStats to ingest data into D1.
- Created an initial Plotly heatmap visualization.
Phase 2 (Final Project)
- Fixed bugs uncovered during integration and demo prep.
- Implemented real backend → frontend pipelines (e.g. map-point JSON from FastAPI to the browser).
- Published the live site at showmethevillian.pages.dev.
Team Contributions
Members names and contributions. ★ represents team leader.
★ Bryon Cobb ★
- Designed the initial architecture of the project
- Implemented the MApplot heat hmap, and designed the worker to deploy static site
Tom Lovesee
- Database Management
- Test Case Creation & Integration
Ethan Christman
- API Handling Algorithm
- Presentation Creation
Matthew Kabat
- Database to front end converstion
- Sorting and streaming data
Member Reflections
Each team member reflected on what they found interesting, what was challenging, and what they worked on across planning, Phase 1 (Alpha), and Phase 2 (Final Project).
Bryon Cobb
What I found interesting
How different technologies can work together in a cohesive project, and how quickly complexity can grow in a seemingly simply project
What I found hard
Learning how to manage CLoudflare workers, and wrangler
Phase 1 Work
Setup the initial Repo, and implemented the frontend logic, and a working UI, also designed the CI/CD process
Phase 2 Work
Optomized for read rights when struggling with the constraints in the Cloudflare free tier.
Tom Lovesee
What I found interesting
Learning about how apis work and their role in data retrieval as well as the importance of proper error handling.
What I found hard
Learning new technologies like cloudflare and GitHub and frameworks to implement a full stack website.
Phase 1 Work
Setup Cloudflare to prepare for web hosting as well as worker and database implementation on cloudflare's end.
Phase 2 Work
Generating test cases and integrating them into the backend to test our site's functionality.
Ethan Christman
What I found interesting
Learning how Bryon setup GitHub permissions as well as the linking of data between cloudflare, our algorithm, and the client site.
What I found hard
Handling multiple differing syntax styles, project management styles, hierarchical structuring, and planning processes.
Phase 1 Work
PhishStats API handler algorithm and configuration.
Phase 2 Work
Configuring Cloudflare workers for CRON jobs for API calls and Project Presentation creation.
Matthew Kabat
What I found interesting
Seeing python serverbackend intigration with typescript front end
What I found hard
Use of typescript, it was a brand-new language for me and starting with language interopt was difficult
Phase 1 Work
Created dataclasses and functions to handle database information
Phase 2 Work
Sorting of dataclass information and converting that into json objects for front end rendering
Major Challenges
Throughout the project, the team had to solve several technical and organizational challenges while moving from the original concept into a deployed phishing threat visualization platform.
Integrating a Serverless Architecture
- Designed the project around Cloudflare Pages, Workers, and D1 instead of a traditional always-running server.
- Balanced the FastAPI backend approach with Cloudflare's serverless deployment path for the final demo.
- Had to think carefully about where data should be fetched, stored, cached, and served to the frontend.
Learning New Technologies
- Learned how Cloudflare hosting, Workers, D1, GitHub, and static website deployment fit together.
- Adjusted to new tooling, permissions, repository workflows, and deployment steps while building the application.
- Connected multiple parts of the stack so the site, backend, database, and source control worked as one system.
Refactoring Code for Automation
- Broke larger functions and methods into smaller classes and service-style components.
- Separated responsibilities so API handling, caching, data conversion, and frontend delivery were easier to test and maintain.
- Converted recurring data-refresh behavior into CRON-style automation through Cloudflare Workers.
System Architecture Overview
ShowMeTheVillain uses a layered architecture: the browser renders the map, the backend prepares clean phishing records, and the deployment layer supports both dynamic and static demo modes.
Presentation Layer
Static Web UI
Plotly map, toolbar filters, status text, and demo controls.
→
API Layer
FastAPI / Worker
Serves normalized map-point JSON to the browser.
→
Data Layer
PhishStats / D1
External phishing data source plus cached or persisted records.
Browser
├─ loads static HTML/CSS/JS
├─ requests map-point JSON
└─ filters incidents client-side
FastAPI Backend
├─ routes/phishing.py
├─ services/phishing_service.py
├─ services/cache_service.py
└─ api_client.py
Cloudflare Path
├─ Pages hosts static site
├─ Worker serves demo/map JSON
└─ D1 stores phishing recordsData Pipeline & Deployment
1
Collect
Phishing data is pulled from the upstream source or served from the Cloudflare worker path.
2
Normalize
Records are converted into a consistent map-point format containing lat, lon, intensity, threat level, company, country, and ISP.
3
Cache
Caching reduces repeated external API calls and keeps demos responsive.
4
Visualize
The browser fetches one batch of rows and applies filters client-side for fast interaction.