🌊 Hack The Future 2025 – Gotta Catch ’Em All!

Earlier today, I participated in Hack The Future 2025, organized by RMDY.
The challenge, “Gotta Catch ’Em All!”, asked us to build an AI-powered web application that could detect, register, and identify new species of sea life as part of an underwater exploration mission.

That idea became FishDex — a project that combines AI, secure web development, and a touch of creativity to map the unseen world beneath the surface.

We were proud to be nominated for our solution. Even though we didn’t take home a prize, the experience was incredibly rewarding and the day was packed with innovation, teamwork, and technical learning.

🧠 Concept – What is FishDex?

FishDex is a smart web application designed to help users identify, log, and learn about fish species through an intuitive, mobile-friendly interface.

Users can upload an image of a fish, and the system — powered by AI — will recognize the species and display details like:

• Habitat and water type
• Average size and depth range
• Conservation status
• Regional data and fun facts

Each detection is stored securely and linked to a “device,” creating a personal, persistent fish collection.

⚙️ How It Works

When a user uploads an image, the system communicates with a secure backend API written in TypeScript (Bun + Hono) with MongoDB as the database.
I developed the backend logic and API connections, while Andy De Schuytener designed and built the frontend using HTML, CSS, and JavaScript.

The backend handles:

• Image analysis – detecting and classifying fish species via OpenAI Vision
• Database enrichment – checking and linking sightings to the user’s collection
• Data delivery – serving structured JSON responses for seamless frontend integration

We also implemented security controls:

• Proper CORS configuration
• Input validation and file sanitization
• Per-device data sandboxing
• Request validation and logging middleware

Even a fish app deserves secure design. 🛡️

🧩 Under the Hood – Backend Architecture

The backend is a RESTful API under /api/..., built around three main entities:

• Device – represents a user’s context or device ID
• Fish – master data per species (name, environment, etc.)
• Device.fish[] – history of catches per device

Core Endpoints:

• POST /api/device/register – register a device
• GET /api/device/:id – retrieve device info
• POST /api/fish/upload – upload and detect a fish
• GET /api/fish/:deviceId – view all catches
• GET /api/fish/image/:imagePath – serve stored fish images
• POST /api/chat/:deviceId – chat with AI about detected fish

🐠 Image Upload Flow

When uploading:

1. Frontend sends form-data → image + deviceId
2. Backend validates and analyzes image via OpenAI Vision
3. If fish detected → enriched with species info via AI
4. Fish and metadata stored in MongoDB
5. Response sent back with detection confidence and stored path

The image storage was implemented securely:
images are saved under ./uploads/fish-images/<deviceId>/<timestamp>.jpg, and served through a sanitized route to prevent path traversal.

We had one minor GET image path issue near the end of the hackathon, but the rest of the app worked perfectly end-to-end.

💬 Chat Integration

One of our coolest features:
Users can chat with the AI about the fish they’ve discovered.

For example:

“Is this fish endangered?”
“Does this species live in deep water?”

The backend aggregates fish data for that user’s device, builds a context prompt, and queries OpenAI for an informed answer.

🖥️ Frontend Overview

The frontend was intentionally lightweight — built from scratch in HTML, CSS, and vanilla JS.
It feels like a mobile app, with pages like:

• Home (recent catches)
• Upload
• Details
• Chat
• Gallery

Each page dynamically loads through a minimal client-side router, keeping the UX fast and smooth without frameworks.

API calls are centralized in fetcher.js, making it easy to maintain endpoints.

🔒 Cybersecurity Meets Ecology

Our cybersecurity background shaped every decision:

• Sanitized file uploads to prevent malicious payloads
• Isolated device data for privacy
• Request validation at every step
• Consistent logging for traceability

The mindset is the same whether it’s a pentest or marine data — secure by design.

🌍 The Bigger Picture

FishDex proves that security and innovation can coexist.
Even in a project about marine life, cybersecurity principles make the difference between a fun demo and a trustworthy system.

By combining AI, TypeScript, and ethical design, we created something educational, technically strong, and secure.

🎥 Showcase

Watch our short demo showing FishDex in action:
👉 https://youtube.com/shorts/YWHSsJYfOWw?feature=share

👥 Team

• Backend & API Logic: Aaron Deceuninck
• Frontend & Design: Andy De Schuytener
• Organized by: RMDY at Hack The Future 2025

It was a day full of coding, learning, and creative exploration — and definitely not the last time I’ll mix AI with cybersecurity thinking.