<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jefri Bulo'</title>
    <description>The latest articles on DEV Community by Jefri Bulo' (@jefri_bulo).</description>
    <link>https://dev.to/jefri_bulo</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3691768%2F1c2ecb0b-d0a2-4970-9dde-bcd5ed8decf5.jpeg</url>
      <title>DEV Community: Jefri Bulo'</title>
      <link>https://dev.to/jefri_bulo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jefri_bulo"/>
    <language>en</language>
    <item>
      <title>PuskesmasAI: Finishing an Offline AI Triage App for Rural Indonesia</title>
      <dc:creator>Jefri Bulo'</dc:creator>
      <pubDate>Fri, 12 Jun 2026 02:23:35 +0000</pubDate>
      <link>https://dev.to/jefri_bulo/puskesmasai-finishing-an-offline-ai-triage-app-for-rural-indonesia-52da</link>
      <guid>https://dev.to/jefri_bulo/puskesmasai-finishing-an-offline-ai-triage-app-for-rural-indonesia-52da</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github-2026-05-21"&gt;GitHub Finish-Up-A-Thon Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;PuskesmasAI&lt;/strong&gt; is an offline-first Progressive Web App (PWA) that brings AI-powered medical triage to community health workers (&lt;em&gt;kader&lt;/em&gt;) in rural Indonesia — no internet connection required after the first setup.&lt;/p&gt;

&lt;p&gt;Indonesia has 1 doctor per 5,000 people, far below the WHO's recommended 1:600 ratio. In remote 3T regions (&lt;em&gt;Tertinggal, Terdepan, Terluar&lt;/em&gt; — Underdeveloped, Frontier, and Outermost), over 45% of community health posts lack adequate medical staff. The &lt;em&gt;kader&lt;/em&gt; — non-medical volunteers who are often the only frontline health resource for millions — must make triage decisions without doctors nearby, without structured guidance, and frequently without internet.&lt;/p&gt;

&lt;p&gt;PuskesmasAI solves this. A &lt;em&gt;kader&lt;/em&gt; inputs patient symptoms via a simple form in Bahasa Indonesia, and the app returns a structured AI triage result: &lt;strong&gt;GREEN / YELLOW / ORANGE / RED&lt;/strong&gt; — with recommended actions, possible conditions, red flags, and an auto-generated referral note. Patient records are stored locally in IndexedDB and sync to the Puskesmas dashboard when connectivity returns.&lt;/p&gt;

&lt;p&gt;Built with &lt;strong&gt;Next.js 14 (PWA) + Tailwind CSS&lt;/strong&gt; on the frontend, &lt;strong&gt;Python Flask&lt;/strong&gt; on the backend, and &lt;strong&gt;Gemma 4 E4B (GGUF quantized via Ollama)&lt;/strong&gt; as the on-device AI model (~2.5GB, zero cloud dependency). Zero patient data ever leaves the community — privacy by design.&lt;/p&gt;

&lt;p&gt;This project means a lot to me personally. I'm based in Makassar, South Sulawesi — and the health disparity between urban and rural Indonesia is something I witness firsthand. PuskesmasAI is my attempt to put AI where it's needed most.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;🔗 &lt;strong&gt;Repository:&lt;/strong&gt; &lt;a href="https://github.com/jefribulomakassar/gemma4_good_hackathon" rel="noopener noreferrer"&gt;https://github.com/jefribulomakassar/gemma4_good_hackathon&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⚠️ &lt;strong&gt;Local-first by design.&lt;/strong&gt; PuskesmasAI runs entirely on-device — the Next.js frontend (port 3000) and Python Flask backend (port 5000) are started separately on a local machine, with Gemma 4 E4B served via Ollama. There is no hosted demo because the whole point is offline operation: no cloud, no data leaving the device.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;To run locally:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Terminal 1 — Backend&lt;/span&gt;
&lt;span class="nb"&gt;cd &lt;/span&gt;backend &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; pip &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-r&lt;/span&gt; requirements.txt
ollama run gemma4:e4b
python app.py  &lt;span class="c"&gt;# runs on :5000&lt;/span&gt;

&lt;span class="c"&gt;# Terminal 2 — Frontend&lt;/span&gt;
&lt;span class="nb"&gt;cd &lt;/span&gt;frontend &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; npm &lt;span class="nb"&gt;install
&lt;/span&gt;npm run dev  &lt;span class="c"&gt;# runs on :3000&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Demo scenario:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Phone in airplane mode → open PuskesmasAI → fill triage: 32-year-old female, symptoms: "fever for 3 days, red spots on skin, nausea" → tap Analyze → result: 🟠 ORANGE with action list and referral note → turn WiFi on → patient record auto-syncs to dashboard.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  The Comeback Story
&lt;/h2&gt;

&lt;p&gt;This project originally started as my submission for the &lt;strong&gt;Kaggle × Google DeepMind Gemma 4 Good Hackathon&lt;/strong&gt; (Health &amp;amp; Sciences track, deadline: May 18, 2026). I had the full concept, the README, the architecture diagram, and the backend security layers ready — but I ran out of time before finishing the core data files and frontend components that would make the app actually &lt;em&gt;work&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Before (what existed at the original deadline):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ Full README with architecture and problem statement&lt;/li&gt;
&lt;li&gt;✅ Backend Flask app with 6 security layers (JWT, HMAC, rate limiting, CORS, prompt injection guard, privacy-safe logging)&lt;/li&gt;
&lt;li&gt;✅ Frontend structure with Next.js PWA config&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;TriageResult.tsx&lt;/code&gt;, &lt;code&gt;OfflineBanner.tsx&lt;/code&gt;, &lt;code&gt;VoiceInput.tsx&lt;/code&gt; components&lt;/li&gt;
&lt;li&gt;❌ No &lt;code&gt;medical_kb.json&lt;/code&gt; — the AI had no medical knowledge base&lt;/li&gt;
&lt;li&gt;❌ No &lt;code&gt;symptom_map.json&lt;/code&gt; — no symptom-to-condition mapping&lt;/li&gt;
&lt;li&gt;❌ No &lt;code&gt;drug_reference.json&lt;/code&gt; — no drug dosage reference for kaders&lt;/li&gt;
&lt;li&gt;❌ No &lt;code&gt;SymptomForm.tsx&lt;/code&gt; — the main input form was missing&lt;/li&gt;
&lt;li&gt;❌ No &lt;code&gt;db.ts&lt;/code&gt; / &lt;code&gt;sync.ts&lt;/code&gt; — offline storage and sync not implemented&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;After (what was added during the Finish-Up-A-Thon):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ &lt;code&gt;backend/data/medical_kb.json&lt;/code&gt; — offline medical knowledge base covering the 10 most prevalent diseases in rural Indonesia (Dengue/DBD, Typhoid, Malaria, ARI/ISPA, Diarrhea, Hypertension, Tuberculosis, Malnutrition, Cholera, Pre-eclampsia) with symptoms, red flags, triage levels, and actions — all in Bahasa Indonesia&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;backend/data/symptom_map.json&lt;/code&gt; — 32 symptom groups with Indonesian colloquial keywords, probability weights, and automatic triage escalation rules&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;backend/data/drug_reference.json&lt;/code&gt; — 10 essential Puskesmas drugs with pediatric dosing per kg body weight, contraindications, and kader-safe drug classification based on Indonesia's National Formulary (&lt;em&gt;Formularium Nasional&lt;/em&gt;)&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;frontend/src/components/SymptomForm.tsx&lt;/code&gt; — mobile-first patient intake form with symptom shortcut buttons, automatic pregnancy detection, temperature indicator, and form validation&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;frontend/src/lib/db.ts&lt;/code&gt; — IndexedDB wrapper using Dexie.js for offline patient record storage&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;frontend/src/lib/sync.ts&lt;/code&gt; — auto-sync module that uploads pending records to Turso cloud when connectivity returns&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The transformation: from a well-documented skeleton to a genuinely functional offline AI triage tool.&lt;/p&gt;

&lt;h2&gt;
  
  
  My Experience with GitHub Copilot
&lt;/h2&gt;

&lt;p&gt;GitHub Copilot was central to finishing this project — especially for the data-heavy and boilerplate-heavy files that would have taken hours to write manually.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;symptom_map.json&lt;/code&gt; and &lt;code&gt;drug_reference.json&lt;/code&gt;&lt;/strong&gt; were generated entirely using GitHub Copilot in the github.dev editor — no local setup needed. I simply pressed &lt;code&gt;.&lt;/code&gt; on the repository page to open github.dev, then used &lt;code&gt;Ctrl+I&lt;/code&gt; to invoke inline prompts. I provided the full file path, the data structure requirements, and domain-specific context (Indonesian rural health context, Formularium Nasional constraints). The results were accurate, well-structured, and included details I hadn't explicitly specified — like colloquial Bahasa Indonesia symptom terms (&lt;code&gt;"step"&lt;/code&gt; for kejang/seizure, &lt;code&gt;"ngos-ngosan"&lt;/code&gt; for rapid breathing) and the appropriate kader-safe drug classification tiers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;db.ts&lt;/code&gt; and &lt;code&gt;sync.ts&lt;/code&gt;&lt;/strong&gt; were scaffolded by Copilot with idiomatic TypeScript and Dexie.js patterns that matched the existing codebase — including the &lt;code&gt;synced&lt;/code&gt; boolean field for tracking upload status and the &lt;code&gt;navigator.onLine&lt;/code&gt; check in the sync logic. What would have been an hour of boilerplate became a focused 10-minute review and refinement session.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What I learned:&lt;/strong&gt; Copilot works best when you give it full context — the exact file path in the repo, the purpose of the file, the related files it should be aware of, and the domain-specific constraints. A well-crafted prompt saved me hours on each file.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvpjd8eegis412v6xuaka.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvpjd8eegis412v6xuaka.png" alt=" " width="559" height="584"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"The best AI is not the most complex one. It's the one that works for the people who need it most — even when the internet doesn't."&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
    </item>
    <item>
      <title>PuskesmasAI: Finishing an Offline AI Triage App for Rural Indonesia</title>
      <dc:creator>Jefri Bulo'</dc:creator>
      <pubDate>Sun, 07 Jun 2026 12:14:44 +0000</pubDate>
      <link>https://dev.to/jefri_bulo/puskesmasai-finishing-an-offline-ai-triage-app-for-rural-indonesia-3jm9</link>
      <guid>https://dev.to/jefri_bulo/puskesmasai-finishing-an-offline-ai-triage-app-for-rural-indonesia-3jm9</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github-2026-05-21"&gt;GitHub Finish-Up-A-Thon Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;PuskesmasAI&lt;/strong&gt; is an offline-first Progressive Web App (PWA) that brings AI-powered medical triage to community health workers (&lt;em&gt;kader&lt;/em&gt;) in rural Indonesia — no internet connection required after the first setup.&lt;/p&gt;

&lt;p&gt;Indonesia has 1 doctor per 5,000 people, far below the WHO's recommended 1:600 ratio. In remote 3T regions (&lt;em&gt;Tertinggal, Terdepan, Terluar&lt;/em&gt; — Underdeveloped, Frontier, and Outermost), over 45% of community health posts lack adequate medical staff. The &lt;em&gt;kader&lt;/em&gt; — non-medical volunteers who are often the only frontline health resource for millions — must make triage decisions without doctors nearby, without structured guidance, and frequently without internet.&lt;/p&gt;

&lt;p&gt;PuskesmasAI solves this. A &lt;em&gt;kader&lt;/em&gt; inputs patient symptoms via a simple form in Bahasa Indonesia, and the app returns a structured AI triage result: &lt;strong&gt;GREEN / YELLOW / ORANGE / RED&lt;/strong&gt; — with recommended actions, possible conditions, red flags, and an auto-generated referral note. Patient records are stored locally in IndexedDB and sync to the Puskesmas dashboard when connectivity returns.&lt;/p&gt;

&lt;p&gt;Built with &lt;strong&gt;Next.js 14 (PWA) + Tailwind CSS&lt;/strong&gt; on the frontend, &lt;strong&gt;Python Flask&lt;/strong&gt; on the backend, and &lt;strong&gt;Gemma 4 E4B (GGUF quantized via Ollama)&lt;/strong&gt; as the on-device AI model (~2.5GB, zero cloud dependency). Zero patient data ever leaves the community — privacy by design.&lt;/p&gt;

&lt;p&gt;This project means a lot to me personally. I'm based in Makassar, South Sulawesi — and the health disparity between urban and rural Indonesia is something I witness firsthand. PuskesmasAI is my attempt to put AI where it's needed most.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;🔗 &lt;strong&gt;Repository:&lt;/strong&gt; &lt;a href="https://github.com/jefribulomakassar/gemma4_good_hackathon" rel="noopener noreferrer"&gt;https://github.com/jefribulomakassar/gemma4_good_hackathon&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⚠️ &lt;strong&gt;Local-first by design.&lt;/strong&gt; PuskesmasAI runs entirely on-device — the Next.js frontend (port 3000) and Python Flask backend (port 5000) are started separately on a local machine, with Gemma 4 E4B served via Ollama. There is no hosted demo because the whole point is offline operation: no cloud, no data leaving the device.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;To run locally:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Terminal 1 — Backend&lt;/span&gt;
&lt;span class="nb"&gt;cd &lt;/span&gt;backend &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; pip &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-r&lt;/span&gt; requirements.txt
ollama run gemma4:e4b
python app.py  &lt;span class="c"&gt;# runs on :5000&lt;/span&gt;

&lt;span class="c"&gt;# Terminal 2 — Frontend&lt;/span&gt;
&lt;span class="nb"&gt;cd &lt;/span&gt;frontend &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; npm &lt;span class="nb"&gt;install
&lt;/span&gt;npm run dev  &lt;span class="c"&gt;# runs on :3000&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Demo scenario:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Phone in airplane mode → open PuskesmasAI → fill triage: 32-year-old female, symptoms: "fever for 3 days, red spots on skin, nausea" → tap Analyze → result: 🟠 ORANGE with action list and referral note → turn WiFi on → patient record auto-syncs to dashboard.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  The Comeback Story
&lt;/h2&gt;

&lt;p&gt;This project originally started as my submission for the &lt;strong&gt;Kaggle × Google DeepMind Gemma 4 Good Hackathon&lt;/strong&gt; (Health &amp;amp; Sciences track, deadline: May 18, 2026). I had the full concept, the README, the architecture diagram, and the backend security layers ready — but I ran out of time before finishing the core data files and frontend components that would make the app actually &lt;em&gt;work&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Before (what existed at the original deadline):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ Full README with architecture and problem statement&lt;/li&gt;
&lt;li&gt;✅ Backend Flask app with 6 security layers (JWT, HMAC, rate limiting, CORS, prompt injection guard, privacy-safe logging)&lt;/li&gt;
&lt;li&gt;✅ Frontend structure with Next.js PWA config&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;TriageResult.tsx&lt;/code&gt;, &lt;code&gt;OfflineBanner.tsx&lt;/code&gt;, &lt;code&gt;VoiceInput.tsx&lt;/code&gt; components&lt;/li&gt;
&lt;li&gt;❌ No &lt;code&gt;medical_kb.json&lt;/code&gt; — the AI had no medical knowledge base&lt;/li&gt;
&lt;li&gt;❌ No &lt;code&gt;symptom_map.json&lt;/code&gt; — no symptom-to-condition mapping&lt;/li&gt;
&lt;li&gt;❌ No &lt;code&gt;drug_reference.json&lt;/code&gt; — no drug dosage reference for kaders&lt;/li&gt;
&lt;li&gt;❌ No &lt;code&gt;SymptomForm.tsx&lt;/code&gt; — the main input form was missing&lt;/li&gt;
&lt;li&gt;❌ No &lt;code&gt;db.ts&lt;/code&gt; / &lt;code&gt;sync.ts&lt;/code&gt; — offline storage and sync not implemented&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;After (what was added during the Finish-Up-A-Thon):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ &lt;code&gt;backend/data/medical_kb.json&lt;/code&gt; — offline medical knowledge base covering the 10 most prevalent diseases in rural Indonesia (Dengue/DBD, Typhoid, Malaria, ARI/ISPA, Diarrhea, Hypertension, Tuberculosis, Malnutrition, Cholera, Pre-eclampsia) with symptoms, red flags, triage levels, and actions — all in Bahasa Indonesia&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;backend/data/symptom_map.json&lt;/code&gt; — 32 symptom groups with Indonesian colloquial keywords, probability weights, and automatic triage escalation rules&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;backend/data/drug_reference.json&lt;/code&gt; — 10 essential Puskesmas drugs with pediatric dosing per kg body weight, contraindications, and kader-safe drug classification based on Indonesia's National Formulary (&lt;em&gt;Formularium Nasional&lt;/em&gt;)&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;frontend/src/components/SymptomForm.tsx&lt;/code&gt; — mobile-first patient intake form with symptom shortcut buttons, automatic pregnancy detection, temperature indicator, and form validation&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;frontend/src/lib/db.ts&lt;/code&gt; — IndexedDB wrapper using Dexie.js for offline patient record storage&lt;/li&gt;
&lt;li&gt;✅ &lt;code&gt;frontend/src/lib/sync.ts&lt;/code&gt; — auto-sync module that uploads pending records to Turso cloud when connectivity returns&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The transformation: from a well-documented skeleton to a genuinely functional offline AI triage tool.&lt;/p&gt;

&lt;h2&gt;
  
  
  My Experience with GitHub Copilot
&lt;/h2&gt;

&lt;p&gt;GitHub Copilot was central to finishing this project — especially for the data-heavy and boilerplate-heavy files that would have taken hours to write manually.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;symptom_map.json&lt;/code&gt; and &lt;code&gt;drug_reference.json&lt;/code&gt;&lt;/strong&gt; were generated entirely using GitHub Copilot in the github.dev editor — no local setup needed. I simply pressed &lt;code&gt;.&lt;/code&gt; on the repository page to open github.dev, then used &lt;code&gt;Ctrl+I&lt;/code&gt; to invoke inline prompts. I provided the full file path, the data structure requirements, and domain-specific context (Indonesian rural health context, Formularium Nasional constraints). The results were accurate, well-structured, and included details I hadn't explicitly specified — like colloquial Bahasa Indonesia symptom terms (&lt;code&gt;"step"&lt;/code&gt; for kejang/seizure, &lt;code&gt;"ngos-ngosan"&lt;/code&gt; for rapid breathing) and the appropriate kader-safe drug classification tiers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;db.ts&lt;/code&gt; and &lt;code&gt;sync.ts&lt;/code&gt;&lt;/strong&gt; were scaffolded by Copilot with idiomatic TypeScript and Dexie.js patterns that matched the existing codebase — including the &lt;code&gt;synced&lt;/code&gt; boolean field for tracking upload status and the &lt;code&gt;navigator.onLine&lt;/code&gt; check in the sync logic. What would have been an hour of boilerplate became a focused 10-minute review and refinement session.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What I learned:&lt;/strong&gt; Copilot works best when you give it full context — the exact file path in the repo, the purpose of the file, the related files it should be aware of, and the domain-specific constraints. A well-crafted prompt saved me hours on each file.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvpjd8eegis412v6xuaka.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvpjd8eegis412v6xuaka.png" alt=" " width="559" height="584"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"The best AI is not the most complex one. It's the one that works for the people who need it most — even when the internet doesn't."&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Google I/O 2026: We're Not Building Apps Anymore — We're Deploying Agents</title>
      <dc:creator>Jefri Bulo'</dc:creator>
      <pubDate>Sat, 23 May 2026 08:44:52 +0000</pubDate>
      <link>https://dev.to/jefri_bulo/google-io-2026-were-not-building-apps-anymore-were-deploying-agents-11n8</link>
      <guid>https://dev.to/jefri_bulo/google-io-2026-were-not-building-apps-anymore-were-deploying-agents-11n8</guid>
      <description>&lt;h1&gt;
  
  
  Google I/O 2026: We're Not Building Apps Anymore — We're Deploying Agents
&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/google-io-writing-2026-05-19"&gt;Google I/O Writing Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;Let me be honest: I almost skipped this year's keynote.&lt;/p&gt;

&lt;p&gt;After a few years of "AI-powered everything" announcements that turned out to be half-baked demos, I'd gotten a little cynical. You know the cycle — big stage, polished slides, features that show up six months late and with half the functionality.&lt;/p&gt;

&lt;p&gt;But I watched anyway. And somewhere around the Developer Keynote, something clicked.&lt;/p&gt;

&lt;p&gt;This wasn't just another update cycle. Google wasn't adding AI &lt;em&gt;to&lt;/em&gt; their products. They were replacing the foundation underneath them.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Phrase That Actually Matters
&lt;/h2&gt;

&lt;p&gt;Sundar Pichai opened with "the agentic Gemini era." Easy to brush off as marketing speak. I almost did.&lt;/p&gt;

&lt;p&gt;But then I watched the Firebase session. Then Flutter. Then Google AI. And I realized — every single team was building toward the same thing from a different direction. That doesn't happen by accident. When a company that size tells a coherent story across every product at once, they're not pitching a feature. They're announcing a direction they've already committed to.&lt;/p&gt;

&lt;p&gt;So what's the actual direction? Here's how I'd put it in plain terms:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Google wants the gap between "I have an idea" and "there's a deployed app" to be measured in hours, not sprints.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  What Actually Shipped (That You Should Care About)
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Antigravity 2.0 — The Part Everyone Will Miss at First
&lt;/h3&gt;

&lt;p&gt;Antigravity is Google's agent-first dev platform, and version 2.0 is a big jump. You can now spin up specialized subagents to tackle different parts of a complex workflow. There's a new CLI. And — this is the part that caught my attention — Managed Agents in the Gemini API means a single API call gives you a fully provisioned agent with a remote sandbox. No infrastructure setup. No config files. Just call it.&lt;/p&gt;

&lt;p&gt;They also launched the Antigravity SDK so you can deploy the agent harness on your own infrastructure with full programmatic control. Plus Google AI Studio now has one-click deploy to Cloud Run and native Kotlin support. Build, deploy, ship — all without leaving one interface.&lt;/p&gt;

&lt;p&gt;I'll be honest: it sounds too smooth. Production always has edges that demos don't. But the &lt;em&gt;direction&lt;/em&gt; is real, and the pieces are actually there now.&lt;/p&gt;

&lt;h3&gt;
  
  
  Firebase — Quietly Doing a Lot
&lt;/h3&gt;

&lt;p&gt;Firebase had maybe the most interesting session if you build mobile or full-stack apps.&lt;/p&gt;

&lt;p&gt;Agent Skills now cover Android, iOS, and Flutter — not just Web. This matters because the difference between a coding agent that knows "Firebase" generically and one that knows Firebase &lt;em&gt;in the context of Flutter's widget lifecycle&lt;/em&gt; is enormous. One gives you boilerplate. The other gives you something that actually fits.&lt;/p&gt;

&lt;p&gt;They also shipped Firestore native full-text search in preview. No more syncing to Algolia or Elasticsearch. Just Firestore. That's a feature people have been asking for literally for years.&lt;/p&gt;

&lt;p&gt;And then there's this: &lt;strong&gt;Firebase Studio is shutting down in 2027.&lt;/strong&gt; New workspace creation closes June 22, 2026. The migration path is Google Antigravity. If you're using Firebase Studio today, plan accordingly. Core Firebase services (Firestore, Auth, App Hosting, etc.) are all fine — this is just the IDE story consolidating.&lt;/p&gt;

&lt;h3&gt;
  
  
  Flutter 3.44 — Bigger Than It Sounds
&lt;/h3&gt;

&lt;p&gt;Flutter releases can sometimes feel like polish without substance. This one felt different.&lt;/p&gt;

&lt;p&gt;Agentic hot reload is here — AI agents can now manipulate your UI code and see changes live. The Flutter GenUI SDK and A2UI protocol let models dynamically generate and adapt UIs based on user intent. Genkit Dart launched as an open-source framework for full-stack AI-powered Flutter/Dart apps, supporting Anthropic, OpenAI, and Google models with the same code across backend and frontend.&lt;/p&gt;

&lt;p&gt;Also: Flutter now runs in the 2026 Toyota RAV4 infotainment system. LG's webOS SDK is coming. Material and Cupertino libraries are being decoupled into standalone packages with their own versioning. That last one is subtle but matters a lot for teams doing heavy design customization.&lt;/p&gt;

&lt;p&gt;Dart 3.12 also shipped with experimental Dart support for Firebase Cloud Functions — meaning true full-stack Dart is becoming genuinely practical now, not just theoretically possible.&lt;/p&gt;

&lt;h3&gt;
  
  
  Gemini 3.5 Flash + WebMCP + SynthID
&lt;/h3&gt;

&lt;p&gt;Gemini 3.5 Flash launched as the first model in Google's new series explicitly built for &lt;em&gt;action&lt;/em&gt;, not just reasoning. It outperforms Gemini 3.1 Pro on agentic benchmarks while keeping Flash-level speeds. Token processing across Google products hit 3.2 quadrillion per month — sevenfold year-over-year growth. 8.5 million developers on Gemini now.&lt;/p&gt;

&lt;p&gt;WebMCP is a proposed open web standard that lets browser-based AI agents execute against JavaScript functions and HTML forms with precision. Origin trial starts in Chrome 149. If this gets traction, it's a big deal for web automation and agentic workflows in the browser.&lt;/p&gt;

&lt;p&gt;SynthID — Google's AI content watermarking — now has OpenAI, Kakao, and Eleven Labs adopting it. Cross-industry watermarking starting to look like an actual standard, not just a Google feature.&lt;/p&gt;




&lt;h2&gt;
  
  
  My Honest Read on All of This
&lt;/h2&gt;

&lt;p&gt;Here's what I keep coming back to: Google isn't just shipping tools. They're reshaping what the job actually is.&lt;/p&gt;

&lt;p&gt;The Android Migration Agent previewed this year can take a React Native or iOS app and migrate it to native Kotlin — work that previously took weeks, now taking hours. Chrome DevTools for Agents lets AI automate quality audits and debug in real time without manual oversight. Modern Web Guidance gives coding agents a curated set of expert-vetted skills for building performant, accessible web apps.&lt;/p&gt;

&lt;p&gt;The consistent pattern: things that used to require a developer to &lt;em&gt;do&lt;/em&gt; are being handed to agents. The developer's job shifts to deciding &lt;em&gt;what&lt;/em&gt; to build and whether the output is right.&lt;/p&gt;

&lt;p&gt;That's either exciting or unsettling depending on your position. Probably both.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Part Google Didn't Say
&lt;/h2&gt;

&lt;p&gt;Here's the honest gap in everything I watched:&lt;/p&gt;

&lt;p&gt;None of it addressed what happens when agents get it wrong at scale. The demos were clean. Production is not clean. An agent with Crashlytics access and autonomous debugging capabilities is powerful. It's also capable of confidently making the wrong fix to the wrong problem and deploying it.&lt;/p&gt;

&lt;p&gt;The framework is maturing fast. The guardrails are still catching up.&lt;/p&gt;




&lt;h2&gt;
  
  
  So What Does This Mean for Us?
&lt;/h2&gt;

&lt;p&gt;I don't think this signals the end of software development. I think it signals the end of a specific version of it — where the bottleneck is writing code.&lt;/p&gt;

&lt;p&gt;The new bottleneck is knowing what to build. Having the judgment to review what an agent produced and catch what's subtly wrong. Understanding enough about the underlying systems that you're not just a prompt engineer hoping things hold together in prod.&lt;/p&gt;

&lt;p&gt;That's not a smaller job. It's a different one.&lt;/p&gt;

&lt;p&gt;Google I/O 2026 was the clearest signal yet that the transition is happening whether we're ready or not. The question isn't whether to adapt — it's how fast, and toward what.&lt;/p&gt;

&lt;p&gt;I'm still figuring that out. But at least now I'm not skipping the keynotes.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Tags: &lt;code&gt;#googleiochallenge&lt;/code&gt; &lt;code&gt;#devchallenge&lt;/code&gt; &lt;code&gt;#ai&lt;/code&gt; &lt;code&gt;#webdev&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>googleiochallenge</category>
      <category>google</category>
      <category>agents</category>
    </item>
    <item>
      <title>Conversa — A Multi-Agent AI Platform Powered by Gemma 4</title>
      <dc:creator>Jefri Bulo'</dc:creator>
      <pubDate>Sat, 23 May 2026 08:04:33 +0000</pubDate>
      <link>https://dev.to/jefri_bulo/conversa-a-multi-agent-ai-platform-powered-by-gemma-4-577c</link>
      <guid>https://dev.to/jefri_bulo/conversa-a-multi-agent-ai-platform-powered-by-gemma-4-577c</guid>
      <description>&lt;h1&gt;
  
  
  Conversa — A Multi-Agent AI Platform Powered by Gemma 4
&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/google-gemma-2026-05-06"&gt;Gemma 4 Challenge: Build with Gemma 4&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Conversa&lt;/strong&gt; is a multi-agent AI platform built with Next.js (App Router) that transforms unstructured files — audio recordings, documents, and images — into structured, actionable intelligence. The platform consists of three specialized agents, each solving a distinct real-world problem:&lt;/p&gt;

&lt;h3&gt;
  
  
  🎙️ Meeting Analyzer (Audio Agent)
&lt;/h3&gt;

&lt;p&gt;Upload a voice recording (MP3, WAV, M4A) and get back:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A full verbatim &lt;strong&gt;transcript&lt;/strong&gt; via Groq Whisper&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Key discussion points&lt;/strong&gt; extracted by Gemma 4&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Action items&lt;/strong&gt; with clear ownership&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Follow-up questions&lt;/strong&gt; to keep the conversation moving&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For large audio files (&amp;gt;25MB), the agent automatically compresses them in the browser — resampling to 16kHz mono WAV using the Web Audio API — before sending to the server.&lt;/p&gt;

&lt;h3&gt;
  
  
  📄 Brief Generator (Document Agent)
&lt;/h3&gt;

&lt;p&gt;Upload a PDF or Word document and choose from 5 brief types:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Meeting Brief&lt;/strong&gt; — agenda, discussion points, critical questions&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Project Kickoff&lt;/strong&gt; — goals, scope, roles, milestones&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Client Proposal&lt;/strong&gt; — executive summary, pricing overview&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interview Prep&lt;/strong&gt; — questions, scorecard, red flags&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SOP Generator&lt;/strong&gt; — step-by-step procedures and checkpoints&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Gemma 4's &lt;strong&gt;256K context window&lt;/strong&gt; processes the entire document in one pass — no chunking, no information loss. Word documents (.docx/.doc) are automatically converted to PDF via mammoth + jsPDF before processing.&lt;/p&gt;

&lt;h3&gt;
  
  
  🖼️ Whiteboard Analyzer (Image Agent)
&lt;/h3&gt;

&lt;p&gt;Upload a whiteboard photo or handwritten notes (JPG, PNG, WEBP) and receive:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Extracted text&lt;/strong&gt; — every visible word, transcribed verbatim&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Diagram &amp;amp; visual element descriptions&lt;/strong&gt; — shapes, flows, connections&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Structured summary&lt;/strong&gt; — professional 2–4 sentence synthesis&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Suggested next steps&lt;/strong&gt; — 3–5 actionable recommendations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Images above 4MB are automatically compressed via Canvas API before upload to stay within Vercel's serverless function payload limit.&lt;/p&gt;

&lt;p&gt;All three agents stream results progressively via &lt;strong&gt;Server-Sent Events (SSE)&lt;/strong&gt;, so content appears section by section as Gemma 4 generates it — no waiting for the full response.&lt;/p&gt;




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;🌐 &lt;strong&gt;Live App:&lt;/strong&gt; &lt;a href="https://conversa-gemma4.vercel.app" rel="noopener noreferrer"&gt;https://conversa-gemma4.vercel.app&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Try uploading a meeting recording, a PDF report, or a whiteboard photo to see all three agents in action.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;📦 &lt;strong&gt;GitHub Repository:&lt;/strong&gt; &lt;a href="https://github.com/jefribulomakassar/conversa-gemma4" rel="noopener noreferrer"&gt;https://github.com/jefribulomakassar/conversa-gemma4&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tech stack:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Framework:&lt;/strong&gt; Next.js 14 (App Router, TypeScript)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI Model:&lt;/strong&gt; &lt;code&gt;google/gemma-4-26b-a4b-it&lt;/code&gt; via OpenRouter&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Transcription:&lt;/strong&gt; Groq Whisper (audio pipeline)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deployment:&lt;/strong&gt; Vercel&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Styling:&lt;/strong&gt; Pure CSS-in-JS (no UI library)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Key files:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;app/
├── api/
│   ├── audio/route.ts      → Transcription + Gemma 4 analysis pipeline
│   ├── document/route.ts   → PDF extraction + brief generation pipeline
│   └── image/route.ts      → Base64 encoding + visual analysis pipeline
├── audio/page.tsx          → Meeting Analyzer UI
├── document/page.tsx       → Brief Generator UI
└── image/page.tsx          → Whiteboard Analyzer UI
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  How I Used Gemma 4
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Model Choice: &lt;code&gt;google/gemma-4-26b-a4b-it&lt;/code&gt; (26B MoE)
&lt;/h3&gt;

&lt;p&gt;I chose &lt;strong&gt;Gemma 4 26B&lt;/strong&gt; (the 26-billion parameter Mixture-of-Experts variant, &lt;code&gt;a4b&lt;/code&gt; architecture) for three specific reasons:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Multimodal capability for the Image Agent&lt;/strong&gt;&lt;br&gt;
The image agent sends photos directly as base64 &lt;code&gt;image_url&lt;/code&gt; to the model. Gemma 4's native vision support eliminates the need for a separate OCR service — the same model that generates structured summaries also reads handwritten text and interprets diagram flows.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. 256K context window for the Document Agent&lt;/strong&gt;&lt;br&gt;
Most open models force chunking for long documents, which causes information loss at chunk boundaries. Gemma 4's extended context lets the document agent ingest entire PDFs (legal contracts, project proposals, SOPs) in a single API call and reason over the full content holistically.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Structured JSON output reliability&lt;/strong&gt;&lt;br&gt;
All three agents require the model to return &lt;strong&gt;strict JSON&lt;/strong&gt; (no markdown fences, no preamble). Gemma 4 26B consistently honors the system prompt instruction &lt;code&gt;"respond with ONLY a valid JSON object"&lt;/code&gt; with temperature 0.2, which made the SSE streaming pipeline reliable without complex retry logic.&lt;/p&gt;
&lt;h3&gt;
  
  
  Pipeline Architecture
&lt;/h3&gt;

&lt;p&gt;Each agent follows the same SSE streaming pattern:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Client uploads file
      ↓
Browser-side compression (if needed)
      ↓
POST /api/[agent] (FormData)
      ↓
Server: parse → convert → call Gemma 4 via OpenRouter
      ↓
Stream SSE events back: status → field1 → field2 → done
      ↓
Client renders results progressively
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The model is called with &lt;code&gt;temperature: 0.2&lt;/code&gt; and &lt;code&gt;max_tokens: 3000&lt;/code&gt; across all agents to balance creativity with output consistency.&lt;/p&gt;

&lt;p&gt;For the &lt;strong&gt;audio agent&lt;/strong&gt;, Gemma 4 receives the transcript text (produced by Groq Whisper) and extracts key points, action items, and follow-up questions — acting as a reasoning layer on top of the raw transcription.&lt;/p&gt;

&lt;p&gt;For the &lt;strong&gt;document agent&lt;/strong&gt;, the PDF is converted to base64 and passed in full to Gemma 4, which then generates structured brief sections streamed one by one as SSE &lt;code&gt;section&lt;/code&gt; events.&lt;/p&gt;

&lt;p&gt;For the &lt;strong&gt;image agent&lt;/strong&gt;, the photo is passed as a &lt;code&gt;image_url&lt;/code&gt; content block alongside a detailed JSON schema prompt, and Gemma 4 returns all four analysis fields in a single structured response.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>gemmachallenge</category>
      <category>gemma</category>
      <category>ai</category>
    </item>
    <item>
      <title>AI Demystified: What I Learned from IBM Dev Day</title>
      <dc:creator>Jefri Bulo'</dc:creator>
      <pubDate>Wed, 01 Apr 2026 07:42:44 +0000</pubDate>
      <link>https://dev.to/jefri_bulo/ai-demystified-what-i-learned-from-ibm-dev-day-m81</link>
      <guid>https://dev.to/jefri_bulo/ai-demystified-what-i-learned-from-ibm-dev-day-m81</guid>
      <description>&lt;h1&gt;
  
  
  AI Demystified: What I Learned from IBM Dev Day
&lt;/h1&gt;

&lt;p&gt;Recently, I completed &lt;em&gt;IBM Dev Day: AI Demystified&lt;/em&gt; (February 25).&lt;/p&gt;

&lt;p&gt;What stood out to me is that it wasn’t just about “what AI is,” but more about how to think behind AI systems themselves.  &lt;/p&gt;

&lt;p&gt;As a developer, it reminded me that understanding fundamentals matters more than simply using tools.  &lt;/p&gt;

&lt;p&gt;Still a long journey ahead, but I’m glad to keep learning and growing step by step.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fht8rxdop90iw9rx83tnk.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fht8rxdop90iw9rx83tnk.webp" alt=" " width="800" height="618"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Certificate of participation for completing IBM Dev Day: AI Demystified — a small milestone in my AI learning journey.&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  AI #IBMDevDay #DeveloperJourney
&lt;/h1&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>programming</category>
      <category>productivity</category>
    </item>
    <item>
      <title>From Data to Insight: Turning Spreadsheets into Visual Understanding</title>
      <dc:creator>Jefri Bulo'</dc:creator>
      <pubDate>Mon, 05 Jan 2026 07:51:15 +0000</pubDate>
      <link>https://dev.to/jefri_bulo/auto-generating-dashboard-prototypes-directly-inside-google-sheets-1gc2</link>
      <guid>https://dev.to/jefri_bulo/auto-generating-dashboard-prototypes-directly-inside-google-sheets-1gc2</guid>
      <description>&lt;p&gt;&lt;strong&gt;What I Built&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I built a web-based tool that helps users understand their data by turning raw spreadsheet files into clear visual summaries.&lt;/p&gt;

&lt;p&gt;The tool accepts data from both local Excel files and Google Sheets. Many people already have data stored in spreadsheets, but reading and interpreting that data is often harder than expected—especially for non-technical users. Rows and columns alone rarely tell a story.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This project focuses on solving that problem.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Instead of asking users to manually analyze tables or design charts from scratch, the application automatically processes the structure of the data and presents it through visualizations, tables, and concise summaries inside a web interface. The goal is to help users quickly grasp what their data is saying.&lt;/p&gt;

&lt;p&gt;Users can upload or select their data, and the system will:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Analyze the data structure&lt;/li&gt;
&lt;li&gt;Detect patterns such as numeric, categorical, and time-based fields&lt;/li&gt;
&lt;li&gt;Map the data into appropriate visual representations&lt;/li&gt;
&lt;li&gt;Present the results in a clean, easy-to-read web UI&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The visual output stays live and updates automatically when the underlying data changes.&lt;/p&gt;

&lt;p&gt;To support users from different regions, the interface also includes multi-language support. At the moment, several languages are available, with more planned as the system evolves.&lt;/p&gt;

&lt;p&gt;This tool is designed for a broad range of users—from beginners who are new to data analysis, to business users and organizations that need fast insights without relying on complex BI tools.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Demo &amp;amp; Testing Access&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The public web testing link is currently being configured and will be shared soon.&lt;/p&gt;

&lt;p&gt;In the meantime, the pitch video below demonstrates the full workflow and core functionality of the application, including data ingestion, analysis, and visualization output.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;My Pitch Video&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;iframe src="https://player.mux.com/ASVxYmBTNwEAxfGu4G7k1khny348AvhlDzW500oKP01GY" width="710" height="399"&gt;
&lt;/iframe&gt;

&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Here is the link for the judges:&lt;/strong&gt;&lt;br&gt;
[&lt;a href="https://sheets-analyzer.vercel.app/" rel="noopener noreferrer"&gt;https://sheets-analyzer.vercel.app/&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;In this short pitch video, I demonstrate:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A raw dataset from Google Sheets&lt;/li&gt;
&lt;li&gt;How the system analyzes the data structure&lt;/li&gt;
&lt;li&gt;How the same dataset is transformed into multiple visual summaries&lt;/li&gt;
&lt;li&gt;How users can immediately explore and understand their data&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;The Story Behind It&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Many people store important information in Excel or Google Sheets, but understanding that data often requires experience with charts, formulas, or analytics tools.&lt;/p&gt;

&lt;p&gt;The real challenge is not collecting data—it’s making sense of it.&lt;/p&gt;

&lt;p&gt;I built this project to reduce that gap by making data interpretation more accessible. By automating visualization, summaries, and presentation—while supporting multiple languages—the tool helps users focus on understanding their data rather than struggling with technical barriers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Technical Highlights&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Data ingestion from Excel files and Google Sheets&lt;/li&gt;
&lt;li&gt;Automatic schema detection (numeric, categorical, time-based columns)&lt;/li&gt;
&lt;li&gt;Logic for mapping data structures to charts, tables, and summaries&lt;/li&gt;
&lt;li&gt;Live, reactive visual output in a web-based UI&lt;/li&gt;
&lt;li&gt;Multi-language interface support&lt;/li&gt;
&lt;li&gt;Clear separation between data interpretation and visual rendering, making the system easier to extend in the future&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Use of Mux (Additional Prize Category Participants Only)&lt;/p&gt;

&lt;p&gt;Mux is used as the video infrastructure for this project’s pitch and demo presentation.&lt;/p&gt;

&lt;p&gt;I uploaded the final edited pitch video to Mux and embedded it directly into this DEV submission. Mux provided reliable video hosting and playback, allowing the focus to remain on clearly communicating the project within the one-minute format required by the challenge.&lt;/p&gt;

&lt;p&gt;❗ By submitting this project, I confirm that my video adheres to Mux's terms of service:&lt;br&gt;
&lt;a href="https://www.mux.com/terms" rel="noopener noreferrer"&gt;https://www.mux.com/terms&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>muxchallenge</category>
      <category>showandtell</category>
      <category>video</category>
    </item>
  </channel>
</rss>
