The latest articles on DEV Community by Ruhi Chaudhari (@ruhichaudhari6). https://dev.to/ruhichaudhari6 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F99mvlsfu5tfj9m7ku25d.png https://dev.to/ruhichaudhari6 en Ruhi Chaudhari Sun, 04 Oct 2026 19:49:40 +0000 https://dev.to/ruhichaudhari6/focusbuddy-offline-open-source-ai-task-chunker-for-executive-dysfunction-1p4b https://dev.to/ruhichaudhari6/focusbuddy-offline-open-source-ai-task-chunker-for-executive-dysfunction-1p4b <p><em>This is a submission for the <a href="https://dev.to/challenges/hacktoberfest-weekend-2026-10-01">Hacktoberfest Weekend Challenge: Build for a Friend</a></em></p> <h2> What I Built </h2> <p>FocusBuddy is a 100% offline, privacy-first task decomposer designed to help individuals dealing with ADHD or executive dysfunction. When facing overwhelming projects—such as "make notes on certain topics of DBMS"—FocusBuddy uses local open-source AI to break the goal into bite-sized, 5-minute micro-steps. It presents these steps strictly one at a time to eliminate overthinking and cognitive overload.</p> <p>I built this for a friend who frequently experiences task paralysis when starting large academic projects. What they said after testing it:</p> <blockquote> <p><em>"Seeing only one step at a time stopped me from overthinking and helped me actually start studying without feeling overwhelmed!"</em></p> </blockquote> <h2> Demo </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/upload-your-screenshot-here.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/upload-your-screenshot-here.png" alt="FocusBuddy UI Interface" width="800" height="400"></a><br> <em>(Run <code>index.html</code> in any browser while Ollama is running locally).</em></p> <h2> Code </h2> <p>Here is the complete source code (<code>index.html</code>) used to build the local frontend:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span> <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>FocusBuddy<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">600px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">50px</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#0f172a</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#f8fafc</span><span class="p">;</span> <span class="p">}</span> <span class="nt">input</span><span class="o">,</span> <span class="nt">button</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span> <span class="nl">box-sizing</span><span class="p">:</span> <span class="n">border-box</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span> <span class="nt">input</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#1e293b</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#334155</span><span class="p">;</span> <span class="p">}</span> <span class="nt">button</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#2563eb</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span> <span class="p">}</span> <span class="nt">button</span><span class="nd">:hover</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#1d4ed8</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.step-box</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#1e293b</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span> <span class="nl">border-left</span><span class="p">:</span> <span class="m">5px</span> <span class="nb">solid</span> <span class="m">#3b82f6</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.hidden</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.btn-group</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="py">gap</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">15px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> <span class="nt">&lt;h1&gt;</span>⚡ FocusBuddy<span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;p&gt;</span>Your offline, low-pressure task chunker.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"input-section"</span><span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"taskInput"</span> <span class="na">placeholder=</span><span class="s">"What task feels overwhelming? (e.g., Clean my desk)"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">onclick=</span><span class="s">"breakDownTask()"</span><span class="nt">&gt;</span>Break It Down 🚀<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"loading"</span> <span class="na">class=</span><span class="s">"hidden"</span> <span class="na">style=</span><span class="s">"margin-top:20px;"</span><span class="nt">&gt;</span>⏳ Breaking task into micro-steps...<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"step-section"</span> <span class="na">class=</span><span class="s">"hidden"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"step-box"</span><span class="nt">&gt;</span> <span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"stepHeader"</span><span class="nt">&gt;</span>Step 1<span class="nt">&lt;/h3&gt;</span> <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"stepText"</span> <span class="na">style=</span><span class="s">"font-size: 18px; line-height: 1.5;"</span><span class="nt">&gt;&lt;/p&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">onclick=</span><span class="s">"prevStep()"</span><span class="nt">&gt;</span>⬅️ Previous<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">onclick=</span><span class="s">"nextStep()"</span><span class="nt">&gt;</span>Next ➡️<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="kd">let</span> <span class="nx">steps</span> <span class="o">=</span> <span class="p">[];</span> <span class="kd">let</span> <span class="nx">currentStep</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="k">async</span> <span class="kd">function</span> <span class="nf">breakDownTask</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">task</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">taskInput</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">task</span><span class="p">.</span><span class="nf">trim</span><span class="p">())</span> <span class="k">return</span><span class="p">;</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">loading</span><span class="dl">'</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">step-section</span><span class="dl">'</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">prompt</span> <span class="o">=</span> <span class="s2">`Break down the task "</span><span class="p">${</span><span class="nx">task</span><span class="p">}</span><span class="s2">" into 4 to 6 bite-sized, 5-minute micro-steps. Return ONLY a valid JSON array of strings, like ["Step 1 text", "Step 2 text"]. Do not include markdown or commentary.`</span><span class="p">;</span> <span class="k">try</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">http://localhost:11434/api/generate</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">method</span><span class="p">:</span> <span class="dl">'</span><span class="s1">POST</span><span class="dl">'</span><span class="p">,</span> <span class="na">headers</span><span class="p">:</span> <span class="p">{</span> <span class="dl">'</span><span class="s1">Content-Type</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">application/json</span><span class="dl">'</span> <span class="p">},</span> <span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">stringify</span><span class="p">({</span> <span class="na">model</span><span class="p">:</span> <span class="dl">'</span><span class="s1">llama3.2</span><span class="dl">'</span><span class="p">,</span> <span class="na">prompt</span><span class="p">:</span> <span class="nx">prompt</span><span class="p">,</span> <span class="na">stream</span><span class="p">:</span> <span class="kc">false</span> <span class="p">})</span> <span class="p">});</span> <span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nf">json</span><span class="p">();</span> <span class="kd">let</span> <span class="nx">text</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">response</span><span class="p">.</span><span class="nf">trim</span><span class="p">();</span> <span class="k">if </span><span class="p">(</span><span class="nx">text</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">'</span><span class="s1">``` </span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span> <span class="nx">text</span> <span class="o">=</span> <span class="nx">text</span><span class="p">.</span><span class="nf">replace</span><span class="p">(</span><span class="sr">/</span><span class="err"> </span><span class="p">{</span><span class="o">%</span> <span class="nx">raw</span> <span class="o">%</span><span class="p">}</span> <span class="s2">```json|```</span> <span class="p">{</span><span class="o">%</span> <span class="nx">endraw</span> <span class="o">%</span><span class="p">}</span> <span class="sr">/g, ''</span><span class="se">)</span><span class="sr">.trim</span><span class="se">()</span><span class="err">; </span> <span class="p">}</span> <span class="nx">steps</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">parse</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span> <span class="nx">currentStep</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nf">showStep</span><span class="p">();</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Error connecting to Ollama. Make sure Ollama is running in the background!</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="k">finally</span> <span class="p">{</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">loading</span><span class="dl">'</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">showStep</span><span class="p">()</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">steps</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">step-section</span><span class="dl">'</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nf">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">);</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">stepHeader</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerText</span> <span class="o">=</span> <span class="p">{</span><span class="o">%</span> <span class="nx">raw</span> <span class="o">%</span><span class="p">}</span><span class="s2">`Step </span><span class="p">${</span><span class="nx">currentStep</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}</span><span class="s2"> of </span><span class="p">${</span><span class="nx">steps</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span><span class="s2">`</span><span class="p">{</span><span class="o">%</span> <span class="nx">endraw</span> <span class="o">%</span><span class="p">};</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">stepText</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerText</span> <span class="o">=</span> <span class="nx">steps</span><span class="p">[</span><span class="nx">currentStep</span><span class="p">];</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">nextStep</span><span class="p">()</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="nx">currentStep</span> <span class="o">&lt;</span> <span class="nx">steps</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="nx">currentStep</span><span class="o">++</span><span class="p">;</span> <span class="nf">showStep</span><span class="p">();</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">🎉 Amazing work! You completed all the steps.</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">prevStep</span><span class="p">()</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">currentStep</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span> <span class="nx">currentStep</span><span class="o">--</span><span class="p">;</span> <span class="nf">showStep</span><span class="p">();</span> <span class="p">}</span> <span class="p">}</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> devchallenge weekendchallenge hf26challenge