DEV Community: Felix

Hello communities! Sharing my recent hackathon journey.

Felix — Tue, 03 Mar 2026 17:00:20 +0000

From Hackathon Hustle to Gemini Glory: My SyncroFlow Journey

Felix ・ Mar 3

#geminireflections

From Hackathon Hustle to Gemini Glory: My SyncroFlow Journey

Felix — Tue, 03 Mar 2026 16:54:07 +0000

This is a submission for the Built with Google Gemini: Writing Challenge

From Hackathon Hustle to Gemini Glory: My SyncroFlow Journey

The Spark: Ant Media Hackathon and a Vision for AI

It all started with the adrenaline-fueled chaos of the Ant Media Hackathon. The air buzzed with caffeine, code, and the collective ambition of developers eager to build something impactful. My goal? To create a visual logic engine that could transform complex AI video pipelines into intuitive, drag-and-drop nodes. This vision became SyncroFlow, and at its heart, powering the intelligence, was Google Gemini.

FelixMatrixar / SyncroFlow

Your Camera Copilot AI

SyncroFlow

Demo Video

A visual logic engine for real-time video intelligence that transforms complex AI video pipelines into simple, drag-and-drop nodes using ultra-low latency WebRTC streaming.

Overview

SyncroFlow enables users to build custom computer vision and AI monitoring tools in seconds without requiring weeks of development. It combines drag-and-drop visual programming with AI-powered video analysis capabilities.

Core Features

Drag-and-Drop Editor: React Flow-based visual interface for intuitive AI pipeline creation
Ultra-Low Latency Video: Sub-500ms WebRTC streaming via Ant Media Server integration
Temporal AI Monitoring: Rolling frame buffers for action understanding over time
Multi-Source Inputs: Support for webcams, MP4 files, screen shares, and RTMP streams
No-Code Automation: Trigger real-world events based on AI analysis conditions

Technology Stack

Frontend: React 18, Vite, React Flow, Tailwind CSS Backend API: Node.js / Express AI/Vision Backend: Python, FastAPI, YOLOv8 Video Infrastructure: Ant Media Server, WebRTC, RTMP AI…

View on GitHub

What's even more remarkable is that the very spark for SyncroFlow was ignited by Google Gemini itself. It wasn't just a tool I used to build, it was the partner that helped me think of the solution in the first place. This "full circle" moment, where Gemini helped me identify the problem and then provided the means to solve it, was a powerful testament to its potential as a creative and analytical partner.

SyncroFlow: Your Camera Copilot AI

SyncroFlow is a real-time video intelligence platform designed to empower users to build custom computer vision and AI monitoring tools in seconds, without needing weeks of development. Imagine a drag-and-drop interface where you can connect nodes to detect objects, analyze human poses, and even transcribe audio, all streaming with ultra-low latency via WebRTC.

The Role of Google Gemini

Google Gemini, accessed through the OpenRouter API, was the brain behind SyncroFlow's analytical capabilities. Specifically, I leveraged google/gemini-2.5-flash for both visual and audio analysis. This allowed SyncroFlow to:

Perform AI analysis on detected objects and scenes: Users could prompt Gemini to describe what to analyze in detected objects or scenes, even incorporating motion context (e.g., "is the boat stationary now?").
Transcribe real-time audio: For audio-based flows, Gemini powered real-time microphone speech-to-text, enabling voice-activated triggers and transcription for meeting notes or voice memos.

This integration was crucial. It meant that SyncroFlow wasn't just about detecting things... it was about understanding and interpreting them, bringing a new layer of intelligence to real-time video streams.

What's even more remarkable is that a significant portion of SyncroFlow's codebase: from the frontend and backend logic to the intricate AI integration WAS ALL generated with the assistance of Gemini 3 Pro. It felt like having an incredibly powerful co-pilot, accelerating development and allowing me to focus on the higher-level architecture and innovative features. Gemini 3 Pro truly carried the project, demonstrating its impressive capabilities in full-stack code generation.

The Hackathon Rollercoaster: A Memorable Ride

Building SyncroFlow during the hackathon was an intense, exhilarating, and sometimes bewildering experience. There were moments of pure triumph and moments where I felt like Patrick Star trying to understand advanced calculus.

The "I'm Ready!" Phase

Initially, I was all enthusiasm, ready to conquer the world with code. The idea of building a visual AI pipeline editor felt revolutionary, and I was eager to dive in.

The Deep Dive into Code

As I delved into the intricacies of WebRTC, FastAPI, YOLOv8, and integrating the Gemini API, the complexity started to sink in. There were countless lines of code, configurations, and debugging sessions. It felt like navigating a maze, but every successful connection and every working feature was a small victory.

The "Feeling Lost in Life" Moments

Of course, no hackathon is complete without those moments of despair. Bugs that seemed impossible to fix, unexpected API errors, and the relentless ticking clock. There were times I stared at my screen, feeling utterly lost, wondering if I'd ever make it work.

The Breakthrough and the Final Push

But then, a breakthrough! A line of code clicked, an API call finally returned the expected data, and suddenly, SyncroFlow started to come alive. The final hours were a blur of frantic coding, testing, and polishing. The satisfaction of seeing the pieces come together was immense.

The Presentation: Nerves and the "Finalist" Hunger

Then came the presentation phase. The culmination of all the sleepless nights and intense coding, it was a moment filled with both anticipation and a healthy dose of anxiety. Standing before the judges, presenting SyncroFlow, felt like a true test of fire.

I'll be honest: I didn't take home the top prize. I ended up as a finalist, standing on the podium but not quite reaching the gold. In that moment, it felt like a sting. IT IS the "so close, yet so far" sensation that every builder knows all too well.

But looking back, that "loss" was actually my biggest win. It gave me the "finalist's hunger", the drive to keep refining, keep building, and keep pushing the boundaries of what's possible with AI. The real victory wasn't a trophy... it was the realization that I had built a sophisticated, real-time AI engine from scratch, powered by a tool that 7 out of 10 of my fellow finalists also chose for its incredible cost-effectiveness and performance.

What I Learned

The hackathon and the development of SyncroFlow were a steep learning curve. Technically, I deepened my understanding of:

Real-time video streaming with WebRTC and Ant Media Server: Mastering the nuances of low-latency video infrastructure was critical.
FastAPI and Python backend development: Building a robust and scalable API for AI inference.
Integrating large language models (LLMs) for multimodal analysis: Understanding how to effectively use Gemini for both visual and audio data.
Frontend development with React Flow: Creating an intuitive drag-and-drop interface for complex workflows.

Beyond the technical skills, I also honed my problem-solving abilities, learned to work efficiently under tight deadlines, and experienced the power of rapid prototyping.

My Google Gemini Feedback

Working with Google Gemini through the OpenRouter API was largely a positive experience. The google/gemini-2.5-flash model proved to be incredibly versatile for both visual and audio analysis tasks. Its ability to interpret prompts and provide relevant insights from diverse data types was impressive.

What worked well:

Multimodal capabilities: The seamless integration of visual and audio processing within a single model was a game-changer for SyncroFlow, allowing for truly intelligent video analysis.
Flexibility via OpenRouter: Accessing Gemini through OpenRouter provided flexibility in model selection and simplified API interactions.
Speed and responsiveness: For real-time applications like SyncroFlow, the speed of Gemini's responses was crucial and generally met the demands.
Gemini 3 Pro for code generation: The ability of Gemini 3 Pro to generate significant portions of the frontend, backend, and AI integration code was a massive accelerator. It allowed for rapid iteration and a focus on core innovation rather than boilerplate.

However, I need to report a major friction point. The safety filters are way too aggressive. I keep getting hit with "inappropriate" flags on entirely safe prompts. It is incredibly frustrating.

I know why Gemini must have these filters. They have to stop fraud, malicious use, and bad actors. I respect that boundary.

But the current setup is punishing developers. I am building SyncroFlow for real-time video intelligence. This is highly technical work. The filter completely lacks context and panics over legitimate visual data or node logic. It brings my development to a dead stop.

The filter needs to understand developer context, not just keyword triggers. Please add a dedicated "Flag as False Positive" button for API and web users. Let the system learn the difference between fraud and actual engineering.

Conclusion

Building SyncroFlow with Google Gemini at the Ant Media Hackathon was an unforgettable experience. It pushed my boundaries, expanded my technical horizons, and showcased the immense potential of AI in real-time applications. From the initial "I'm Ready!" enthusiasm to the triumphant feeling of being a finalist, every moment was a valuable lesson. The instrumental role of Gemini 3 Pro in generating the very fabric of the application was particularly impressive, truly demonstrating its power as a development partner. I'm excited to continue this journey, leveraging the power of Gemini to build even more innovative solutions and transform how we interact with visual and audio data.

FeedNexus : Let AI Create Your Social Media Feed Content

Felix — Mon, 15 Sep 2025 06:56:47 +0000

What I Built

The Problem

In today's fast-paced digital landscape, news breaks instantly, but creating high-quality, visually-consistent social media content is slow and labor-intensive. Content creators and newsrooms face a constant struggle:

The Speed Gap: There is a significant delay between a story breaking and the publication of an engaging, well-designed visual asset. By the time a carousel is manually created, the conversation may have already moved on.
Creative Burnout: Journalists and social media managers spend hours on repetitive, manual tasks—summarizing articles, finding visuals, formatting text, and ensuring brand compliance—instead of focusing on high-level storytelling and community engagement.
Brand Inconsistency: Across a team, maintaining a cohesive visual identity for every post is a major challenge, often leading to a fragmented and unprofessional social media presence.
The Quality vs. Quantity Dilemma: Teams are often forced to choose between producing content quickly or producing content that is high-quality. Doing both consistently is nearly impossible without a better workflow.

The Solution

FeedNexus is an AI-powered co-pilot designed to eliminate this bottleneck. It serves as an intelligent assistant that automates the most time-consuming parts of the creative workflow, allowing creators to bridge the gap between raw information and a polished, ready-to-publish visual story in minutes, not hours.

Here's how it works:

📰 Story Discovery & Synthesis: Provide a topic (e.g., "AI and Technology"), and FeedNexus finds the most significant, credible news story from the last 48 hours. It synthesizes information into a concise, cited summary.
📜 Narrative Structuring: The AI drafts a compelling 10-slide narrative using a library of proven slide archetypes, like "The Spotlight" for a powerful hook or "The Data Flash" for a key statistic.
🎨 Visual Generation & Branding: For each slide, FeedNexus generates a unique, abstract visual that metaphorically represents the content, guided by a dynamically suggested, context-aware color palette to ensure every asset is brand-aligned.
✍️ Interactive Editing & Finalizing: The AI's draft is presented in a fully interactive editor. Refine text, reposition elements, regenerate visuals, or drag-and-drop real-world images. When ready, export the entire package as a zip file, ready for publishing.

🎬 Demo

Try it out now on following link:
https://feednexus-277688129565.us-west1.run.app/

Watch the comprehensive demo here:
https://github.com/FelixMatrixar/FeedNexus

🛠️ How I Used the Gemini API

The Gemini API is the engine behind FeedNexus's core intelligence. I leveraged several advanced features to create a seamless workflow from broad concepts to structured, multimodal content.

News Aggregation & Grounding (gemini-2.5-flash with Google Search)
To ensure content is timely and credible, FeedNexus uses Gemini with the googleSearch tool. The model performs real-time searches, grounding its summary in verifiable facts and providing source links—critical for maintaining journalistic standards.
Structured Content Generation (gemini-2.5-flash with JSON Mode)
To translate a news summary into a full carousel layout, I defined a rigorous responseSchema. The AI is prompted to populate this schema, detailing the styleName for each slide, the visualDescription for the image generator, and an array of elements with precise coordinates and styling. This guarantees the AI's output is perfectly rendered by the application.
Metaphorical Visual Creation (imagen-3.0-generate-002)
To create a unique visual identity, FeedNexus uses the generateImages functionality. The art direction mandates that these visuals must be metaphorical and abstract, resulting in a sophisticated aesthetic that avoids generic stock imagery.
Audio Briefing Generation (gemini-2.5-flash)
For accessibility, FeedNexus generates a concise script for an audio summary. This text is then passed to the browser's native Web Speech API to be synthesized into voice, providing a "listenable" version of the news.

✨ Multimodal Features

FeedNexus is fundamentally multimodal, designed to understand, process, and generate content across text, structured data, and images.

Text-to-JSON-to-Image Pipeline: The core workflow is a powerful demonstration of multimodal translation. It takes unstructured text (news articles), transforms it into structured JSON data (the carousel plan), which in turn provides the prompts to generate the final visual slides.
Blending Factual & Abstract Imagery: The editor allows users to seamlessly blend two visual modalities. Use the AI's abstract art for a cover slide, then drag a real-world, cited photo onto a "Key Players" slide. The final product is both emotionally resonant and factually grounded.
Content and Layout Co-generation: The AI doesn't just write text; it designs the layout simultaneously. It decides a piece of information is best represented as a "Data Flash" and styles it accordingly, ensuring the design always serves the content.

🎨 Techniques in Content Design

FeedNexus employs several sophisticated techniques to ensure the generated content is effective, engaging, and journalistically sound.

Dynamic, Context-Aware Branding: The AI analyzes the mood and context of the news story to suggest a thematically appropriate color palette—for instance, sober blues and grays for political analysis, or vibrant, energetic tones for a story on innovation. The chosen palette's hex codes are then programmatically injected into the image generation prompts, ensuring the resulting abstract visuals are perfectly and smoothly color-matched to the brand theme.
Hook-Driven Narrative Structure: The AI is instructed to always begin with "The Spotlight" style to immediately grab the viewer's attention and maximize retention.
Visual Scaffolding with a Style Library: Instead of giving the AI complete freedom, it selects from a curated "Style Library" of 12 proven slide archetypes, ensuring every carousel follows a logical and engaging flow.
Metaphorical Abstraction in Art Direction: A core principle is the avoidance of literal imagery. This results in a unique visual brand that captures the mood and implications of a story.
Strict Typographic and Brand Hierarchy: The AI operates under defined brand guidelines (colors, fonts), saving creators the tedious task of manual formatting.
Data-Driven Storytelling: The AI is trained to map key data, comparisons, or quotes to specific slide styles, transforming dry information into compelling narrative beats.
Human-in-the-Loop Refinement: The AI's output is treated as a "first draft." The interactive editor empowers the journalist to be the final arbiter of the story, blending the speed of automation with the nuance and ethical oversight of a human editor.

🧰 The 12 Slide Archetypes: Your Storytelling Toolkit

FeedNexus uses a library of 12 distinct slide styles, allowing the AI to construct a varied and compelling narrative for any news story.

The Spotlight: The hero slide. A powerful, full-bleed visual and a bold headline to act as the primary hook.
The Analyst: The breakdown. Presents key takeaways or facts in a clean, digestible bulleted list.
The Visionary Quote: The human element. Highlights a powerful quote from a key person involved in the story.
The Data Flash: The big number. An ultra-minimalist slide that showcases a single, impactful statistic.
The Versus Slide: The comparison. A split-screen layout to compare two opposing ideas, entities, or outcomes.
The Timeline: The context. A sequential overview of key dates and events that led to the current news.
The Key Players: The "who." Introduces the main people or organizations involved with headshots or logos.
The Map: The geographic view. A stylized map graphic that highlights the location(s) where the news is happening.
The Pros & Cons: The balanced take. A two-column layout to explore the positive and negative implications.
The Process: The "how." A step-by-step flowchart that explains a complex process or workflow.
The Question: The engagement prompt. A slide designed to pose a direct question to the audience to spark discussion.
The Closer: The call-to-action. A branded sign-off slide that encourages users to follow, save, and share.

👥 Project Contributors

Name	Role	Instagram	LinkedIn	Dev.to
Felix	Project Lead	@felix_rngg	felix-mneuro	felix_75d972d6e9658ecec0f
Christie	Backend Developer	@christieteydaddy	christie-1a14b610b	christie_teydaddy_2abd2e7

Reach out to us!