OctoDefender

Landing Page
Profile Page
Attack example
Shareable session/results page with team members or friends
Attack example
About Page
Simulating Attack with threejs

Inspiration

As a self-taught developer who only started learning HTML in January, I’ve spent the past year building project after project to learn by doing. Eventually, I got tired of building just for the sake of learning — I wanted to build something meaningful, something that could actually help people.

That’s when I discovered hackathons. I figured it would be the perfect opportunity to learn, create, and challenge myself — all at once.

When I joined this hackathon (almost at the deadline), I wanted to explore how people handle security online. I realized many users are careless with sensitive information simply because there aren’t easy or engaging ways to analyze or understand it.

That inspired me to build OctoDef, a platform that makes it easy — and even fun — to check how secure URLs, hashes, IP addresses, logs, and emails are, with an engaging Three.js interface to keep users interested while they learn about cybersecurity.

What I Built

OctoDef is a cybersecurity analysis web app that allows users to:

Analyze URLs, IPs, emails, and file hashes for potential threats
View real-time security results from multiple APIs
Log in securely using OAuth (Google, GitHub, Twitter)
Experience an interactive UI built with Three.js

🔗 Project Links

💻 GitHub Repository: OctoDef on GitHub
🌍 Live Demo: octodef.vercel.app
📖 About Page: octodef.vercel.app/about

⚙️ How I Built It

OctoDef was built with Next.js, my most recently learned framework. Since Next.js is full-stack, it made integrating multiple APIs and managing authentication straightforward.

Here’s a breakdown of the stack and APIs used:

Component	Tool / API
Framework	Next.js
Authentication	NextAuth.js (Google, GitHub, Twitter OAuth)
Database	MongoDB Atlas
UI & 3D Visualization	Three.js
Threat Scanning	VirusTotal API
IP Reputation	AbuseIPDB API
URL Safety	Google Safe Browsing API
Malware Analysis	Hybrid Analysis API
File Hash Lookup	MalShare API

What I Learned

How to integrate multiple cybersecurity APIs into a single unified platform
Handling Node.js modules inside Next.js environments
Implementing multi-provider OAuth authentication
Designing an engaging yet secure user experience
Understanding the balance between usability and security awareness

Challenges I Faced

“Every bug taught me something new.”

Node.js package compatibility in Next.js

Some Node packages didn’t behave the same way in browser/server environments.
I had to carefully separate backend logic into API routes and use environment variables effectively.

Time pressure

I joined close to the deadline, so planning and development had to happen fast.
Despite that, I managed to implement all the major features and polish the experience.

API rate limits and security keys

Managing multiple external APIs required careful handling of secrets and keys.

Closing Thoughts

Building OctoDef was a turning point for me as a developer. It combined everything I’ve learned so far — from frontend design to backend API integration — and helped me understand how security and creativity can work together.

Hackathons like this prove that you don’t have to be an expert to make something impactful — you just have to start.

Task List