<?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: Aditya</title>
    <description>The latest articles on DEV Community by Aditya (@aditya_007).</description>
    <link>https://dev.to/aditya_007</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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F947444%2F6f1f7420-60ac-43a8-98b3-bc6d7052ddc4.jpg</url>
      <title>DEV Community: Aditya</title>
      <link>https://dev.to/aditya_007</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/aditya_007"/>
    <language>en</language>
    <item>
      <title>I Built a Multi-Agent AI Debate Arena Inside Notion Using MCP — Meet The Council</title>
      <dc:creator>Aditya</dc:creator>
      <pubDate>Sun, 15 Mar 2026 11:06:24 +0000</pubDate>
      <link>https://dev.to/aditya_007/i-built-a-multi-agent-ai-debate-arena-inside-notion-using-mcp-meet-the-council-5b9e</link>
      <guid>https://dev.to/aditya_007/i-built-a-multi-agent-ai-debate-arena-inside-notion-using-mcp-meet-the-council-5b9e</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/notion-2026-03-04"&gt;Notion MCP Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;




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

&lt;p&gt;Engineering teams constantly face difficult technical decisions.&lt;/p&gt;

&lt;p&gt;PostgreSQL or MongoDB?&lt;br&gt;&lt;br&gt;
Microservices or monolith?&lt;br&gt;&lt;br&gt;
Offline-first mobile app or web-first architecture?&lt;/p&gt;

&lt;p&gt;Usually the process looks like this:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Engineers research the problem
&lt;/li&gt;
&lt;li&gt;Everyone has different opinions
&lt;/li&gt;
&lt;li&gt;A decision gets made
&lt;/li&gt;
&lt;li&gt;The reasoning disappears forever
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Six months later someone asks:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Why did we make this decision?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And nobody remembers.&lt;/p&gt;

&lt;p&gt;I wanted to fix that permanently.&lt;/p&gt;

&lt;p&gt;So I built &lt;strong&gt;The Council&lt;/strong&gt; — a &lt;strong&gt;multi-agent AI debate system that runs directly inside Notion&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Instead of a single AI giving generic advice, four specialized AI agents debate a technical question from completely different perspectives.&lt;/p&gt;

&lt;p&gt;Each agent:&lt;/p&gt;

&lt;p&gt;• Reads the current Notion page&lt;br&gt;&lt;br&gt;
• Generates an argument&lt;br&gt;&lt;br&gt;
• Counters other agents&lt;br&gt;&lt;br&gt;
• Writes its reasoning back to Notion  &lt;/p&gt;

&lt;p&gt;After several rounds of debate, an &lt;strong&gt;Arbiter AI evaluates the arguments and produces the final decision&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Everything gets documented:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;every argument
&lt;/li&gt;
&lt;li&gt;every counter-argument
&lt;/li&gt;
&lt;li&gt;the final verdict
&lt;/li&gt;
&lt;li&gt;action items
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Technical decisions become &lt;strong&gt;permanent institutional knowledge&lt;/strong&gt;.&lt;/p&gt;


&lt;h2&gt;
  
  
  Meet The Council
&lt;/h2&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%2Fth5m9xing8xfqjfjo8ug.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%2Fth5m9xing8xfqjfjo8ug.png" alt="Council Dashboard"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Each AI agent represents a different engineering priority.&lt;/p&gt;

&lt;p&gt;⚔️ &lt;strong&gt;SENTINEL — Security &amp;amp; Risk&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Focuses on vulnerabilities, worst-case scenarios, and system failures.&lt;/p&gt;

&lt;p&gt;⚡ &lt;strong&gt;MERCURY — Performance &amp;amp; Speed&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Analyzes latency, throughput, and developer velocity.&lt;/p&gt;

&lt;p&gt;💰 &lt;strong&gt;MIDAS — Cost &amp;amp; Business Value&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Translates engineering decisions into ROI and operational cost.&lt;/p&gt;

&lt;p&gt;🌍 &lt;strong&gt;ATLAS — Scale &amp;amp; Architecture&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Focuses on long-term scalability and technical debt.&lt;/p&gt;

&lt;p&gt;Instead of balancing perspectives, each agent &lt;strong&gt;defends its viewpoint strongly&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;That tension produces realistic engineering debates.&lt;/p&gt;


&lt;h2&gt;
  
  
  A Real Debate Example
&lt;/h2&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%2F5d8sz37a9wpqee19m4ok.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%2F5d8sz37a9wpqee19m4ok.png" alt="Live Debate Feed"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I asked The Council:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Should we build an offline-first mobile app?&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;
  
  
  Round 1 — Opening Arguments
&lt;/h3&gt;

&lt;p&gt;Each agent writes its argument directly to the Notion page.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;SENTINEL&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Offline-first apps store sensitive data locally.&lt;br&gt;&lt;br&gt;
A compromised device could expose user data instantly.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MERCURY&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Our web application deploys in seconds and serves requests with low latency.&lt;br&gt;&lt;br&gt;
Mobile build pipelines slow development speed dramatically.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MIDAS&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Offline-first development costs significantly more than web-first architecture.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ATLAS&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Offline synchronization introduces complexity that becomes dangerous at scale.&lt;/p&gt;


&lt;h3&gt;
  
  
  Round 2 — Counter Arguments
&lt;/h3&gt;

&lt;p&gt;Agents read the Notion page through MCP and challenge each other's claims.&lt;/p&gt;

&lt;p&gt;Security challenges performance.&lt;br&gt;&lt;br&gt;
Cost challenges scale assumptions.&lt;br&gt;&lt;br&gt;
Performance challenges cost projections.&lt;/p&gt;

&lt;p&gt;The debate evolves dynamically.&lt;/p&gt;


&lt;h2&gt;
  
  
  The Verdict
&lt;/h2&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%2F0adtaagepcp32jynb9bd.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%2F0adtaagepcp32jynb9bd.png" alt="Consensus Result"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After two rounds, the Arbiter evaluates every argument and produces the final decision.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
DECISION:
Build a web-first architecture with PWA offline support.

REASONING:
This approach maintains centralized security controls,
preserves fast development velocity, minimizes cost,
and avoids large-scale synchronization complexity.

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;The system automatically generates action items:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Implement Service Workers&lt;/li&gt;
&lt;li&gt;Add IndexedDB caching&lt;/li&gt;
&lt;li&gt;Build unified CI/CD pipeline&lt;/li&gt;
&lt;li&gt;Audit client-side storage security&lt;/li&gt;
&lt;li&gt;Design scalable backend APIs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Everything is written directly into the Notion page.&lt;/p&gt;


&lt;h2&gt;
  
  
  What Happens When AI Cannot Decide?
&lt;/h2&gt;

&lt;p&gt;Some engineering problems don't have a clear answer.&lt;/p&gt;

&lt;p&gt;Instead of pretending certainty, The Council can declare a &lt;strong&gt;deadlock&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The Notion page shows:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
⚖️ THE COUNCIL IS DEADLOCKED

Cast your deciding vote:

⚔️ SENTINEL — prioritize security
⚡ MERCURY — prioritize speed
💰 MIDAS — prioritize cost
🌍 ATLAS — prioritize scale

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;The engineer reads the debate and votes using the &lt;strong&gt;Vote property in Notion&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This creates a &lt;strong&gt;human-in-the-loop decision system&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;AI prepares the analysis.&lt;br&gt;&lt;br&gt;
Humans make the final call when needed.&lt;/p&gt;


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

&lt;p&gt;

  &lt;iframe src="https://www.youtube.com/embed/y7U4GAHCx0A"&gt;
  &lt;/iframe&gt;


&lt;/p&gt;

&lt;p&gt;This demo shows the full workflow:&lt;/p&gt;

&lt;p&gt;1️⃣ Create a Notion page&lt;br&gt;&lt;br&gt;
2️⃣ Set Status = &lt;code&gt;pending&lt;/code&gt;&lt;br&gt;&lt;br&gt;
3️⃣ The Council begins debating&lt;br&gt;&lt;br&gt;
4️⃣ Agents write arguments live&lt;br&gt;&lt;br&gt;
5️⃣ The Arbiter publishes a final decision  &lt;/p&gt;


&lt;h2&gt;
  
  
  Show us the code
&lt;/h2&gt;

&lt;p&gt;GitHub repository:&lt;/p&gt;

&lt;p&gt;

&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/TheCoderAdi" rel="noopener noreferrer"&gt;
        TheCoderAdi
      &lt;/a&gt; / &lt;a href="https://github.com/TheCoderAdi/the-council" rel="noopener noreferrer"&gt;
        the-council
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;The Council — Multi-Agent AI Debate Arena (Notion MCP)&lt;/h1&gt;
&lt;/div&gt;

&lt;p&gt;&lt;a href="https://github.com/TheCoderAdi/the-council/./LICENSE" rel="noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/6d1da82f4590c6ed7498e301e0dfb2167bf66a6d74283862b3581537569c8641/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c75652e7376673f6c6f676f3d6f70656e736f75726365696e6974696174697665" alt="License: MIT"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A Multi-Agent debate system that runs inside Notion using the Model Context Protocol (MCP)
Four agents with distinct personas debate a technical question on a Notion page; an arbiter then writes a final decision, reasoning, and action items back to the page. Everything is done via MCP tools—no direct REST calls to Notion.&lt;/p&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Quick summary&lt;/h2&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Input: a Notion database page with the &lt;code&gt;Question&lt;/code&gt; title and &lt;code&gt;Status: pending&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Process: watcher detects pending pages → opens MCP connection → runs 3 rounds (based on your choice) of parallel agent debates → arbiter writes decision.&lt;/li&gt;
&lt;li&gt;Output: Notion page updated with debate callouts, &lt;code&gt;Decision&lt;/code&gt; rich text, &lt;code&gt;Status&lt;/code&gt; set to &lt;code&gt;completed&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Agents: ⚔️ SENTINEL (security), ⚡ MERCURY (performance), 💰 MIDAS (cost), 🌍 ATLAS (scale).&lt;/p&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;What you'll find in this repo&lt;/h2&gt;

&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;api/&lt;/code&gt; — Express server and SSE endpoints for streaming debates to the dashboard.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;src/core/mcpClient.js&lt;/code&gt; —…&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/TheCoderAdi/the-council" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;




&lt;p&gt;Run locally:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/TheCoderAdi/the-council
&lt;span class="nb"&gt;cd &lt;/span&gt;the-council
npm &lt;span class="nb"&gt;install
cp&lt;/span&gt; .env.example .env
npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example &lt;code&gt;.env&lt;/code&gt; configuration:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight properties"&gt;&lt;code&gt;&lt;span class="py"&gt;NOTION_API_KEY&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;secret_xxx&lt;/span&gt;
&lt;span class="py"&gt;NOTION_DATABASE_ID&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;xxx&lt;/span&gt;

&lt;span class="py"&gt;GEMINI_API_KEY&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;xxx&lt;/span&gt;
&lt;span class="py"&gt;GROQ_API_KEY&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;xxx&lt;/span&gt;

&lt;span class="py"&gt;LLM_MAX_CONCURRENCY&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;2&lt;/span&gt;
&lt;span class="py"&gt;LLM_MIN_DELAY_MS&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;150&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  How I Used Notion MCP
&lt;/h2&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%2Fdad49hakny0m7bbj91md.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%2Fdad49hakny0m7bbj91md.png" alt="Notion Debate Page"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This project is built entirely around &lt;strong&gt;Notion MCP (Model Context Protocol)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Traditional integrations use the &lt;strong&gt;Notion REST API&lt;/strong&gt;, where external code pushes data into Notion.&lt;/p&gt;

&lt;p&gt;MCP changes the model completely.&lt;/p&gt;

&lt;p&gt;With MCP, AI agents can &lt;strong&gt;use Notion as native workspace tools&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Agents can:&lt;/p&gt;

&lt;p&gt;• read page content&lt;br&gt;
• write blocks&lt;br&gt;
• update properties&lt;br&gt;
• query databases&lt;/p&gt;

&lt;p&gt;Example MCP usage:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;mcp&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;callTool&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;API-get-block-children&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;block_id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;pageId&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Writing an argument block:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;mcp&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;callTool&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;API-patch-block-children&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;block_id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;pageId&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;children&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;callout&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;callout&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;rich_text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;}],&lt;/span&gt;
        &lt;span class="na"&gt;icon&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;emoji&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;⚔️&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The agents operate inside the Notion workspace just like human collaborators.&lt;/p&gt;




&lt;h2&gt;
  
  
  Architecture
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Notion Database
        │
        ▼
Notion Watcher
(detects pending debates)
        │
        ▼
Council Orchestrator
        │
        ├── SENTINEL
        ├── MERCURY
        ├── MIDAS
        └── ATLAS
        │
        ▼
Arbiter
        │
        ▼
Decision written to Notion
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A real-time dashboard streams debate progress using &lt;strong&gt;Server-Sent Events&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Technical Stack
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Layer&lt;/th&gt;
&lt;th&gt;Technology&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;MCP Server&lt;/td&gt;
&lt;td&gt;@notionhq/notion-mcp-server&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;MCP SDK&lt;/td&gt;
&lt;td&gt;@modelcontextprotocol/sdk&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Primary LLM&lt;/td&gt;
&lt;td&gt;Gemini 2.0 Flash&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Fallback LLM&lt;/td&gt;
&lt;td&gt;Groq&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Backend&lt;/td&gt;
&lt;td&gt;Node.js + Express&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Streaming&lt;/td&gt;
&lt;td&gt;Server-Sent Events&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Frontend&lt;/td&gt;
&lt;td&gt;Vanilla JavaScript&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  Why This Matters
&lt;/h2&gt;

&lt;p&gt;Most technical decisions disappear into Slack threads and meetings.&lt;/p&gt;

&lt;p&gt;The Council turns engineering debates into &lt;strong&gt;structured, searchable knowledge&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Future engineers can see exactly:&lt;/p&gt;

&lt;p&gt;• what arguments were made&lt;br&gt;
• which tradeoffs were considered&lt;br&gt;
• why the final decision was chosen&lt;/p&gt;

&lt;p&gt;Instead of repeating the same debate every year, teams build &lt;strong&gt;decision history&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Try It
&lt;/h2&gt;

&lt;p&gt;Drop a technical question in the comments.&lt;/p&gt;

&lt;p&gt;I'll run it through &lt;strong&gt;The Council&lt;/strong&gt; and share the full debate output.&lt;/p&gt;




&lt;p&gt;Built for the &lt;strong&gt;Notion MCP Challenge&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>notionchallenge</category>
      <category>mcp</category>
      <category>ai</category>
    </item>
    <item>
      <title>🚀 Stop Typing Long Terminal Commands. Use Aliases Instead</title>
      <dc:creator>Aditya</dc:creator>
      <pubDate>Mon, 02 Mar 2026 07:09:33 +0000</pubDate>
      <link>https://dev.to/aditya_007/stop-typing-long-terminal-commands-use-aliases-instead-m30</link>
      <guid>https://dev.to/aditya_007/stop-typing-long-terminal-commands-use-aliases-instead-m30</guid>
      <description>&lt;p&gt;As developers, we optimize APIs, databases, and smart contracts.&lt;/p&gt;

&lt;p&gt;But we rarely optimize our own workflow.&lt;/p&gt;

&lt;p&gt;I realized I was typing the same commands every single day:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;npm run dev&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;git add .&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;git commit -m "message"&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;git push&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;docker compose up --build&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;npx hardhat test&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;forge build&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It seems small.&lt;/p&gt;

&lt;p&gt;But friction compounds.&lt;/p&gt;

&lt;p&gt;So I reduced it.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 What Are Shell Aliases?
&lt;/h2&gt;

&lt;p&gt;Aliases are shortcuts you define in your shell (&lt;code&gt;bash&lt;/code&gt; or &lt;code&gt;zsh&lt;/code&gt;) that map short commands to longer ones.&lt;/p&gt;

&lt;p&gt;Instead of typing:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You type:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nd
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Same result. Less friction.&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠 Step 1: Open Your Shell Config
&lt;/h2&gt;

&lt;p&gt;If you’re using:&lt;/p&gt;

&lt;h3&gt;
  
  
  Zsh (Mac / Linux default nowadays)
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nano ~/.zshrc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Bash
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nano ~/.bashrc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  ✍ Step 2: Add Aliases
&lt;/h2&gt;

&lt;p&gt;Here are some practical ones for Full-Stack + Web3 developers:&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;# 📦 NPM&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;nd&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"npm run dev"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;nb&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"npm run build"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;ni&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"npm install"&lt;/span&gt;

&lt;span class="c"&gt;# 🌿 Git&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;gs&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"git status"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;ga&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"git add ."&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;gc&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"git commit -m"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;gp&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"git push"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;gpl&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"git pull"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;gcb&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"git checkout -b"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;gl&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"git log --oneline"&lt;/span&gt;

&lt;span class="c"&gt;# 🐳 Docker&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;dcu&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"docker compose up"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;dcub&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"docker compose up --build"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;dcd&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"docker compose down"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;dps&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"docker ps"&lt;/span&gt;

&lt;span class="c"&gt;# 🔐 Hardhat&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;hhc&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"npx hardhat compile"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;hht&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"npx hardhat test"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;hhn&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"npx hardhat node"&lt;/span&gt;

&lt;span class="c"&gt;# ⚒ Forge&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;fb&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"forge build"&lt;/span&gt;
&lt;span class="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;ft&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"forge test"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Save the file.&lt;/p&gt;

&lt;p&gt;Then reload:&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="nb"&gt;source&lt;/span&gt; ~/.zshrc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(Or &lt;code&gt;source ~/.bashrc&lt;/code&gt;)&lt;/p&gt;

&lt;p&gt;Done.&lt;/p&gt;




&lt;h2&gt;
  
  
  🔥 Real Before vs After
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Before
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git add &lt;span class="nb"&gt;.&lt;/span&gt;
git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"fix: JWT verification bug"&lt;/span&gt;
git push
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  After
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ga
gc &lt;span class="s2"&gt;"fix: JWT verification bug"&lt;/span&gt;
gp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Before
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker compose up &lt;span class="nt"&gt;--build&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  After
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;dcub
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Before
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git checkout &lt;span class="nt"&gt;-b&lt;/span&gt; feature/jwt-auth
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  After
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;gcb feature/jwt-auth
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  ⚡ Level 2: Combine Commands
&lt;/h2&gt;

&lt;p&gt;You can even chain commands:&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="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;gacp&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"git add . &amp;amp;&amp;amp; git commit -m"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;gacp &lt;span class="s2"&gt;"feat: add middleware"&lt;/span&gt;
gp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;One step closer to flow state.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎯 Why This Matters
&lt;/h2&gt;

&lt;p&gt;This isn’t about saving 3 seconds.&lt;/p&gt;

&lt;p&gt;It’s about reducing cognitive load.&lt;/p&gt;

&lt;p&gt;When friction decreases:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You stay in flow longer&lt;/li&gt;
&lt;li&gt;You ship faster&lt;/li&gt;
&lt;li&gt;You feel less drained&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Most developers try to optimize performance.&lt;/p&gt;

&lt;p&gt;Few optimize themselves.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧩 Bonus: Modern Git Alternative
&lt;/h2&gt;

&lt;p&gt;Instead of:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git checkout &lt;span class="nt"&gt;-b&lt;/span&gt; feature/auth
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git switch &lt;span class="nt"&gt;-c&lt;/span&gt; feature/auth
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And alias it:&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="nb"&gt;alias &lt;/span&gt;&lt;span class="nv"&gt;gsw&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"git switch -c"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  💭 Final Thought
&lt;/h2&gt;

&lt;p&gt;Productivity isn’t about working more hours.&lt;/p&gt;

&lt;p&gt;It’s about removing unnecessary resistance from your system.&lt;/p&gt;

&lt;p&gt;If you’re a developer:&lt;/p&gt;

&lt;p&gt;What’s one shortcut you can’t live without?&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>git</category>
      <category>webdev</category>
      <category>devops</category>
    </item>
    <item>
      <title>🏏 CrickSquad — The App That Replaced 50 WhatsApp Messages for My Cricket Group</title>
      <dc:creator>Aditya</dc:creator>
      <pubDate>Sun, 01 Mar 2026 17:42:36 +0000</pubDate>
      <link>https://dev.to/aditya_007/cricksquad-the-app-that-replaced-50-whatsapp-messages-for-my-cricket-group-2cpm</link>
      <guid>https://dev.to/aditya_007/cricksquad-the-app-that-replaced-50-whatsapp-messages-for-my-cricket-group-2cpm</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/weekend-2026-02-28"&gt;DEV Weekend Challenge: Community&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Community
&lt;/h2&gt;

&lt;p&gt;I'm part of a &lt;strong&gt;weekend cricket group of 25 people&lt;/strong&gt;. Every Sunday at 7 AM, we play cricket at a local turf ground. It's been going on for 3 years now — rain or shine.&lt;/p&gt;

&lt;p&gt;But here's the thing nobody talks about: &lt;strong&gt;organizing a casual cricket match is harder than playing it.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Every single week, the same chaos unfolds:&lt;/p&gt;

&lt;p&gt;🔴 &lt;strong&gt;WhatsApp Hell&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Who's coming this Sunday?"&lt;br&gt;
50+ messages later... still no clear count.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;🔴 &lt;strong&gt;Team Selection Drama&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Last time teams were unfair!"&lt;br&gt;
"Why am I always bowling first?"&lt;br&gt;
Every. Single. Week.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;🔴 &lt;strong&gt;Money Collection Nightmare&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Bro, you haven't paid for the last 3 matches"&lt;br&gt;
"I paid! Check the chat"&lt;br&gt;
&lt;em&gt;scrolls through 500 messages&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;🔴 &lt;strong&gt;No Memory of Performance&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"How many runs did I score last month?"&lt;br&gt;
Nobody knows. No records. No stats.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;🔴 &lt;strong&gt;Zero Recognition&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Score 50 runs on Sunday. By Monday, nobody remembers.&lt;br&gt;
Attendance drops because people feel "it doesn't matter."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I know &lt;strong&gt;millions of weekend sports groups&lt;/strong&gt; around the world face the same problems. So this weekend, I decided to fix it.&lt;/p&gt;




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

&lt;h3&gt;
  
  
  🏏 CrickSquad — Less WhatsApp. More Cricket.
&lt;/h3&gt;

&lt;p&gt;An all-in-one web app for weekend cricket groups that handles everything from RSVP to AI-powered match reports.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;One app to replace 50 WhatsApp messages every weekend.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Core Features:
&lt;/h3&gt;

&lt;p&gt;🎯 &lt;strong&gt;One-Tap RSVP&lt;/strong&gt;&lt;br&gt;
No more "who's coming?" chaos. Open the app, tap Yes/No/Maybe. Done. Everyone sees the count in real-time with a countdown to the deadline.&lt;/p&gt;

&lt;p&gt;⚖️ &lt;strong&gt;Smart Team Balancer&lt;/strong&gt;&lt;br&gt;
Every player has skill ratings (batting, bowling, fielding). The algorithm creates the most balanced 2 teams possible. No more "unfair teams" complaints. Ever.&lt;/p&gt;

&lt;p&gt;🤖 &lt;strong&gt;AI-Powered Features (Gemini)&lt;/strong&gt;&lt;br&gt;
This is where it gets fun:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;AI Team Analysis&lt;/strong&gt; — Gemini explains &lt;em&gt;why&lt;/em&gt; the team split is balanced&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI Match Reports&lt;/strong&gt; — Commentary-style match summaries after every game&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI Player Insights&lt;/strong&gt; — "You're the Virat Kohli of your group!" with actual improvement tips&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI POTM Suggestions&lt;/strong&gt; — Top 3 Player of Match candidates with reasoning&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Smart Reminders&lt;/strong&gt; — Personalized nudge messages for pending RSVPs&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Season Analytics&lt;/strong&gt; — Trends, fun facts, predictions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;💰 &lt;strong&gt;Expense Splitter&lt;/strong&gt;&lt;br&gt;
Set ground cost → auto-split among players → track who paid → send reminders. Running balances across multiple matches so you always know who owes what.&lt;/p&gt;

&lt;p&gt;📊 &lt;strong&gt;Scorecards &amp;amp; Leaderboards&lt;/strong&gt;&lt;br&gt;
Enter batting/bowling stats after each match. Auto-calculated averages, strike rates, economy rates. Season leaderboards with medals 🥇🥈🥉&lt;/p&gt;

&lt;p&gt;🎲 &lt;strong&gt;Digital Toss&lt;/strong&gt;&lt;br&gt;
Animated coin flip. No more "my coin, my call" disputes.&lt;/p&gt;

&lt;p&gt;📢 &lt;strong&gt;Polls &amp;amp; Announcements&lt;/strong&gt;&lt;br&gt;
"Should we play Saturday instead?" — Quick polls with deadlines. Important announcements that don't get buried in chat.&lt;/p&gt;

&lt;p&gt;📸 &lt;strong&gt;Match Gallery&lt;/strong&gt;&lt;br&gt;
Upload and share photos from every match. Organized per game day.&lt;/p&gt;

&lt;p&gt;🏟️ &lt;strong&gt;Venue Management&lt;/strong&gt;&lt;br&gt;
Save venues with address, Google Maps link, facilities, pricing. One-tap directions.&lt;/p&gt;

&lt;p&gt;🔥 &lt;strong&gt;Mail System&lt;/strong&gt;&lt;br&gt;
When admin creates poll, announcement, pay notifications, new match alert.&lt;/p&gt;


&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;
&lt;h3&gt;
  
  
  🔗 Github Code: &lt;a href="https://github.com/TheCoderAdi/cricksquad" rel="noopener noreferrer"&gt;https://github.com/TheCoderAdi/cricksquad&lt;/a&gt;
&lt;/h3&gt;
&lt;h3&gt;
  
  
  Screenshots:
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Project Haul&lt;/strong&gt;&lt;br&gt;


&lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://excalidraw.com/#json=gUSkoJlNB5ek0xpCJ00gb,tfN1EQmbBmFNzanBON-jRw" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fexcalidraw.com%2Fog-image-3.png" height="auto" class="m-0"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://excalidraw.com/#json=gUSkoJlNB5ek0xpCJ00gb,tfN1EQmbBmFNzanBON-jRw" rel="noopener noreferrer" class="c-link"&gt;
            Excalidraw Whiteboard
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fexcalidraw.com%2Ffavicon-32x32.png"&gt;
          excalidraw.com
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;




&lt;p&gt;&lt;strong&gt;Landing Page&lt;/strong&gt;&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%2Fk03m9iiy3dcokec348f3.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%2Fk03m9iiy3dcokec348f3.png" alt="Landing Page"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Dashboard — Upcoming Match + RSVP&lt;/strong&gt;&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%2Fl551tv1871lgtvumqgj2.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%2Fl551tv1871lgtvumqgj2.png" alt="Dashboard"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Team Balancer — AI-Powered Fair Teams&lt;/strong&gt;&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%2Fxfvj5u3kze4olsb79nh2.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%2Fxfvj5u3kze4olsb79nh2.png" alt="Teams"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Leaderboard — Season Stats&lt;/strong&gt;&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%2F6x0xo73mydv1xopc8g9r.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%2F6x0xo73mydv1xopc8g9r.png" alt="Leaderboard_1"&gt;&lt;/a&gt;&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%2Fc4zth5w382dvfpbe5nzg.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%2Fc4zth5w382dvfpbe5nzg.png" alt="Leaderboard_2"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI Match Report&lt;/strong&gt;&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%2Fpc7uj4n0po090kv6o7qj.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%2Fpc7uj4n0po090kv6o7qj.png" alt="AI Summary"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Expense Tracker&lt;/strong&gt;&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%2Fhln149bujht0jei2kte8.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%2Fhln149bujht0jei2kte8.png" alt="Expenses"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Scorecard&lt;/strong&gt;&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%2F4hvmawq0ekl5uyh27ar5.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%2F4hvmawq0ekl5uyh27ar5.png" alt="Scorecard_1"&gt;&lt;/a&gt;&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%2Fjvx1okppxhqrywmo3jr2.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%2Fjvx1okppxhqrywmo3jr2.png" alt="Scorecard_2"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Profile + AI Player Insights&lt;/strong&gt;&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%2Fggaj7ep5rdmjuglnuxu4.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%2Fggaj7ep5rdmjuglnuxu4.png" alt="Profile_1"&gt;&lt;/a&gt;&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%2Fvecpohttxx29f4kv68ff.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%2Fvecpohttxx29f4kv68ff.png" alt="Profile_2"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Venue Page&lt;/strong&gt;&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%2Fj9e12s3w48j8jytzb02x.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%2Fj9e12s3w48j8jytzb02x.png" alt="Venue"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Match Gallery&lt;/strong&gt;&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%2Fl2ksj8bxq3kah7nc7omb.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%2Fl2ksj8bxq3kah7nc7omb.png" alt="Gallery"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Key Algorithms
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Team Balancer Algorithm:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;balanceTeams&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;players&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Sort by overall rating (descending)&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;sorted&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[...&lt;/span&gt;&lt;span class="nx"&gt;players&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;sort&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;overallRating&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;overallRating&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;teamA&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt; &lt;span class="nx"&gt;teamB&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;ratingA&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;ratingB&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// Greedy assignment: add to weaker team&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;player&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;sorted&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ratingA&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;ratingB&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;teamA&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="nx"&gt;ratingA&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;overallRating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;teamB&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="nx"&gt;ratingB&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;overallRating&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="c1"&gt;// Role balancing pass (ensure bowlers are distributed)&lt;/span&gt;
  &lt;span class="c1"&gt;// ... swap players to balance roles without hurting ratings&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;teamA&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;teamB&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Skill Rating System:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Weighted by player role&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;weights&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;batsman&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;    &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;batting&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;bowling&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;fielding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.3&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;bowler&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;     &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;batting&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;bowling&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;fielding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.3&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;allrounder&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;batting&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.35&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;bowling&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.35&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;fielding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.3&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;keeper&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;     &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;batting&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;bowling&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;fielding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.5&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;overallRating&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;batting&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;w&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;batting&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;bowling&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;w&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bowling&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;fielding&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;w&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;fielding&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Gemini AI Integration:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;GoogleGenerativeAI&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@google/generative-ai&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;genAI&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;GoogleGenerativeAI&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GEMINI_API_KEY&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;generateMatchSummary&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;matchData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;model&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;genAI&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getGenerativeModel&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;gemini-1.5-flash&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`You are a cricket commentator. Write a fun match report...`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;model&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;generateContent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Tech Stack
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Layer&lt;/th&gt;
&lt;th&gt;Technology&lt;/th&gt;
&lt;th&gt;Why&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Frontend&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;React + Vite&lt;/td&gt;
&lt;td&gt;Fast dev experience, instant HMR&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Styling&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Tailwind CSS&lt;/td&gt;
&lt;td&gt;Rapid UI development&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;State&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Zustand&lt;/td&gt;
&lt;td&gt;Lightweight, no boilerplate&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Data Fetching&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;React Query + Axios&lt;/td&gt;
&lt;td&gt;Caching, loading states&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Animations&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Framer Motion&lt;/td&gt;
&lt;td&gt;Smooth page transitions&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Backend&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Node.js + Express&lt;/td&gt;
&lt;td&gt;Fast REST API development&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Database&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;MongoDB + Mongoose&lt;/td&gt;
&lt;td&gt;Flexible schema for cricket data&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;AI&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Google Gemini&lt;/td&gt;
&lt;td&gt;Fast, accurate, free tier&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Image Storage&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Cloudinary&lt;/td&gt;
&lt;td&gt;Auto-compression, CDN delivery&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Auth&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;JWT + bcrypt&lt;/td&gt;
&lt;td&gt;Secure, stateless authentication&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Architecture
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;React → Axios → Express API → MongoDB Atlas
                                    ↓
                              Gemini AI API
                              Cloudinary CDN
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Development Timeline
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;When&lt;/th&gt;
&lt;th&gt;What&lt;/th&gt;
&lt;th&gt;Hours&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Friday Evening&lt;/td&gt;
&lt;td&gt;Project setup, DB models, Express config&lt;/td&gt;
&lt;td&gt;3h&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Saturday Morning&lt;/td&gt;
&lt;td&gt;Auth, Groups, Matches, RSVP APIs&lt;/td&gt;
&lt;td&gt;5h&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Saturday Afternoon&lt;/td&gt;
&lt;td&gt;Teams, Expenses, Scorecard, Leaderboard APIs&lt;/td&gt;
&lt;td&gt;5h&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Saturday Evening&lt;/td&gt;
&lt;td&gt;Frontend: Auth, Dashboard, RSVP pages&lt;/td&gt;
&lt;td&gt;4h&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sunday Morning&lt;/td&gt;
&lt;td&gt;Frontend: Teams, Expenses, Scorecard, Leaderboard&lt;/td&gt;
&lt;td&gt;5h&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sunday Afternoon&lt;/td&gt;
&lt;td&gt;Gemini AI integration, Polls, Gallery&lt;/td&gt;
&lt;td&gt;5h&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sunday Evening&lt;/td&gt;
&lt;td&gt;Polish &amp;amp; write this post&lt;/td&gt;
&lt;td&gt;3h&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Total&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;~30h&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Challenges &amp;amp; Learnings
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1. Team Balancing is NP-hard 😅&lt;/strong&gt;&lt;br&gt;
Turns out, perfectly splitting teams is a &lt;a href="https://en.wikipedia.org/wiki/Partition_problem" rel="noopener noreferrer"&gt;partition problem&lt;/a&gt;. The greedy algorithm works surprisingly well for groups under 30. Adding a role-balancing second pass made it even better.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Gemini AI JSON Responses&lt;/strong&gt;&lt;br&gt;
Getting Gemini to consistently return valid JSON was tricky. I added &lt;code&gt;replace(/&lt;/code&gt;`&lt;code&gt;json\n?/g, '')&lt;/code&gt; cleanup and wrapped everything in try-catch with user-friendly fallbacks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Real-Time Feel Without WebSockets&lt;/strong&gt;&lt;br&gt;
Instead of adding Socket.io complexity, I used React Query's &lt;code&gt;refetchInterval&lt;/code&gt; for the RSVP page. Feels real-time, fraction of the complexity.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Mobile-First is Non-Negotiable&lt;/strong&gt;&lt;br&gt;
Cricket groups use WhatsApp on phones. If this app isn't phone-friendly, nobody will use it. Every component was designed thumb-first.&lt;/p&gt;




&lt;h3&gt;
  
  
  What's Next
&lt;/h3&gt;

&lt;p&gt;If the cricket group likes it (they will 😎), here's what I'd add next:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;📱 React Native mobile app with push notifications&lt;/li&gt;
&lt;li&gt;💬 WhatsApp API integration for automated reminders&lt;/li&gt;
&lt;li&gt;🏏 Ball-by-ball live scoring&lt;/li&gt;
&lt;li&gt;📊 Season playoffs &amp;amp; tournament mode&lt;/li&gt;
&lt;li&gt;🎥 AI-generated highlight reels from uploaded videos&lt;/li&gt;
&lt;li&gt;💳 UPI payment integration (India-specific)&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  The Real Test
&lt;/h3&gt;

&lt;p&gt;I shared this with my cricket group yesterday. Within 10 minutes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;22 out of 25 members had joined&lt;/li&gt;
&lt;li&gt;18 RSVPs for this Sunday&lt;/li&gt;
&lt;li&gt;Zero WhatsApp messages about "who's coming?"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;That's the real demo.&lt;/strong&gt; 🏏&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Built with ❤️ and way too much coffee during the DEV Weekend Challenge.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;If you play weekend cricket (or any weekend sport), drop a comment — I'd love to hear about the chaos in YOUR group! 😄&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>weekendchallenge</category>
      <category>showdev</category>
      <category>ai</category>
    </item>
    <item>
      <title>Holistic Webdev: Office Space</title>
      <dc:creator>Aditya</dc:creator>
      <pubDate>Sat, 26 Jul 2025 16:52:40 +0000</pubDate>
      <link>https://dev.to/aditya_007/holistic-webdev-office-space-32gg</link>
      <guid>https://dev.to/aditya_007/holistic-webdev-office-space-32gg</guid>
      <description>&lt;p&gt;&lt;strong&gt;🌐 This is a submission for &lt;a href="https://dev.to/challenges/frontend/axero"&gt;Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;




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

&lt;p&gt;&lt;strong&gt;OrbitSpace&lt;/strong&gt; is a futuristic, glassmorphism-inspired intranet homepage designed to bring elegance, clarity, and functionality to digital office environments.&lt;/p&gt;

&lt;p&gt;I envisioned a modern digital workspace that merges essential internal tools with an aesthetic that inspires creativity. The layout includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✨ Hero section with office branding&lt;/li&gt;
&lt;li&gt;🚀 Quick links for essential tools&lt;/li&gt;
&lt;li&gt;👥 Team spotlight to highlight members&lt;/li&gt;
&lt;li&gt;📅 Upcoming events area&lt;/li&gt;
&lt;li&gt;📊 Metrics dashboard&lt;/li&gt;
&lt;li&gt;📚 Knowledge base&lt;/li&gt;
&lt;li&gt;🧭 Navigation bar with smooth UX&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The UI uses &lt;strong&gt;glassmorphism&lt;/strong&gt; layered with &lt;strong&gt;TailwindCSS&lt;/strong&gt; and &lt;strong&gt;ShadCN UI&lt;/strong&gt; components for responsiveness, theme consistency, and accessibility. Every card is softly frosted with transparency, letting the gradient background shine through.&lt;/p&gt;




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

&lt;p&gt;🔗 &lt;strong&gt;Live URL&lt;/strong&gt;: &lt;a href="https://orbitspace.vercel.app" rel="noopener noreferrer"&gt;Preview&lt;/a&gt;&lt;br&gt;
📁 &lt;strong&gt;Source Code&lt;/strong&gt;: &lt;a href="https://github.com/TheCoderAdi/orbitspace" rel="noopener noreferrer"&gt;GitHub Repo&lt;/a&gt;&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%2Fqsk8pdncdqpufgej20wo.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%2Fqsk8pdncdqpufgej20wo.png" alt="Home page" width="800" height="372"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🛣️ Journey
&lt;/h2&gt;

&lt;p&gt;I started this project with the idea of redefining how office intranets feel — moving away from outdated, cluttered dashboards into something that feels alive, light, and forward-thinking.&lt;/p&gt;

&lt;p&gt;Some things I'm proud of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Using &lt;strong&gt;glassmorphism&lt;/strong&gt; with care to avoid readability issues&lt;/li&gt;
&lt;li&gt;Seamless integration of &lt;strong&gt;ShadCN components&lt;/strong&gt; with Tailwind&lt;/li&gt;
&lt;li&gt;A fully modular component structure (HeroSection, Navigation, TeamSpotlight, etc.)&lt;/li&gt;
&lt;li&gt;Layout that adapts beautifully to different screen sizes&lt;/li&gt;
&lt;li&gt;Subtle hover interactions and gradients that enhance UX&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Throughout this build, I focused on component reusability and aesthetic balance, ensuring each section contributes to a cohesive whole.&lt;/p&gt;




&lt;h2&gt;
  
  
  👤 Author
&lt;/h2&gt;

&lt;p&gt;Made by &lt;a href="https://dev.to/aditya_007"&gt;@aditya_007&lt;/a&gt;&lt;br&gt;
Available for collaborations and open-source opportunities 🚀&lt;/p&gt;




&lt;h2&gt;
  
  
  📝 License
&lt;/h2&gt;

&lt;p&gt;MIT License — free to use with credit.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>frontendchallenge</category>
      <category>css</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Office Desk - CSS Art Edition</title>
      <dc:creator>Aditya</dc:creator>
      <pubDate>Sun, 20 Jul 2025 07:47:10 +0000</pubDate>
      <link>https://dev.to/aditya_007/office-desk-css-art-edition-5le</link>
      <guid>https://dev.to/aditya_007/office-desk-css-art-edition-5le</guid>
      <description>&lt;h2&gt;
  
  
  🎨 CSS Art: "Hacker's Haven" — Office Culture Redefined
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;This is a submission for &lt;a href="https://dev.to/challenges/frontend/axero"&gt;Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 Inspiration
&lt;/h2&gt;

&lt;p&gt;When you think of a modern digital workspace, what's more iconic than a dual-monitor setup, a mechanical keyboard, and a cozy desk filled with gadgets? For this CSS art challenge, I wanted to create a &lt;strong&gt;"Hacker-style home office"&lt;/strong&gt; scene — a space that feels alive with glowing monitors, RGB keys, and small but intentional details like a water bottle, headphones, mouse, and pyramid-shaped wall art.&lt;/p&gt;

&lt;p&gt;This is a tribute to those of us who spend countless hours building, coding, designing, and dreaming — in our own digital caves.&lt;/p&gt;




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

&lt;p&gt;Here's the final output of my CSS office setup:&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%2Fkcwf06obr5bt7g8ivvnv.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%2Fkcwf06obr5bt7g8ivvnv.png" alt="Hacker Setup Screenshot" width="800" height="505"&gt;&lt;/a&gt;&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%2Feao5r0iyh5ruk5zs395j.gif" 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%2Feao5r0iyh5ruk5zs395j.gif" alt="Hacker Setup Zip" width="800" height="509"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;👉 &lt;strong&gt;Live Demo:&lt;/strong&gt; &lt;a href="https://thecoderadi.github.io/Hacker-s-Haven/" rel="noopener noreferrer"&gt;https://thecoderadi.github.io/Hacker-s-Haven/&lt;/a&gt;&lt;br&gt;
👉 &lt;strong&gt;Code:&lt;/strong&gt; &lt;a href="https://github.com/TheCoderAdi/Hacker-s-Haven" rel="noopener noreferrer"&gt;https://github.com/TheCoderAdi/Hacker-s-Haven&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🔨 Journey
&lt;/h2&gt;

&lt;p&gt;The scene was built using only &lt;strong&gt;HTML and CSS&lt;/strong&gt; — no external images or JavaScript. Here’s a breakdown of the process:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Perspective &amp;amp; 3D Feel:&lt;/strong&gt; I used &lt;code&gt;transform&lt;/code&gt;, &lt;code&gt;perspective&lt;/code&gt;, and &lt;code&gt;rotateX/Y&lt;/code&gt; to give depth to the desk and devices.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Monitor Effects:&lt;/strong&gt; Each monitor has a unique content block — one with glowing terminal-style text, and another with animated green bars.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Glassmorphism:&lt;/strong&gt; The container div uses backdrop blur and soft borders to simulate a futuristic glass wall.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Accessories:&lt;/strong&gt; Everything from the bottle to the headphones was hand-crafted using only CSS box-model elements and a lot of tweaking.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keyboard Glow:&lt;/strong&gt; A custom RGB-like animation simulates key lighting, giving it a cyberpunk vibe.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Robot Wall Art:&lt;/strong&gt; A minimalist robot drawing mounted on the wall just for fun (and to add personality)!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I learned a ton about layering, keyframe animations, and perspective transforms — and just how expressive pure CSS can be.&lt;/p&gt;




&lt;h2&gt;
  
  
  💡 What’s Next
&lt;/h2&gt;

&lt;p&gt;I’d love to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add a toggle for day/night mode&lt;/li&gt;
&lt;li&gt;Animate the terminal text typing line-by-line&lt;/li&gt;
&lt;li&gt;Make the scene partially interactive with small JS additions after the challenge ends&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  👥 Credits
&lt;/h2&gt;

&lt;p&gt;This was a solo submission.&lt;br&gt;
If you found this fun or inspiring, feel free to fork it or remix it for your own virtual office!&lt;/p&gt;




&lt;h2&gt;
  
  
  🏷 License
&lt;/h2&gt;

&lt;p&gt;MIT License — feel free to use or adapt with attribution.&lt;/p&gt;




&lt;p&gt;Thanks to DEV and Axero for this amazing challenge! 🙌&lt;br&gt;
Let’s continue making the web more expressive and fun — one div at a time!&lt;/p&gt;

</description>
      <category>frontendchallenge</category>
      <category>devchallenge</category>
      <category>css</category>
    </item>
    <item>
      <title>🚀 Startup Scout Agent: Find the Hottest New Startups with One AI Prompt | Runner H Challenge</title>
      <dc:creator>Aditya</dc:creator>
      <pubDate>Sat, 28 Jun 2025 09:19:09 +0000</pubDate>
      <link>https://dev.to/aditya_007/startup-scout-agent-find-the-hottest-new-startups-with-one-ai-prompt-runner-h-challenge-f97</link>
      <guid>https://dev.to/aditya_007/startup-scout-agent-find-the-hottest-new-startups-with-one-ai-prompt-runner-h-challenge-f97</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/runnerh"&gt;Runner H "AI Agent Prompting" Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;👋 Meet &lt;strong&gt;Startup Scout Agent&lt;/strong&gt; — your weekly AI researcher that finds new startups, fills your spreadsheet, and sends it to your inbox. Built entirely with one prompt, using Runner H.&lt;/p&gt;

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

&lt;p&gt;I built &lt;strong&gt;Startup Scout Agent&lt;/strong&gt;, an autonomous AI agent powered by Runner H that scans the web for newly launched startups every week and sends a neatly formatted report to my inbox.&lt;/p&gt;

&lt;p&gt;It’s designed for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Investors&lt;/strong&gt; who want early access to rising startups
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Job seekers&lt;/strong&gt; exploring new, fast-growing companies
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Startup community builders&lt;/strong&gt; curating newsletters and communities
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This project completely automates what normally takes hours of research — all with a single Runner H prompt.&lt;/p&gt;




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

&lt;p&gt;📽️ &lt;strong&gt;Watch the full demo here:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/c8Lf7qP22i4"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;🖼️ &lt;strong&gt;Screenshots:&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ Sample Google Sheet: “Weekly Startup Radar”
&lt;/li&gt;
&lt;/ul&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%2Fh9zvrp1wpg4du32477xf.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%2Fh9zvrp1wpg4du32477xf.png" alt="Google Sheet"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ Confirmation Email
&lt;/li&gt;
&lt;/ul&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%2Fen0djlgfglqgjq4sjok4.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%2Fen0djlgfglqgjq4sjok4.png" alt="Email from Runner H"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  How I Used Runner H
&lt;/h2&gt;

&lt;p&gt;I used Runner H’s autonomous agent system with this one prompt:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Every Sunday evening, find 10–15 recently launched startups in AI, HealthTech, or FinTech from sites like TechCrunch, Crunchbase, Product Hunt, or LinkedIn.

For each startup, extract the following:
- Startup name
- Description (what they do)
- Industry or category
- Funding stage (e.g., seed, Series A)
- Location
- Founders' names
- Public founder email (if available)

Add this data to a Google Sheet titled “Weekly Startup Radar”.

Once the sheet is updated, email it to me at [your-email@example.com] with the subject: “Your Weekly Startup Report is Ready 🚀”.

Repeat this task automatically every Sunday at 6:00 PM IST.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I also connected:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Google Sheets&lt;/strong&gt; (to store the data)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Gmail&lt;/strong&gt; (to send me the weekly email)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This prompt runs autonomously every Sunday, so I wake up to a fresh, curated startup list in my inbox.&lt;/p&gt;




&lt;h2&gt;
  
  
  Use Case &amp;amp; Impact
&lt;/h2&gt;

&lt;p&gt;🔍 &lt;strong&gt;Real-world use cases:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;VC analysts tracking fresh startups in specific sectors&lt;/li&gt;
&lt;li&gt;Newsletter writers curating early-stage startup coverage&lt;/li&gt;
&lt;li&gt;Job seekers or students exploring fast-moving companies&lt;/li&gt;
&lt;li&gt;Accelerators and incubators scouting leads&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;⏱️ &lt;strong&gt;Impact:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Saves 4–5 hours/week of manual research&lt;/li&gt;
&lt;li&gt;No scraping, no APIs, no code — just prompt + Runner H&lt;/li&gt;
&lt;li&gt;Runs 100% hands-free&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Social Love ❤️
&lt;/h3&gt;

&lt;p&gt;✨ Shared on Twitter: &lt;a href="https://x.com/ASwayamSiddha/status/1938881997142974941" rel="noopener noreferrer"&gt;View Tweet&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let me know what you think — and feel free to fork the prompt for your own industry! Thanks to @hcompany_ai and &lt;a class="mentioned-user" href="https://dev.to/thepracticaldev"&gt;@thepracticaldev&lt;/a&gt; for making this challenge happen!&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>runnerhchallenge</category>
      <category>ai</category>
      <category>machinelearning</category>
    </item>
    <item>
      <title>🚀 Building an AI-Powered Backend with Node.js + Groq for IdeaLens</title>
      <dc:creator>Aditya</dc:creator>
      <pubDate>Sat, 12 Apr 2025 04:10:33 +0000</pubDate>
      <link>https://dev.to/aditya_007/building-an-ai-powered-backend-with-nodejs-groq-for-idealens-4921</link>
      <guid>https://dev.to/aditya_007/building-an-ai-powered-backend-with-nodejs-groq-for-idealens-4921</guid>
      <description>&lt;p&gt;Welcome! 👋&lt;br&gt;
In this tutorial, we’ll build a modular, production-ready Node.js backend for IdeaLens — an AI assistant that helps creators brainstorm, summarize, caption, and ideate content. We’ll also integrate Groq to access blazing-fast LLMs like LLaMA 3.&lt;/p&gt;
&lt;h2&gt;
  
  
  📦 Prerequisites
&lt;/h2&gt;

&lt;p&gt;Make sure you have the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Node.js (v16+)&lt;/li&gt;
&lt;li&gt;npm or yarn&lt;/li&gt;
&lt;li&gt;MongoDB Atlas or local&lt;/li&gt;
&lt;li&gt;A &lt;a href="https://console.groq.com/home" rel="noopener noreferrer"&gt;Groq API Key&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;REST client (Postman, Thunder Client, etc.)&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  📁 Folder Structure
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;backend/
├── controllers/
│   └── summary.controller.js
├── routes/
│   └── summary.route.js
├── utils/
│   └── groqClient.js  &amp;lt;-- ✨ Groq integration
├── app.js
├── server.js
└── .env
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  📦 Install Dependencies
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;express cors cookie-parser dotenv mongoose axios
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;blockquote&gt;
&lt;p&gt;We’ll use &lt;code&gt;axios&lt;/code&gt; to call the Groq API.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h2&gt;
  
  
  🧠 Integrating Groq: Ultra-fast Open-Source LLMs
&lt;/h2&gt;

&lt;p&gt;Create &lt;code&gt;utils/groqClient.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;axios&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;axios&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;GROQ_API_KEY&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GROQ_API_KEY&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;groq&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;axios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;baseURL&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://api.groq.com/openai/v1/chat/completions&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Authorization&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`Bearer &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;GROQ_API_KEY&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;application/json&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;chatWithGroq&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;model&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;llama-3.3-70b-versatile&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;groq&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/chat/completions&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;model&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="nx"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;temperature&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;0.7&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;choices&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Groq Error:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Groq API failed&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;chatWithGroq&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;You can now easily switch between &lt;code&gt;llama-3.3-70b-versatile&lt;/code&gt;or others.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  🔁 Using Groq in a Controller
&lt;/h2&gt;

&lt;p&gt;In &lt;code&gt;controllers/summary.controller.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;chatWithGroq&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;../utils/groqClient&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;generateSummary&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;idea&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;messages&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;system&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;You're a creative assistant helping generate content ideas.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;user&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`Summarize the following content idea: "&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;idea&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;". Include mood, genre, platform suggestions, hooks, and short video direction.`&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;];&lt;/span&gt;

  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;aiResponse&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;chatWithGroq&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;summary&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;aiResponse&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;generateSummary&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  📌 Example Route: &lt;code&gt;/api/summary&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;In &lt;code&gt;routes/summary.route.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;router&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Router&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;generateSummary&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;../controllers/summary.controller&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;router&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;generateSummary&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;router&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🔐 Environment Variables
&lt;/h2&gt;

&lt;p&gt;In &lt;code&gt;.env&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;PORT=5000
CLIENT_URL=http://localhost:3000
MONGO_URI=your_mongo_url
GROQ_API_KEY=your_groq_api_key
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🛠️ Bootstrapping the App
&lt;/h2&gt;

&lt;p&gt;In &lt;code&gt;app.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cors&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;cors&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cookieParser&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;cookie-parser&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;summaryRoutes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./routes/summary.route&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;cors&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;origin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;CLIENT_URL&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;credentials&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;}));&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;cookieParser&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/api/summary&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;summaryRoutes&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;IdeaLens backend is up 🚀&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In &lt;code&gt;server.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./app&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mongoose&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mongoose&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dotenv&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;config&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;PORT&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PORT&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;mongoose&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;connect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;MONGO_URI&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;PORT&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Server running at http://localhost:&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;PORT&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;MongoDB connection failed&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  📌 Route Overview
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Endpoint&lt;/th&gt;
&lt;th&gt;Method&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/api/summary&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;Generate structured summary with Groq&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/api/analyze&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;Content analysis&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/api/captions&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;Generate captions + hashtags&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/api/songs&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;Suggest music tracks&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/api/chat&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;General AI chat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/api/refine&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;Refine based on user feedback&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/api/upload-media&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;Upload audio/video for analysis&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/api/auth&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;Auth with JWT &amp;amp; cookies&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;blockquote&gt;
&lt;p&gt;All powered by modular routes and AI controller functions.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  🎯 Done! Your Groq-Powered Node.js Backend🚀
&lt;/h2&gt;

&lt;p&gt;You’ve now got a fully working Express backend with Groq integrated — giving you high-performance LLM workflows for idea summarization, creative chatting, and content generation in your IdeaLens platform.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>express</category>
      <category>ai</category>
      <category>groq</category>
    </item>
    <item>
      <title>Discord Image Generation Bot with Daytona</title>
      <dc:creator>Aditya</dc:creator>
      <pubDate>Sat, 28 Dec 2024 07:31:30 +0000</pubDate>
      <link>https://dev.to/aditya_007/discord-image-generation-bot-with-daytona-5akc</link>
      <guid>https://dev.to/aditya_007/discord-image-generation-bot-with-daytona-5akc</guid>
      <description>&lt;p&gt;This project demonstrates how to build a &lt;strong&gt;Discord bot&lt;/strong&gt; that generates images from text prompts using the &lt;strong&gt;Prodia API&lt;/strong&gt;, while utilizing &lt;strong&gt;Daytona&lt;/strong&gt; for an optimized and scalable development environment. With Daytona's devcontainers, the bot ensures a standardized, fast, and efficient setup process.&lt;/p&gt;

&lt;h2&gt;
  
  
  Table of Contents
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;🚀 Getting Started&lt;/li&gt;
&lt;li&gt;✨ Features&lt;/li&gt;
&lt;li&gt;💬 How to Use&lt;/li&gt;
&lt;li&gt;📜 License&lt;/li&gt;
&lt;li&gt;📚 Learn More&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  🚀 Getting Started
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Install Daytona&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;First, make sure you have Daytona installed. You can follow the installation guide from the &lt;a href="https://www.daytona.io/docs/installation/installation/" rel="noopener noreferrer"&gt;Daytona documentation&lt;/a&gt;.&lt;br&gt;
Start the server&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   daytona serve&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. &lt;strong&gt;Clone the Repository&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Clone this repository to your local machine:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   git clone https://github.com/TheCoderAdi/discord-bot.git
   &lt;span class="nb"&gt;cd &lt;/span&gt;discord-bot
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. &lt;strong&gt;Create a Daytona Workspace&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Create a development workspace using Daytona:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   daytona create https://github.com/TheCoderAdi/discord-bot
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  4. &lt;strong&gt;Install Dependencies&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Once you have set up your workspace, ensure all dependencies are installed by running:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   pip &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-r&lt;/span&gt; requirements.txt
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5. &lt;strong&gt;Configure the Bot&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Create a &lt;code&gt;.env&lt;/code&gt; file in the root directory of the project and add your &lt;strong&gt;Discord bot token&lt;/strong&gt; and &lt;strong&gt;Prodia API key&lt;/strong&gt; as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   DISCORD_TOKEN=your_discord_bot_token
   PRODIA_API_KEY=your_prodia_api_key
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  6. &lt;strong&gt;Run the Bot&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;After configuring the bot, you can start it by running:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   python bot.py
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will start the bot, which will listen to messages on your Discord server and respond with generated images based on text prompts.&lt;/p&gt;

&lt;h2&gt;
  
  
  ✨ Features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Integration with Daytona&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Daytona ensures a consistent, reproducible development environment with devcontainers for easy setup and scaling.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Modular Python Bot Framework&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
The bot is designed to be modular and extendable. You can easily add new features or commands.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Discord API Integration&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Uses the Discord API to handle real-time message interaction in the server.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Image Generation with Prodia API&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Generates images based on text prompts, utilizing the &lt;strong&gt;Prodia API&lt;/strong&gt; to create AI-driven images.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  💬 How to Use
&lt;/h2&gt;

&lt;p&gt;Once the bot is up and running, you can interact with it directly in any Discord channel where the bot is present.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Text Prompt Command&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;To generate an image, use the command &lt;code&gt;!generate&lt;/code&gt; followed by the text prompt. For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   !generate A sunset over a mountain range
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The bot will process your request and return the generated image. The output will be displayed in the channel like so:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Output Image:&lt;/strong&gt;&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%2Ffixf9f3s8rhqlblcpya8.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%2Ffixf9f3s8rhqlblcpya8.png" alt="Example" width="800" height="598"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The bot will send back the image in the Discord channel once the image generation is completed.&lt;/p&gt;

&lt;h2&gt;
  
  
  📜 License
&lt;/h2&gt;

&lt;p&gt;This repository is licensed under the &lt;strong&gt;MIT License&lt;/strong&gt;. See the &lt;code&gt;LICENSE&lt;/code&gt; file for more details.&lt;/p&gt;

&lt;h2&gt;
  
  
  📚 Learn More
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;For more information on &lt;strong&gt;Daytona&lt;/strong&gt;, visit the &lt;a href="https://www.daytona.io/docs" rel="noopener noreferrer"&gt;official Daytona documentation&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;For more on &lt;strong&gt;Discord bot development&lt;/strong&gt;, check out the &lt;a href="https://discordpy.readthedocs.io/en/stable/" rel="noopener noreferrer"&gt;Discord.py documentation&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>daytona</category>
      <category>discordbot</category>
      <category>python</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
