<?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: Ayesha Imran</title>
    <description>The latest articles on DEV Community by Ayesha Imran (@ayesha_imr).</description>
    <link>https://dev.to/ayesha_imr</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%2F2681855%2Fddb1d38a-7f20-4b22-a472-cd9224bbbd33.png</url>
      <title>DEV Community: Ayesha Imran</title>
      <link>https://dev.to/ayesha_imr</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ayesha_imr"/>
    <language>en</language>
    <item>
      <title>LEDGR - Receipts In, Insights Out. Automatically.</title>
      <dc:creator>Ayesha Imran</dc:creator>
      <pubDate>Sat, 07 Jun 2025 12:13:24 +0000</pubDate>
      <link>https://dev.to/ayesha_imr/ledgr-receipts-in-insights-out-automatically-4ek2</link>
      <guid>https://dev.to/ayesha_imr/ledgr-receipts-in-insights-out-automatically-4ek2</guid>
      <description>&lt;p&gt;This is a submission for the &lt;a href="https://dev.to/challenges/postmark"&gt;Postmark Challenge: Inbox Innovators&lt;/a&gt;.&lt;/p&gt;

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

&lt;p&gt;Let's be honest, 'expense tracking' often sounds like a synonym for 'tedious,' 'boring,' and 'something I'll definitely start next month.' We all know we should keep an eye on our spending, especially with the convenience of online shopping, and how carried away we can get with it. But the reality is, saving digital receipts, painstakingly entering data into a spreadsheet or app, and trying to remember what category 'that random Amazon purchase' falls into is enough to make anyone give up. With the hustle of our everyday lives, tracking online orders is just not something we can prioritise, but it is something we &lt;em&gt;should&lt;/em&gt; prioritise because those purchases add up and you can go overboard so easily. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Your inbox is a goldmine of spending data - online shopping, subscriptions, and digital services, order confirmation emails all reside there - it is about time you had an automated shovel to dig up that gold.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That's exactly why I built LEDGR. I wanted to transform that chaotic inbox of yours into an effortless source of financial insight. With LEDGR, you simply forward those order confirmation emails (whether on your laptop or phone), and LEDGR does the rest – automatically extracting every detail, categorizing your purchases, and giving you a clear, visual breakdown of your spending. No more manual entry, no more lost receipts, just financial clarity at your fingertips.&lt;/p&gt;

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

&lt;h3&gt;
  
  
  Link
&lt;/h3&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__body flex items-center justify-between"&gt;
        &lt;a href="https://ledgr-neon.vercel.app/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;ledgr-neon.vercel.app&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;h3&gt;
  
  
  Video
&lt;/h3&gt;

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

&lt;h3&gt;
  
  
  Screenshots
&lt;/h3&gt;

&lt;p&gt;Your personalized dashboard offers an at-a-glance overview of your financial health: see total spending, stay on top of budget progress, track order processing, and review recent purchases, all in one place for quick decision-making.&lt;br&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%2Fubm6jfkdtxn4ad01c8fm.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%2Fubm6jfkdtxn4ad01c8fm.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Orders tab neatly lists every purchase automatically logged from your forwarded emails, providing a complete and easily searchable history of your online spending.&lt;br&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%2F5cydllx9uri213ub4tei.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%2F5cydllx9uri213ub4tei.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Dive deeper into any purchase with a detailed order view. See every item, its price, and its AI-assigned category, giving you granular control and understanding of where your money went.&lt;br&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%2Fgdfdg77x7du4d1qoj5is.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%2Fgdfdg77x7du4d1qoj5is.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Instantly filter your purchases by category to understand spending in specific areas like 'Groceries' or 'Subscriptions,' helping you pinpoint where to optimize your budget.&lt;br&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%2Fwsh0pbiukifd2uvrf3av.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%2Fwsh0pbiukifd2uvrf3av.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Go beyond raw numbers. Analytics visually map your spending trends and category breakdowns, transforming data into actionable insights so you can identify habits and find opportunities to save.&lt;br&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%2Fj3py7jee1sgas05ynzr2.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%2Fj3py7jee1sgas05ynzr2.png" alt=" "&gt;&lt;/a&gt;&lt;br&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%2Foizje9uj5rkvlxxo2gh5.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%2Foizje9uj5rkvlxxo2gh5.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Take control with flexible budgeting. Easily set (and update) overall monthly or category-specific budgets, and instantly see how you're tracking with clear visual progress, empowering smarter financial decisions before you overspend.&lt;br&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%2Fwp7q60ijr7fjaf96ll5g.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%2Fwp7q60ijr7fjaf96ll5g.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Personalize your experience by selecting your preferred currency for expense tracking. Your profile also conveniently displays your unique LEDGR forwarding email address, ready for you to start automating!&lt;br&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%2Fa4iri45p4dpj3gfdrwvv.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%2Fa4iri45p4dpj3gfdrwvv.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  Code Repository
&lt;/h2&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/Ayesha-Imr" rel="noopener noreferrer"&gt;
        Ayesha-Imr
      &lt;/a&gt; / &lt;a href="https://github.com/Ayesha-Imr/LEDGR" rel="noopener noreferrer"&gt;
        LEDGR
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Receipts In, Insights Out. Automatically.
    &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;LEDGR - Logging Expense Data from Generated Receipts&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;Receipts In, Insights Out. Automatically.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;LEDGR is an intelligent personal finance tool that automates expense tracking by parsing order confirmation emails. Simply forward your digital receipts, and LEDGR uses AI to extract, categorize, and visualize your spending.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Website:&lt;/strong&gt; &lt;a href="https://ledgr-neon.vercel.app/" rel="nofollow noopener noreferrer"&gt;https://ledgr-neon.vercel.app/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Demo Video:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=Pe2gne6aycI" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/30b773e71a3c70d8316e074853ffbbad719d0e43cd0bbbc6e5662c56a3333886/68747470733a2f2f696d672e796f75747562652e636f6d2f76692f506532676e6536617963492f302e6a7067" alt="Watch the video"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;The Problem&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;Tracking personal expenses from countless online order confirmations is tedious, time-consuming, and often neglected. Digital receipts get buried in inboxes, manual data entry is error-prone, and gaining a clear overview of spending habits becomes a significant challenge.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Our Solution: LEDGR&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;LEDGR offers a "zero-effort" solution by leveraging email forwarding and AI:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Forward Emails:&lt;/strong&gt; Users forward any order confirmation email to their unique LEDGR address.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI Parsing:&lt;/strong&gt; LEDGR uses the Google Gemini 1.5 Flash model with structured output to automatically extract key information (vendor, date, items, prices, total).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Smart Categorization:&lt;/strong&gt; The AI also intelligently assigns a relevant category to each…&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/Ayesha-Imr/LEDGR" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


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

&lt;p&gt;As soon as I read the challenge post and researched how Postmark inbound email forwarding works, I instantly thought of my Gmail account that I solely use for online ordering. It is full of order receipt emails and pretty much resembles buried treasure ripe for digging. This challenge seemed like the perfect opportunity to make something that would not only help me make sense of my spending data and get my financials in check, but also has the potential to benefit other online shoppers (which is pretty much everyone nowadays to be fair). So I went all in!&lt;/p&gt;

&lt;p&gt;First I come up with the idea to forward online order confirmation emails to Postmark and get them parsed, processed and stored. Initially, I decided not to use an LLM because for some reason I wanted to do this LLM-lessly. I had decided to use vector search against fixed categories (stored in Weaviate) to categorise order items, and manual parsing for extracting order data. Unfortunately the manual parsing part did not work well and I had to shift to using an LLM - but it made things 100% better so that's the way to go!&lt;/p&gt;

&lt;p&gt;LEDGR uses &lt;strong&gt;Gemini 2.5 Flash with structured output&lt;/strong&gt; for parsing email order data. Its balance of speed and impressive capability, especially with its excellent structured output feature, made it ideal for a this project, allowing for rapid processing of emails into usable data without compromising on accuracy.The info is stored in and fetched from Supabase. I have completely decoupled the frontend and backend. The frontend is made (or rather, vibe-coded) using React and Vite. For backend processing I use Supabase Edge Functions. Here is a step by step flow, along with a diagram, to demonstrate clearly how LEDGR works:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Sign-up &amp;amp; Setup:&lt;/strong&gt; User registers via Supabase Auth, receiving a unique LEDGR forwarding email address.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Email Forward:&lt;/strong&gt; User forwards an order confirmation email to their LEDGR address.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Postmark Ingest:&lt;/strong&gt; Postmark receives the email and webhooks its JSON payload to Supabase Edge Function 1 (EF1).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Initial Storage:&lt;/strong&gt; EF1 extracts the user ID, saves the raw email to the forwarded_emails table in Supabase DB with pending_parsing status.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Processing Trigger:&lt;/strong&gt; A new entry in forwarded_emails triggers a DB webhook, invoking Supabase Edge Function 2 (EF2).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Gemini Parsing:&lt;/strong&gt; EF2 sends email content to Gemini API, requesting structured output (vendor, items, prices, categories).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Structured Data Storage:&lt;/strong&gt; EF2 receives JSON from Gemini, saves order details to the orders table and individual items to the line_items table.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Status Update:&lt;/strong&gt; EF2 updates the email's status in forwarded_emails to processed or failed.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Frontend Display:&lt;/strong&gt; The authenticated user (via Supabase Auth) on the React/Vite frontend fetches their processed orders, items, and budgets directly from Supabase DB (with RLS) for viewing and analysis.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Technical Architecture Diagram
&lt;/h3&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%2F13winjtbn6n4ja6le7v6.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%2F13winjtbn6n4ja6le7v6.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Challenges Faced &amp;amp; Lessons Learned
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;  Initial attempts at manual parsing of emails proved highly unreliable due to format variations. Switching to an LLM (Gemini) for structured output was a game-changer for accuracy and robustness.&lt;/li&gt;
&lt;li&gt;  Configuring the chain of webhooks (Postmark -&amp;gt; EF1 -&amp;gt; DB Trigger -&amp;gt; EF2) required careful attention to detail and debugging.&lt;/li&gt;
&lt;li&gt;  Prompt engineering for Gemini to consistently return the desired structured JSON, especially for categorizing diverse items, was an iterative process.&lt;/li&gt;
&lt;li&gt;  Managing timeouts between database webhooks and Edge Function execution, especially for potentially long-running AI calls. &lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Future Improvements
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;  CSV data export.&lt;/li&gt;
&lt;li&gt;  User-customizable categories and category rules.&lt;/li&gt;
&lt;li&gt;  Weekly budget options or custom budget periods.&lt;/li&gt;
&lt;li&gt;  Support for parsing other types of financial documents (e.g., PDF bank statements).&lt;/li&gt;
&lt;li&gt;  More advanced analytics and predictive insights.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;What started as a personal quest to make sense of my own online shopping habits has, thanks to the Postmark Inbox Innovators challenge, blossomed into LEDGR. This project has been an incredible learning journey – from wrestling with the myriad of email formats to truly utilising the power of Google's Gemini for intelligent, structured parsing.&lt;/p&gt;

&lt;p&gt;While there's always more to build and exciting future improvements planned, I'm immensely proud of what LEDGR is today: a genuinely useful tool designed to solve the common and often overwhelming frustration of manual expense tracking. In an age of constant digital transactions, having an effortless way to maintain financial clarity is more important than ever, and LEDGR is my contribution towards that goal.&lt;/p&gt;

&lt;p&gt;I'm eager to see how users interact with it, and I'm grateful to Postmark for the challenge that sparked this innovation. The journey of refining LEDGR into an even more powerful financial companion has just begun. I have already started using it to track my spending habits (as you can witness from the above screenshots) and will continue to do so. Here's to being more financially responsible!&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>postmarkchallenge</category>
      <category>webdev</category>
      <category>api</category>
    </item>
    <item>
      <title>BrainDump AI 🧠</title>
      <dc:creator>Ayesha Imran</dc:creator>
      <pubDate>Mon, 20 Jan 2025 07:50:13 +0000</pubDate>
      <link>https://dev.to/ayesha_imr/braindump-ai-2men</link>
      <guid>https://dev.to/ayesha_imr/braindump-ai-2men</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github"&gt;GitHub Copilot Challenge &lt;/a&gt;: Transitions and Transformations &amp;amp; New Beginnings&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;BrainDump is an AI-powered productivity app that helps you organize your scattered, messy and chaotic thoughts into simplified workflow and mindmaps.&lt;/p&gt;

&lt;p&gt;You know that suffocating feeling when you come back home after a long day at school/university/work and your brain feels like it would explode? There are a million scattered thoughts floating in your brain and your head is pounding as you try to make sense of it all? Not fun.&lt;/p&gt;

&lt;p&gt;Well, as its name suggests, BrainDump is an app where you can dump out all your thoughts - be as messy and random as you want, just dump out whatever's on your mind. &lt;/p&gt;

&lt;p&gt;And BrainDump AI will expertly arrange your mind's mess into organized and neat workflow(s) so that you can let go of your mental stress.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Transform your stress into relaxation and transition to a more peaceful state of mind with BrainDump.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;




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

&lt;h3&gt;
  
  
  Demo Video
&lt;/h3&gt;

&lt;p&gt;Here's a short demo video showing BrainDump AI's capabilities - it's super simple and quick to use. &lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/y3qpRk25UEU"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Note that I have added a mobile phone demo because I believe BrainDump AI is more useful as mobile app - because when you are tired and want to dump out your thoughts, you're most likely to use your phone that you already have in your hand, y'know!&lt;/p&gt;

&lt;h3&gt;
  
  
  Link
&lt;/h3&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;a href="https://braindump-ai-tzyy.onrender.com/" rel="noopener noreferrer"&gt;
      braindump-ai-tzyy.onrender.com
    &lt;/a&gt;
&lt;/div&gt;


&lt;h3&gt;
  
  
  Screenshots
&lt;/h3&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%2Fv29plb6492u4c82xmc6l.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%2Fv29plb6492u4c82xmc6l.png" alt="BrainDump AI screenshots" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Repo
&lt;/h2&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/Ayesha-Imr" rel="noopener noreferrer"&gt;
        Ayesha-Imr
      &lt;/a&gt; / &lt;a href="https://github.com/Ayesha-Imr/BrainDump---AI-App" rel="noopener noreferrer"&gt;
        BrainDump---AI-App
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      transform your chaotic thoughts into organized workflows
    &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;BrainDump AI&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;&lt;em&gt;Transform your stress into relaxation and transition to a more peaceful state of mind with BrainDump.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;BrainDump AI is an app designed to help users organize their thoughts by allowing them to input their ideas and receive structured outputs in the form of diagrams or flowcharts.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Features&lt;/h2&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Calming Interface&lt;/strong&gt;: A minimalistic and calming interface for users to 'braindump' their thoughts.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Input Box&lt;/strong&gt;: A large input box for entering text.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Transform Button&lt;/strong&gt;: A "Transform" button to submit the input for processing.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mermaid.js Diagrams&lt;/strong&gt;: Generate and display diagrams using Mermaid.js.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Download Diagrams&lt;/strong&gt;: Option to download the generated diagrams as images.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Live Demo&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;Check out the live version of BrainDump AI: BrainDump AI&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Demo Video&lt;/h2&gt;

&lt;/div&gt;
&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=VIDEO_ID" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/1f572e666fa805b4e2bc4d4b181cdb51eaaf81cfc96fc8786eccdab3fffa90e9/68747470733a2f2f696d672e796f75747562652e636f6d2f76692f564944454f5f49442f302e6a7067" alt="YouTube Video Title"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Project Structure&lt;/h2&gt;

&lt;/div&gt;
&lt;div class="snippet-clipboard-content notranslate position-relative overflow-auto"&gt;
&lt;pre class="notranslate"&gt;&lt;code&gt;BrainDump
├── pages
│   ├── api
│   │   └── transform.js       # API route for processing input text
│   └── index.js               # Main page of the application
├── public                     #&lt;/code&gt;&lt;/pre&gt;…&lt;/div&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/Ayesha-Imr/BrainDump---AI-App" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;





&lt;h2&gt;
  
  
  Tech Details
&lt;/h2&gt;

&lt;p&gt;The text-to-diagram is powered by a large language model (GPT-4o in this case) which takes the user input and generates Mermaid.js code to convert it into a diagram. The code is then parsed and displayed in the UI as a rendered diagram. &lt;/p&gt;

&lt;p&gt;GPT-4o is accessed using Github Models which enables lightning-fast generation, ensuring smooth user experience.&lt;/p&gt;




&lt;h2&gt;
  
  
  Development Timeline
&lt;/h2&gt;

&lt;p&gt;I developed this app in the span of about 4 hours. &lt;br&gt;
I started with first testing out LLM responses in the Github Model playground and a Python Notebook by using the API provided by Github Models. This was super easy and fast to do. &lt;/p&gt;

&lt;p&gt;I passed in some sample input (a mix of my own messy thoughts and GPT-generated ones) and tested out different prompts to elicit responses until I perfected it. I played with instructions to ensure the output code was functional and also the colour palette was aligned with my UI plans (aesthetics, y'know).&lt;/p&gt;

&lt;p&gt;Next, I created the next.js app (or it would be better to say that Github Copilot created it for me with just a few prompts and tweaks). The UI of the app took considerable tweaking to perfect and there was a lot overflowing and stuff but with constant prompting and nagging the Copilot, I managed to perfect the UI to my liking (as much as I could given the limited timeframe). &lt;/p&gt;

&lt;p&gt;Now I needed to connect the frontend to the backend. I again sought Copilot's help to do this and it was super easy to do because I had designed the frontend with the upcoming data in mind. Again the UI needed tweaks and I had to add the diagram display popup as well as the download feature so I spent some time  perfecting the UI again and ensuring the content was being displayed perfectly. This entire process took around 2 hours. &lt;/p&gt;

&lt;p&gt;Once the app worked seamlessly locally, it was time to deploy it. &lt;br&gt;
I deployed it on Render using the free tier. &lt;br&gt;
This took around a an hour as there were some issues in deployment and I had to ensure the deployed version worked as well as the local version. &lt;/p&gt;




&lt;h2&gt;
  
  
  Copilot Experience
&lt;/h2&gt;

&lt;p&gt;Copilot proved to be the perfect coding partner in building this application—it made the entire process incredibly fast and straightforward. All I had to do was outline the general concept, and Copilot took on the responsibility of turning my ideas into actual code. I relied on Copilot at various stages of BrainDump AI’s development, from laying down the fundamental building blocks to executing a complete deployment. &lt;/p&gt;

&lt;h3&gt;
  
  
  Frontend &amp;amp; UI
&lt;/h3&gt;

&lt;p&gt;I solely used Copilot to create the next.js app (I’m a Python girlie 🐍🎀 ) and the UI of the app. The app came together in just one prompt with all the necessary files structure. &lt;/p&gt;

&lt;p&gt;The UI did take longer to perfect, but credit goes to Copilot for that (UI honestly isn’t my strong suit). I gave Claude 3.5 Sonnet a shot for designing the extension’s UI, and I have to say, it really delivered!&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%2Fauxe9kbaofgxjs2hdjiw.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%2Fauxe9kbaofgxjs2hdjiw.png" alt="Asking Copilot to make UI with minimalistic and calming vibes." width="800" height="909"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Asking Copilot to make UI with minimalistic and calming vibes.&lt;/em&gt; 🎀&lt;/p&gt;

&lt;h3&gt;
  
  
  Adding Functionality
&lt;/h3&gt;

&lt;p&gt;GitHub Copilot was incredibly helpful in creating backend functions and generating scripting code for button triggers. First I independently wrote the backend code with Copilot’s assistance and then I asked if to connect the functions to the frontend, which it did expertly. Of course, there were some issues (only in heaven would code work the first time without errors), but Copilot handled them brilliantly.&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%2F3bnb35mmfr8tjy3tmroj.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%2F3bnb35mmfr8tjy3tmroj.png" alt="I asked Copilot to create the backend function and trigger it once the button was pressed." width="800" height="938"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;I asked Copilot to create the backend function and trigger it once the button was pressed.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Errors &amp;amp; Edits
&lt;/h3&gt;

&lt;p&gt;Errors - the programming antagonist. With the rise of LLMs, tackling errors in code has become so much more manageable. Copilot, in particular, has been a lifesaver when it comes to debugging. Whether it’s errors popping up in the terminal, issues with functionality, or plain old syntax problems, Copilot handles it like a pro.&lt;/p&gt;

&lt;p&gt;One of the absolute best things about using Copilot is how simple it is to fix faulty code—you can literally just highlight the problem area and ask it to fix it. It’s insanely fast and effortless, and I’ve been taking full advantage of this feature ever since Copilot launched a couple of years ago (yes, I’m an OG GitHub Copilot user 😉). It’s changed the game!&lt;/p&gt;

&lt;p&gt;I should reiterate that I’m a Python person and not a pro in Javascript so there was a lot to to debug in this next.js app and I fully relied on Copilot to help me fix the incessant issues.&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%2F4fxvgtpe4w70rsa5d7e7.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%2F4fxvgtpe4w70rsa5d7e7.png" alt="Copilot helped me fix issues when configuring the next.js app." width="800" height="430"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Copilot helped me fix issues when configuring the next.js app.&lt;/em&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%2F1t1cplqbri9gj9hc7irn.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%2F1t1cplqbri9gj9hc7irn.png" alt="Asking Copilot to fix a compilation error." width="647" height="997"&gt;&lt;/a&gt; &lt;br&gt;
&lt;em&gt;Asking Copilot to fix a compilation error.&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;The “Edit with Copilot” feature is also insanely helpful. Copilot was struggling with outputting markdown in the Chat, but it did it perfectly in the Edit interface.&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%2Fuff5gw5ljhqckkfaz735.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%2Fuff5gw5ljhqckkfaz735.png" alt="Using the “Edit with Copilot” feature." width="800" height="867"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Using the “Edit with Copilot” feature.&lt;/em&gt; ✍️ &lt;/p&gt;




&lt;h3&gt;
  
  
  Autocomplete
&lt;/h3&gt;

&lt;p&gt;It still feels like magic how you start writing some code, and Copilot instantly suggests the completion—it’s been so helpful so many times. For BrainDump AI, I relied heavily on Autocomplete to create both the frontend code and backend functions. It really saved a lot of time! ⏱️&lt;/p&gt;

&lt;h3&gt;
  
  
  Chat
&lt;/h3&gt;

&lt;p&gt;The in-editor Copilot chat was in constant use by me at all stages of the app development. &lt;br&gt;
I conversed with Copilot for various purposes during development, some are highlighted below. &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%2Fbr3wr1obee2rrey710g2.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%2Fbr3wr1obee2rrey710g2.png" alt="Asking Copilot to create the .gitignore file by attaching the entire codebase (don’t worry, I did double check it before committing the code)." width="794" height="845"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Asking Copilot to create the .gitignore file by attaching the entire codebase (don’t worry, I did double check it before committing the code).&lt;/em&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%2F68h943fngu07emm0jlzp.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%2F68h943fngu07emm0jlzp.png" alt="Created the entire readme file using Copilot." width="652" height="994"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Created the entire readme file using Copilot.&lt;/em&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Additional Features I Loved
&lt;/h3&gt;

&lt;p&gt;There are so many other ways Github Copilot assisted me throughout the development of this app, from terminal commands, highlighted-code editing, testing deployed API endpoints to logging function outputs. It really optimized the entire workflow.&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%2F31uucwuvr96mwl2twi69.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%2F31uucwuvr96mwl2twi69.png" alt="Copilot flawlessly fixed LLM-generated code parsing issues." width="646" height="960"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Copilot flawlessly fixed LLM-generated code parsing issues.&lt;/em&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%2F6s7oc5e0eoplxfs4xjvq.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%2F6s7oc5e0eoplxfs4xjvq.png" alt="It’s so easy to add logging to your code with Copilot." width="800" height="471"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;It’s so easy to add logging to your code with Copilot.&lt;/em&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%2F1skhqhvakmu8lx0437p2.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%2F1skhqhvakmu8lx0437p2.png" alt="You start with an empty file, ask Copilot to generate code for it and can directly apply the code block to the file." width="800" height="432"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;I love how you start with an empty file, ask Copilot to generate code for it and can directly apply the code block to the file - barely had to lift a finger (just enough to click the mouse button 😆).&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  GitHub Models
&lt;/h2&gt;

&lt;p&gt;This is my first time trying GitHub Models, and I’m genuinely impressed. Being able to use the GPT-4o and 4o mini APIs for free, even with rate limits, is such a fantastic offering.&lt;/p&gt;

&lt;p&gt;The limits are ideal for testing and prototyping, making it incredibly beneficial for developers who want to build basic MVPs or test their ideas without needing to purchase credits.&lt;/p&gt;

&lt;p&gt;The convenience of the GitHub Model Playground is unmatched—it literally took seconds to set up the LLM API through GitHub Models. With support for so many LLMs, both proprietary and open-source, GitHub Models has definitely become my top choice for integrating LLM APIs into my projects.&lt;/p&gt;

&lt;p&gt;For BrainDump aI, I used GPT-4o because its precision and accuracy are perfect for my use case which involves AI-generated code (so any mess-ups will cost dearly!) The results speak for themselves - the diagrams were always rendered perfectly. &lt;/p&gt;

&lt;p&gt;I tested out prompts for my app function right there in the playground to perfect it and then created the final backend functions. &lt;/p&gt;

&lt;p&gt;The task that LLM handles via Github Models is the conversion of user input to output organized diagram through mermaid.js code.&lt;br&gt;
Basically the crux of the app &lt;em&gt;is&lt;/em&gt; the LLM.&lt;/p&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Creating this app was such an enjoyable experience—it really unleashed my creative side. The time was waning and there was a pressure to complete the app before the deadline - I always work my best under pressure (sad, but true). &lt;br&gt;
P.S: There’s only thirty minutes till submissions close as I write this very sentence!&lt;/p&gt;

&lt;p&gt;I developed this entire app and deployed it on Sunday, 19th January in a span of about 4 hours.&lt;/p&gt;

&lt;p&gt;The prompts provided as the hackathon tracks were super unique and interesting and definitely out-of-the-box as compared to other hackathons so that made it even more interesting.&lt;/p&gt;

&lt;p&gt;BrainDump AI fits perfectly in the &lt;strong&gt;Transitions and Transformations&lt;/strong&gt; prompt due to its ability to transform something messy and chaotic (yes, I’m talking about the inside of your mind, apologies!) into organised and simplified workflows. It helps you transition from a stressful state of mind to a more relaxed one as you are able to (literally) dump&lt;br&gt;
out all the nagging thoughts in your brain.&lt;/p&gt;

&lt;p&gt;In addition to that, I also believe that BrainDump AI qualifies for the &lt;strong&gt;New Beginnings&lt;/strong&gt; prompt because it makes people more productive and can help them start anew with a fresher and more relaxed peace of mind.&lt;/p&gt;

&lt;p&gt;Even though this app is currently just a small prototype that I built in a day, I can see that it has potential. &lt;/p&gt;

&lt;p&gt;In today’s hustle culture, no person is free from a huge amount of mental stress. Journaling and meditation, among other things, are a good way of calming your brain but not everyone has the luxury to make tike for them. In lieu of these, BrainDump AI provides a more convenient and accessible solution to remove daily stress from your life and show some love to your overworked brain.&lt;/p&gt;

&lt;p&gt;I have several ideas to expand BrainDump AI and really take it the next level. Users should be able to get registered  save generated diagrams and even categorize their tasks (will add a database!). I even tried to add speech-to-text feature to make the braindump process more convenient but alas time was constraint - so this is something that I will definitely incorporate in the future. It would also be great to add more customization etc to the generated diagrams and I plan to explore more code-to-diagram tools to make the experience even better. I also see potential improvements that can be made to the UI to make it more appealing.&lt;/p&gt;

&lt;p&gt;In any case, I hope BrainDump AI can truly help people and take at least some stress away from their lives, so they can transition to a more peaceful state of mind. ✨&lt;/p&gt;

&lt;p&gt;Note: The publication date shows 20 Jan because it's 20 Jan here but the PST time is still 19th Jan.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>webdev</category>
      <category>ai</category>
    </item>
    <item>
      <title>SHIFT - AI-Powered Browser Extension 🌱</title>
      <dc:creator>Ayesha Imran</dc:creator>
      <pubDate>Mon, 20 Jan 2025 05:57:17 +0000</pubDate>
      <link>https://dev.to/ayesha_imr/shift-ai-powered-browser-extension-425f</link>
      <guid>https://dev.to/ayesha_imr/shift-ai-powered-browser-extension-425f</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github"&gt;GitHub Copilot Challenge &lt;/a&gt;: Fresh Starts &amp;amp; New Beginnings&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;SHIFT is an AI-powered browser extension that helps you make sustainable choices when shopping online. &lt;/p&gt;

&lt;p&gt;Just when you’re about to hit purchase on your next impulse buy, you can take about thirty seconds to open the extension, click the analyse button and get an in-depth analysis and sustainability rating (out of 10) of your product. A short summary of the analysis makes it convenient to get the gist in a glance.&lt;/p&gt;

&lt;p&gt;This will help you reflect on your purchasing habits and cut out overconsumption.&lt;/p&gt;

&lt;p&gt;Not just that, if you still want to buy the product for any of your needs, you can get more sustainable and eco-friendly alternative product suggestions in just a few seconds, on the click of a button. &lt;/p&gt;

&lt;p&gt;Now you can fulfil your shopping needs while being sustainable and mindful! &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Begin your SHIFT  to a more sustainable and greener lifestyle today, one purchase swap at a time.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;




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

&lt;h3&gt;
  
  
  Demo Video
&lt;/h3&gt;

&lt;p&gt;Here's a short n' sweet demo video that shows how SHIFT works - it's incredibly simple, even a baby can use it (no, really, even toddlers shop online now)!&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/Gt9M2XeEqzE"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  Link
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://chrome.google.com/webstore/detail/shift/bpplgnhmfcoohmeppibphjoahlfaebhj" rel="noopener noreferrer"&gt;https://chrome.google.com/webstore/detail/shift/bpplgnhmfcoohmeppibphjoahlfaebhj&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; At the time of publication of this blog post, my Chrome extension is still pending review as I submitted it for review on 18th Jan and it can take 2-7 for review and extension release. I hope by the time people (and specifically the judges) check out this link, it will be working. Otherwise, I hope my demo video and Github repo will be sufficient to satisfy and convince. 🤲🏻&lt;/p&gt;

&lt;h3&gt;
  
  
  Screenshots
&lt;/h3&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%2Fbu2ferflcg9ovat15msy.jpg" 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%2Fbu2ferflcg9ovat15msy.jpg" alt="SHIFT screenshots" width="800" height="812"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Repo
&lt;/h2&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/Ayesha-Imr" rel="noopener noreferrer"&gt;
        Ayesha-Imr
      &lt;/a&gt; / &lt;a href="https://github.com/Ayesha-Imr/SHIFT-Extension" rel="noopener noreferrer"&gt;
        SHIFT-Extension
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      shift towards sustainability, one purchase swap at a time
    &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;SHIFT - AI-Powered Browser Extension 🌱&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;Make your shift towards a more sustainable lifestyle today
SHIFT is a Chrome extension that helps you analyze the sustainability and eco-friendliness of products and discover eco-friendly alternatives. With SHIFT, you can make informed, greener choices effortlessly.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Features&lt;/h2&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Instant Text Extraction&lt;/strong&gt;: Extract product descriptions from any webpage with a single click.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Comprehensive Analysis&lt;/strong&gt;: Get a detailed sustainability score and eco-friendliness rating for products.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Eco-Friendly Alternatives&lt;/strong&gt;: Discover environmentally friendly alternatives to your current products, complete with purchase options and links.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;User-Friendly Interface&lt;/strong&gt;: Enjoy a clean, intuitive interface that makes it easy to access all features and information.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Demo&lt;/h2&gt;

&lt;/div&gt;
&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=Gt9M2XeEqzE" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/fc887f66e65357dd961e60b5e4c8fa632f73249cdc9b4e31a6efad8b588246f9/68747470733a2f2f696d672e796f75747562652e636f6d2f76692f4774394d32586545717a452f302e6a7067" alt="YouTube Video Title"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Installation&lt;/h2&gt;

&lt;/div&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;From the Chrome Web Store&lt;/h3&gt;

&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Visit the Chrome Web Store&lt;/strong&gt;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Go to the &lt;a href="https://chrome.google.com/webstore/detail/shift/bpplgnhmfcoohmeppibphjoahlfaebhj" rel="nofollow noopener noreferrer"&gt;SHIFT Extension page on the Chrome Web Store&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Add to Chrome&lt;/strong&gt;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Click on the "Add to Chrome" button.&lt;/li&gt;
&lt;li&gt;Confirm the installation by clicking "Add extension" in…&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/Ayesha-Imr/SHIFT-Extension" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;





&lt;h2&gt;
  
  
  Tech Details
&lt;/h2&gt;

&lt;p&gt;The sustainability analysis is powered by a large language model (GPT-4o-mini in this case) which takes the product info scraped from the webpage and generates a rating, in-depth analysis and a summary of the analysis. The response is then parsed and displayed in the extension. &lt;/p&gt;

&lt;p&gt;Similarly, the alternative sustainable products are also fetched by the LLM given the original product description, and then displayed to the user along with descriptions, in-store purchase options and clickable links to buy online immediately.&lt;/p&gt;

&lt;p&gt;GPT-4o-mini is accessed using Github Models which enables lightning-fast generation, ensuring smooth user experience.&lt;/p&gt;




&lt;h2&gt;
  
  
  Development Timeline
&lt;/h2&gt;

&lt;p&gt;I developed this app in the span of about 8 hours (with breaks lol). &lt;br&gt;
I started with first testing out LLM responses in a Python notebook by using the API provided by Github Models. This was super easy and fast to do. &lt;/p&gt;

&lt;p&gt;I passed in some sample data by copy and pasting product details from webpages and tested out different prompts to elicit responses until I perfected it. I did this for both the analysis and alternatives functions. Once I was satisfied with the responses, I converted these API calls into functions with parameters that could be called by the frontend. This entire process took barely 30 minutes.&lt;/p&gt;

&lt;p&gt;Next, I created the browser extension (or it would be better to say that Github Copilot created it for me with just a few prompts and tweaks). The UI of the extension took some tweaking to perfect and there was some overflowing and stuff but with constant prompting and nagging the Copilot, I managed to perfect the UI to my liking (as much as I could given the limited timeframe). I also added the webpage text extraction code to the frontend. &lt;/p&gt;

&lt;p&gt;Now I needed to connect the frontend to the backend. Since my functions were written in Python, I used Flask to host them and make them&lt;br&gt;
accessible via an endpoint. I did just that and then called the functions from the frontend of the extension. Again the UI needed tweaks and I had to add loading screens during the analysis so I spent some time  perfecting the UI again and ensuring the content was being displayed perfectly. This entire process took around 5 hours. &lt;/p&gt;

&lt;p&gt;Once the browser extension worked seamlessly locally, it was time to deploy it. &lt;br&gt;
I deployed the Python functions on Render using the free tier. &lt;br&gt;
Next I created a Google Developers account, paying $5 (🥲) for registration and submitted my extension for review. This took around good couple of hours as I had to record the demo video, gather screenshots and configure a privacy policy etc. &lt;/p&gt;




&lt;h2&gt;
  
  
  Copilot Experience
&lt;/h2&gt;

&lt;p&gt;Copilot was my dream coding companion in making this application - it made everything a breeze. I only had to come up with the general idea of things and it was Copilot’s duty to concretely implement my ideas into code. I used Copilot for different stages and aspects of SHIFT’s development, from basic building blocks to full deployment. &lt;/p&gt;

&lt;h3&gt;
  
  
  Frontend &amp;amp; UI
&lt;/h3&gt;

&lt;p&gt;I solely used Copilot to create the necessary backbone files and the UI of the browser extension. The structure of the extension came together in a matter of like 5 minutes even though it was my first time making a browser extension. &lt;/p&gt;

&lt;p&gt;The UI did take more time to perfect but it was all Copilot (UI isn’t my strong point tbh). I tried out Claude 3.5 Sonnet for designing the UI of the extension and I must say, it did come through!&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%2Fss6xtfdnlo6qwq1vhdkp.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%2Fss6xtfdnlo6qwq1vhdkp.png" alt="Asking Copilot to sprinkle some aesthetics to the UI." width="716" height="827"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Asking Copilot to sprinkle some aesthetics to the UI.&lt;/em&gt; ✨ &lt;/p&gt;

&lt;h3&gt;
  
  
  Adding Functionality
&lt;/h3&gt;

&lt;p&gt;Github Copilot was a great asset in helping me make backend functions and coming up with scripting code in case of triggers (buttons). &lt;br&gt;
I simply told the Copilot what I wanted to happen once a button was pressed, and it came up with the necessary code to make it happen.&lt;br&gt;
Now there were of course some issues (because whose code works perfectly the first time!?) but the Copilot was able to handle them expertly.&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%2F3pp5r7rbz3n5fzsyxeff.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%2F3pp5r7rbz3n5fzsyxeff.png" alt="I asked Copilot to write the text extraction code once the button was pressed." width="800" height="431"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;I asked Copilot to write the text extraction code once the button was pressed.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Errors &amp;amp; Edits
&lt;/h3&gt;

&lt;p&gt;Errors - the bane of all programmers’ existence. Since the advent of LLMs, it has become much easier to deal with errors in code. Copilot was essential in the debugging process for my code. It made it super easy to deal with errors - whether the errors were emergent in the terminal, functionality or syntax - Copilot handled it like a pro. &lt;br&gt;
One of the best parts about working with Copilot is the ability to simply highlight a piece of faulty code and simply ask Copilot to fix it. It’s so unbelievably fast and easy and something I have been taking advantage of majorly since Copilot was introduced like a couple years back (yes, I’m an og Github Copilot user 😉). A true gamechanger!&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%2F8chi8q4t965w5h3s80hh.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%2F8chi8q4t965w5h3s80hh.png" alt="Asking Copilot to ‘fix’ a highlighted error in my code which I absolutely had no idea how to solve." width="800" height="272"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Asking Copilot to ‘fix’ a highlighted error in my code which I absolutely had no idea how to solve.&lt;/em&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%2Fkq0teza9zjf74qvt5hon.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%2Fkq0teza9zjf74qvt5hon.png" alt="Asking Copilot to fix an error with the functionality." width="800" height="430"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Asking Copilot to fix an error with the functionality.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Autocomplete
&lt;/h3&gt;

&lt;p&gt;It still feels like magic how you just start writing some code and Copilot suggests the completion for you - it’s come in handy so many times. And for SHIFT too I heavily relied on Autocomplete for creating the backend Python functions as well as deployment using Flask. It saved a lot of time 🕰️!&lt;/p&gt;

&lt;h3&gt;
  
  
  Chat
&lt;/h3&gt;

&lt;p&gt;The in-editor Copilot chat came super useful when it was time to deploy the extension - both the backend on Render, and the extension itself on Google Developers Store. &lt;br&gt;
I used Copilot for various purposes during deployment, some are highlighted below. &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%2Fws0zbmzx75u7u80e9f8u.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%2Fws0zbmzx75u7u80e9f8u.png" alt="Asking Copilot to create the .gitignore file by attaching the entire codebase" width="800" height="275"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Asking Copilot to create the .gitignore file by attaching the entire codebase (don’t worry, I did double check it before committing the code).&lt;/em&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%2F7ptroh4o57c8popi4b53.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%2F7ptroh4o57c8popi4b53.png" alt="Chatting with Copilot about free backend deployment options - it helped me throughout the deployment process and fixing errors." width="800" height="762"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Chatting with Copilot about free backend deployment options - it helped me throughout the deployment process and fixing errors.&lt;/em&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%2Fpyw8qoog82xmbg4sqhwr.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%2Fpyw8qoog82xmbg4sqhwr.png" alt="Copilot also came up with the Privacy Policy for my browser extension that was required for publishing it" width="546" height="826"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Copilot also came up with the Privacy Policy for my browser extension that was required for publishing it (again, I double-checked it y’all).&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Additional Features I Loved
&lt;/h3&gt;

&lt;p&gt;There are so many other ways Github Copilot assisted me throughout the development of this app, from terminal commands, testing deployed API endpoints to logging function outputs. It really optimized the entire workflow.&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%2F3hjku7mdvz325gwf660z.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%2F3hjku7mdvz325gwf660z.png" alt="Copilot is super clear about which files to modify and edit." width="800" height="213"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Copilot is super clear about which files to modify and edit.&lt;/em&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%2Fgrvdztqdmia9oc06554r.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%2Fgrvdztqdmia9oc06554r.png" alt="Copilot makes inserting terminal commands a breeze - multiple commands in just one click!" width="800" height="472"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Copilot makes inserting terminal commands a breeze - multiple commands in just one click!&lt;/em&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%2F4tcfs8on6csck6in1saw.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%2F4tcfs8on6csck6in1saw.png" alt="Making my readme file in seconds with Copilot." width="800" height="698"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Making my readme file in seconds with Copilot.&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  GitHub Models
&lt;/h2&gt;

&lt;p&gt;This is the first time I tried Github Models and I am very impressed and super pleased that I can use GPT-4o and 4o mini APIs for free, even if there is rate-limiting. &lt;/p&gt;

&lt;p&gt;The limits are perfect for testing and prototyping and it is something so beneficial for developers because you don’t have to purchase credits just for creating basic MVPs and testing. &lt;/p&gt;

&lt;p&gt;And the ease of use that Github Model Playground provides is so convenient. It literally took seconds to configure the LLM API through Github Models. Without a doubt, Github Models will now be my go-to choice for calling LLM APIs in my projects. I also love how so many LLMs, both proprietary and open-source, are supported.&lt;/p&gt;

&lt;p&gt;For SHIFT, I used GPT-4o-mini because its speed and response capabilities are perfect for my use case and the rate limits are also more generous than 4o. And the results, well, lightning-fast is the only word to describe them. &lt;/p&gt;

&lt;p&gt;I tested out prompts for my app functions right there in the playground and then further in a Python notebook to perfect them and then created the final backend functions. &lt;/p&gt;

&lt;p&gt;The tasks that LLM handles via Github Models are the sustainability analysis of products and suggestion of sustainable alternatives (with links!). &lt;br&gt;
Basically the core part of the app &lt;em&gt;is&lt;/em&gt; the LLM.&lt;/p&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;I had so much fun making this app - it truly brought out my creative side. It was the weekend and I was able to fully &lt;em&gt;lock in&lt;/em&gt; and get into hyper-focus mode. &lt;/p&gt;

&lt;p&gt;I developed this entire browser extension app and sent it for publishing on the Google Developers Store on Saturday, 18th January in a span of about 8 hours.&lt;/p&gt;

&lt;p&gt;The prompts provided as the hackathon tracks were super unique and interesting and definitely out-of-the-box as compared to other hackathons so that made it even more interesting.&lt;/p&gt;

&lt;p&gt;SHIFT fits perfectly in the &lt;strong&gt;Fresh Starts&lt;/strong&gt; prompt due to its focus on sustainability and helping people get a ‘fresh start’ on their lifestyle choices and shopping habits, reducing negative impact on the environment.&lt;/p&gt;

&lt;p&gt;Other than that, I also believe that SHIFT qualifies for the &lt;strong&gt;New Beginnings&lt;/strong&gt; prompt because it motivates people to do better and embark on a new journey of more sustainable and greener lifestyle choices choices.&lt;/p&gt;

&lt;p&gt;Even though this app is currently just a small prototype that I built in a day, I can see that it has potential. &lt;/p&gt;

&lt;p&gt;People are becoming increasingly climate-conscious in light of the current issues of global warming and climate change. SHIFT, thus, may prove to be a valuable tool to help people reduce their carbon footprint and shift towards a greener lifestyle.&lt;/p&gt;

&lt;p&gt;I will definitely take SHIFT further (I mean, I have published it on Google Developers Store so I am serious about this) and work on it more. &lt;br&gt;
I hope this can actually benefit our planet in some way and be something people get in the habit of using. This is a cause I genuinely care about. 🌱 &lt;/p&gt;

&lt;p&gt;Note: The publication date shows 20 Jan because it's 20 Jan here but the PST time is still 19th Jan.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>webdev</category>
      <category>ai</category>
    </item>
  </channel>
</rss>
