<?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: Siva Teja</title>
    <description>The latest articles on DEV Community by Siva Teja (@msteja).</description>
    <link>https://dev.to/msteja</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%2F1508768%2F7ceda661-30c4-4e91-9ae4-675cd3998bb1.jpg</url>
      <title>DEV Community: Siva Teja</title>
      <link>https://dev.to/msteja</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/msteja"/>
    <language>en</language>
    <item>
      <title>CrisisLens: Compressing Disaster Scenes into 200-Byte Emergency Payloads with Gemma 4</title>
      <dc:creator>Siva Teja</dc:creator>
      <pubDate>Sun, 24 May 2026 17:45:17 +0000</pubDate>
      <link>https://dev.to/msteja/crisislens-compressing-disaster-scenes-into-200-byte-emergency-payloads-with-gemma-4-130d</link>
      <guid>https://dev.to/msteja/crisislens-compressing-disaster-scenes-into-200-byte-emergency-payloads-with-gemma-4-130d</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/google-gemma-2026-05-06"&gt;Gemma 4 Challenge: Build with Gemma 4&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;A while back I was watching a documentary about disaster response teams during a major earthquake. What struck me wasn't only the destruction — it was also the communication breakdown. Cell networks were gone. And while voice radios were still working, they weren't enough.&lt;/p&gt;

&lt;p&gt;Here's the thing about voice radio in a large-scale disaster: it works, until it doesn't. Twenty field teams radioing in simultaneously saturate the channel. Critical details get lost — wrong street names, garbled injury counts, conflicting reports about the same location. Every message requires a human on the other end to listen, interpret, and manually log what was said. And none of it can be automatically parsed, prioritized, or routed to the right team. A coordinator drowning in voice traffic can't act fast enough.&lt;/p&gt;

&lt;p&gt;There's also a harder problem: some of the most capable mesh networks used in disaster response — LoRa and Meshtastic — are &lt;strong&gt;data-only&lt;/strong&gt;. They don't carry voice at all. They exist specifically to move small packets of structured data across long distances with minimal power. They're incredibly robust in disaster conditions. But they cap at around 228 bytes per packet. You can't send an image over them. You can barely send a sentence.&lt;/p&gt;

&lt;p&gt;That's where the real gap is. A responder standing in front of a collapsed building has critical visual information — how many people, what type of structural failure, what equipment is needed — that voice can't convey accurately under stress, and that existing data networks physically cannot carry as an image.&lt;/p&gt;

&lt;p&gt;That planted a question I couldn't shake: &lt;em&gt;what if a responder could photograph what they're seeing, and have AI distill it into something small enough to actually transmit?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CrisisLens&lt;/strong&gt; is my answer to that.&lt;/p&gt;

&lt;p&gt;It runs entirely on the phone in your pocket — no servers, no internet, no infrastructure of any kind. A responder photographs what they're facing: a blocked road, a structural collapse, an injured person. CrisisLens reads the device's live GPS coordinates, feeds the image to Gemma 4 running on-device, and distills everything into a structured JSON payload of &lt;strong&gt;200 bytes or less&lt;/strong&gt; — ready to broadcast over any LoRa or Bluetooth mesh network available.&lt;/p&gt;

&lt;p&gt;The result looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nl"&gt;"loc"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;"12.8406,77.6784"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;"flood"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nl"&gt;"sev"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;"crit"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nl"&gt;"inj"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nl"&gt;"desc"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;"Road submerged 3ft"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nl"&gt;"act"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;"avoid south entry"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nl"&gt;"conf"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;"high"&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;107 bytes. Precise GPS coordinates, incident type, severity, injury count, a scene description, a recommended action, and the model's own confidence in what it saw. Ready to travel over infrastructure that was built for the 1990s.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Stack:&lt;/strong&gt; Gemma 4 E2B · LiteRT-LM · Kotlin · Jetpack Compose · Fully on-device · No internet required&lt;/p&gt;




&lt;h2&gt;
  
  
  But Why Can't a Human Just Do This?
&lt;/h2&gt;

&lt;p&gt;A trained responder can fill a structured form manually — protocols like METHANE exist precisely for this reason. So it's a fair question.&lt;/p&gt;

&lt;p&gt;The answer isn't that humans can't. It's that humans under acute stress don't. Standing in front of a burning building with people screaming is cognitively brutal. Fields get skipped. Street names get garbled. Injury counts come in as "maybe three or four." And structured reporting protocols only work if every responder has been trained on them.&lt;/p&gt;

&lt;p&gt;CrisisLens exists for everyone else — the volunteer, the civilian, the off-duty nurse who happened to be there first. One photo. No training required. Consistent, parseable output every time. And the camera sees what stress makes you miss: a human might report one visible casualty; the model looking at the photo might catch two more people partially obscured in the debris.&lt;/p&gt;

&lt;p&gt;There's also something the model does that no voice protocol can: it produces machine-readable output. A coordinator receiving 20 structured payloads can sort by severity in a spreadsheet. A coordinator receiving 20 voice messages is just drowning.&lt;/p&gt;




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

&lt;p&gt;&lt;a href="https://youtu.be/McIRQmBYseY" rel="noopener noreferrer"&gt;Video walkthrough →&lt;/a&gt;&lt;/p&gt;




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

&lt;p&gt;&lt;a href="https://github.com/MS-Teja/CrisisLens" rel="noopener noreferrer"&gt;GitHub Repo →&lt;/a&gt;&lt;/p&gt;




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

&lt;h3&gt;
  
  
  Why E2B
&lt;/h3&gt;

&lt;p&gt;The model choice here wasn't a preference — it was a hard constraint that made everything else follow logically.&lt;/p&gt;

&lt;p&gt;CrisisLens has to work when the internet doesn't. That eliminates every cloud API. The model has to run on the device a responder is already carrying. That eliminates every model too large for a phone. And it has to work for any responder, not just the ones with a $1200 flagship device.&lt;/p&gt;

&lt;p&gt;The Gemma 4 E2B — a 2B effective parameter model built specifically for ultra-mobile and edge deployment — is the only model in the Gemma 4 family that satisfies all three constraints simultaneously. The 31B Dense model requires server-grade hardware. The E4B needs 8GB+ RAM, limiting it to flagship phones. The E2B runs on mid-range Android devices with 4GB+ RAM, and even on hardware as lean as a Raspberry Pi 5.&lt;/p&gt;

&lt;p&gt;A rescue worker shouldn't need a $1200 phone to use this tool. E2B makes that true.&lt;/p&gt;

&lt;p&gt;And crucially — the vision task here isn't complex reasoning. It's constrained categorization: classify a scene into one of six incident types, assign a severity level, count visible casualties, write a 60-character description. A well-prompted 2B model with a rigid schema handles this reliably. The constraint is the point — by removing open-ended generation and forcing the model into a fixed vocabulary, accuracy becomes a function of prompt engineering, not raw parameter count.&lt;/p&gt;

&lt;p&gt;The model isn't a chatbot here. It's a translator — converting heavy visual data into lightweight, actionable intelligence that can physically travel over primitive radio networks.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Problems I Actually Had to Solve
&lt;/h2&gt;

&lt;p&gt;Building this exposed four problems that were harder than they looked.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Problem 1: Location Was Useless When Generated by the Model&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The first version of CrisisLens asked the model to describe the location from the image. The outputs were accurate but useless in context: "urban ruins," "flooded street," "collapsed structure." In a disaster zone, everywhere looks like that. No responder can act on "urban ruins."&lt;/p&gt;

&lt;p&gt;The fix was to remove location from the model's responsibilities entirely. The app reads live GPS coordinates from the device at the moment of capture and injects them directly into the payload — the model never touches the &lt;code&gt;loc&lt;/code&gt; field. Coordinates like &lt;code&gt;12.8406,77.6784&lt;/code&gt; are 15 characters, globally unambiguous, and work even when the entire scene looks like rubble. If GPS is unavailable after 10 seconds, the app falls back to &lt;code&gt;"loc":"GPS unavailable"&lt;/code&gt; and still processes the image — the analysis is never blocked waiting for a signal.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Problem 2: Getting Gemma 4 to Output Consistent JSON&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Gemma 4 is a generative model — it wants to explain, elaborate, and hedge. Ask it to analyze a disaster photo and it might produce a well-written paragraph. Ask it for JSON and it might return JSON wrapped in markdown code fences, or JSON preceded by a sentence, or subtly malformed JSON that breaks the parser downstream.&lt;/p&gt;

&lt;p&gt;I solved this in two layers. The system prompt became a formal specification — not "return JSON" but a complete field-by-field schema with types, allowed values, character budgets, and an embedded example of correct output. Second, I added a validation-and-retry loop: if the response doesn't parse cleanly, the app retries up to three times with an increasingly constrained prompt before returning a fallback error state. In practice, the retry loop almost never fires — the schema prompt alone reduced malformed outputs to near zero.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Problem 3: Enforcing 200 Bytes Without Corrupting the Payload&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Even with a tight schema prompt, the model occasionally produces valid JSON that runs slightly over 200 bytes. Naive truncation at byte 200 breaks the JSON structure entirely — which is worse than being slightly over limit.&lt;/p&gt;

&lt;p&gt;I stopped treating this as a model problem and moved it to post-processing. The schema defines a hard character budget for every field. Critical fields — &lt;code&gt;type&lt;/code&gt;, &lt;code&gt;sev&lt;/code&gt;, &lt;code&gt;inj&lt;/code&gt;, &lt;code&gt;conf&lt;/code&gt; — are constrained to enums and integers, so they can never grow. Only &lt;code&gt;desc&lt;/code&gt; and &lt;code&gt;act&lt;/code&gt; are variable-length. If the total payload exceeds 200 bytes after generation, the app trims &lt;code&gt;desc&lt;/code&gt; first, then &lt;code&gt;act&lt;/code&gt;, always cutting at word boundaries to keep the text readable. The JSON structure is never touched. The result is always valid, always parseable, always under the limit.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Problem 4: Prompt Engineering for Disaster Scenarios&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A generic prompt produces generic output. The first useful breakthrough came from realizing the model needed a closed vocabulary, not open-ended instructions.&lt;/p&gt;

&lt;p&gt;Rather than asking Gemma 4 to describe what it sees freely, I gave it a constrained set of incident types (&lt;code&gt;flood&lt;/code&gt;, &lt;code&gt;fire&lt;/code&gt;, &lt;code&gt;injury&lt;/code&gt;, &lt;code&gt;blockage&lt;/code&gt;, &lt;code&gt;structural&lt;/code&gt;, &lt;code&gt;hazmat&lt;/code&gt;) and severity levels (&lt;code&gt;low&lt;/code&gt;, &lt;code&gt;med&lt;/code&gt;, &lt;code&gt;high&lt;/code&gt;, &lt;code&gt;crit&lt;/code&gt;). This forced the model to map visual input onto a vocabulary that receiving systems can act on directly — no interpretation needed on the other end. The &lt;code&gt;conf&lt;/code&gt; field came from the same principle: if the model is uncertain about what it's seeing, the payload should say so explicitly, so responders can decide whether to verify before acting.&lt;/p&gt;

&lt;p&gt;The difference between an open prompt and a constrained one was dramatic. Open prompts produced outputs that were accurate but unpredictable in structure. Constrained prompts produced outputs that were slightly less nuanced but completely reliable — and in an emergency, reliability beats nuance.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>gemmachallenge</category>
      <category>gemma</category>
    </item>
    <item>
      <title>The Ultimate Weekend Planner</title>
      <dc:creator>Siva Teja</dc:creator>
      <pubDate>Sun, 08 Jun 2025 10:38:11 +0000</pubDate>
      <link>https://dev.to/msteja/the-ultimate-weekend-planner-4p8n</link>
      <guid>https://dev.to/msteja/the-ultimate-weekend-planner-4p8n</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;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;The "Weekend Navigator": Your Personal AI Concierge for Perfect Plans&lt;/p&gt;

&lt;p&gt;I built an autonomous AI agent using Runner H that eliminates the stress and endless scrolling associated with planning a weekend. The "Weekend Navigator" solves the common problem of "decision fatigue" by taking a single, simple prompt—like a city and a general vibe (e.g., "family-friendly")—and transforms it into a fully-fledged, shareable itinerary. It intelligently sources and vets local events, finds highly-rated nearby restaurants, and compiles everything into a clean, collaborative document, freeing up users to spend less time planning and more time enjoying their time off.&lt;/p&gt;

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

&lt;p&gt;It will output a Google doc like this&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%2Fv5gbolgjuvjfsho9fwo7.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%2Fv5gbolgjuvjfsho9fwo7.png" alt="Weekend Plans - Austin June 8 2025" width="767" height="890"&gt;&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;Runner H agent orchestrates a four-step workflow to act as a personal concierge, blending web research with practical, real-world outputs.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Event Discovery &amp;amp; Vetting (Web Search &amp;amp; RAG)&lt;br&gt;
Runner H kicks off the process by scouring the web for relevant events.&lt;/p&gt;

&lt;p&gt;Automated Web Search: It performs targeted searches on local news sites, event listing platforms (like Eventbrite), and city guides to find events matching the user's criteria (e.g., "family-friendly events in Austin this weekend").&lt;br&gt;
Data Synthesis (Google Docs &amp;amp; RAG): Using Retrieval Augmented Generation (RAG), the agent doesn't just copy links. It reads the source pages and extracts key details—event description, location, hours, ticket prices, and a snippet from a recent review—to build a rich summary for each event within a Google Doc.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Culinary Pairing (Google Maps &amp;amp; Chain-of-Thought Prompting)&lt;br&gt;
Once events are found, the agent finds great places to eat nearby.&lt;/p&gt;

&lt;p&gt;Geospatial Search (Google Maps): For each event's location, Runner H queries Google Maps for nearby restaurants.&lt;br&gt;
Intelligent Filtering (Google Sheets &amp;amp; CoT): The agent uses Chain-of-Thought (CoT) Prompting to reason through the selection process. It logs potential restaurants in a temporary Google Sheet and follows a logical chain: "First, I will filter for restaurants with a rating of 4.3 stars or higher. Second, I will filter for those with a '$$' price range or less. From the remaining list, I will select the top three based on the number of reviews." This ensures high-quality, relevant suggestions.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Itinerary Assembly &amp;amp; Formatting (Google Docs &amp;amp; Meta Prompting)&lt;br&gt;
With all the data gathered, the agent creates the final deliverable.&lt;/p&gt;

&lt;p&gt;Document Generation (Google Docs): It compiles the vetted events and their paired restaurant options into a single, beautifully formatted Google Doc titled Weekend Plans - [City] [Date].&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Collaboration &amp;amp; Action (Gmail &amp;amp; Active-Prompt)&lt;br&gt;
The final step is to share the plan and make it actionable.&lt;/p&gt;

&lt;p&gt;Automated Sharing (Gmail): Runner H drafts and sends an email containing a link to the Google Doc to the specified contact (e.g., a spouse or friend).&lt;br&gt;
User-in-the-Loop (Active-Prompt): Before finishing, the agent uses Active-Prompt to offer a next step: "The Weekend Navigator plan has been created and shared. Based on the itinerary, would you like me to add a placeholder event to your Google Calendar for Saturday afternoon to block off the time?" This makes the agent interactive and even more helpful.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;&lt;strong&gt;Who Benefits:&lt;/strong&gt; Busy parents, couples, groups of friends, and anyone suffering from planning burnout.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Impact:&lt;/strong&gt; This agent saves hours of research and negotiation each week, reduces decision fatigue, and encourages people to discover new things in their city, ultimately fostering better work-life balance and more quality social time. It transforms a tedious task into a delightful, automated experience.&lt;/p&gt;

&lt;h2&gt;
  
  
  Full Prompt
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
    Runner H, execute the "Weekend Navigator" workflow. Your goal is 
to create a shareable weekend plan.

1. Event Discovery: Using web search, find 3 family-friendly events 
happening in Austin, TX this coming weekend. For each, use RAG to 
extract: a description, location, ticket price, and one recent review 

2. Restaurant Pairing: For each event, use Google Maps and Chain-of-
Thought logic to find 3 nearby restaurants that are highly-rated (4.3 
stars+) and moderately priced.

3. Itinerary Assembly: Compile all this information into a new Google 
Doc named Weekend Plans - Austin [Current Date]. Use Meta Prompting 
to create a friendly introductory paragraph. The format for each 
event should be: Event Name, Details, and then the 3 restaurant 
suggestions.

4. Sharing: Draft and send an email to [email@example.com] with 
the subject "Weekend Plans!" and a link to the Google Doc.

5. Confirmation: Use Active-Prompt to ask if I want to add a 
placeholder event to my Google Calendar for Saturday at 2 PM.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>devchallenge</category>
      <category>runnerhchallenge</category>
      <category>ai</category>
      <category>machinelearning</category>
    </item>
    <item>
      <title>Code Archeologist: AI-Powered Git Repository Analysis with PostgreSQL</title>
      <dc:creator>Siva Teja</dc:creator>
      <pubDate>Mon, 11 Nov 2024 07:11:55 +0000</pubDate>
      <link>https://dev.to/msteja/code-archeologist-ai-powered-git-repository-analysis-with-postgresql-4en9</link>
      <guid>https://dev.to/msteja/code-archeologist-ai-powered-git-repository-analysis-with-postgresql-4en9</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/pgai"&gt;Open Source AI Challenge with pgai and Ollama&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;




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

&lt;p&gt;&lt;strong&gt;Code Archeologist&lt;/strong&gt; is an AI-powered application that analyzes Git repository histories to identify patterns in code evolution. It creates a "genetic tree" of your code's ancestry, provides refactoring suggestions, generates a codebase heatmap, commit activity timeline, contributor statistics, dependency graph, file change frequency, and integrates with issue tracking. Leveraging PostgreSQL extensions &lt;code&gt;pgvector&lt;/code&gt; and &lt;code&gt;pgvectorscale&lt;/code&gt;, along with Ollama for text embeddings, the application performs high-performance similarity searches and advanced AI-driven insights without the need for external vector databases.&lt;/p&gt;




&lt;h2&gt;
  
  
  Demo
&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/MS-Teja" rel="noopener noreferrer"&gt;
        MS-Teja
      &lt;/a&gt; / &lt;a href="https://github.com/MS-Teja/code-archeologist" rel="noopener noreferrer"&gt;
        code-archeologist
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Code Archeologist analyzes your Git repository history to identify patterns in code evolution.
    &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;Code Archeologist&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Code Archeologist&lt;/strong&gt; analyzes your Git repository history to identify patterns in code evolution. It creates a "genetic tree" of your code's ancestry, provides refactoring suggestions, generates a codebase heatmap, commit activity timeline, contributor statistics, dependency graph, file change frequency, and integrates with issue tracking.&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;Genetic Tree:&lt;/strong&gt; Visualize the ancestry of your codebase.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Refactoring Suggestions:&lt;/strong&gt; Receive actionable recommendations to improve your code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Codebase Heatmap:&lt;/strong&gt; Identify hotspots and areas with high activity.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Commit Activity Timeline:&lt;/strong&gt; Track commit patterns over time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Contributor Statistics:&lt;/strong&gt; Analyze contributions from different team members.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Dependency Graph:&lt;/strong&gt; Visualize project dependencies.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;File Change Frequency:&lt;/strong&gt; Monitor how often files are modified.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Issue Integration:&lt;/strong&gt; Link code changes with issue tracking systems.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Semantic Search in Commits:&lt;/strong&gt; Find similar commits based on semantic meaning using vector embeddings.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Question Answering:&lt;/strong&gt; Ask questions about your codebase and receive AI-generated answers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Summarization:&lt;/strong&gt; Get concise summaries of commit messages.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Features with AI Integration&lt;/h2&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Vector Embeddings:&lt;/strong&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/MS-Teja/code-archeologist" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&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%2Fsp28tzj0iah8e30incd3.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%2Fsp28tzj0iah8e30incd3.png" alt="Home" width="800" height="450"&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%2Fhqs17csahhiu47s70vrr.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%2Fhqs17csahhiu47s70vrr.png" alt="Analyzing" width="800" height="450"&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%2F3xkv13qznugogtzeqx2z.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%2F3xkv13qznugogtzeqx2z.png" alt="Code Evolution Graph" width="800" height="450"&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%2Fby9qq0fahz38po2vdul4.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%2Fby9qq0fahz38po2vdul4.png" alt="Similar Commits" width="800" height="450"&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%2Fyyrthykmb0q9cod485wl.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%2Fyyrthykmb0q9cod485wl.png" alt="Commit Questions" width="800" height="450"&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%2F7incvx31nnoudnl96yfm.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%2F7incvx31nnoudnl96yfm.png" alt="Summary" width="800" height="450"&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%2Fgm2dinse7tp5pfkcbmrp.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%2Fgm2dinse7tp5pfkcbmrp.png" alt="File Change Frequency" width="800" height="450"&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%2F3oetzq1t6ns0dcjaaztv.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%2F3oetzq1t6ns0dcjaaztv.png" alt="Commit Activity Timeline" width="800" height="450"&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%2Fwcitvtfni3tgmxswqkv2.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%2Fwcitvtfni3tgmxswqkv2.png" alt="Contributors" width="800" height="450"&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%2F589xduef9o70k1qij4mw.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%2F589xduef9o70k1qij4mw.png" alt="Dependency Graph" width="800" height="450"&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%2Fmzk7q00vxeo9xh52p779.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%2Fmzk7q00vxeo9xh52p779.png" alt="Issues" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  How the Project Works
&lt;/h2&gt;

&lt;p&gt;Code Archeologist utilizes a combination of PostgreSQL extensions and open-source AI models to deliver a seamless analysis experience:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Data Ingestion&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The application connects to a GitHub repository and fetches commit history, contributors, file changes, issues, and dependencies using the GitHub API.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Embedding Generation&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Commit messages and relevant text data are processed using Ollama to generate 768-dimensional vector embeddings.&lt;/li&gt;
&lt;li&gt;These embeddings are stored in PostgreSQL using the &lt;code&gt;pgvector&lt;/code&gt; extension, which allows efficient storage and retrieval of high-dimensional vectors.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Indexing and Similarity Search&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;code&gt;pgvectorscale&lt;/code&gt; extension is employed to create a &lt;code&gt;diskann&lt;/code&gt; index on the embedding column, enabling fast approximate nearest neighbor searches.&lt;/li&gt;
&lt;li&gt;This setup allows the application to perform rapid similarity searches, facilitating features like semantic commit search and question answering.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;AI-Driven Features&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Refactoring Suggestions&lt;/strong&gt;: Analyzes code evolution to recommend potential improvements.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Summarization&lt;/strong&gt;: Generates concise summaries of commit messages using AI models.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Question Answering&lt;/strong&gt;: Allows users to ask natural language questions about the codebase and receive AI-generated answers based on the commit history.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;&lt;p&gt;&lt;strong&gt;Visualization&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;The frontend built with Vue.js displays various visualizations such as genetic trees, heatmaps, timelines, and dependency graphs, providing users with insightful views of their codebase.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Performance and Scalability&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By leveraging PostgreSQL with &lt;code&gt;pgvector&lt;/code&gt; and &lt;code&gt;pgvectorscale&lt;/code&gt;, the application ensures efficient storage, rapid querying, and scalability to handle large datasets without relying on external vector databases.&lt;/p&gt;




&lt;h2&gt;
  
  
  How the Backend Works
&lt;/h2&gt;

&lt;p&gt;The backend of &lt;strong&gt;Code Archeologist&lt;/strong&gt; is built using &lt;strong&gt;Node.js&lt;/strong&gt; and &lt;strong&gt;Express.js&lt;/strong&gt;, interfacing with a PostgreSQL database enhanced with AI-specific extensions. Here’s an overview of its functionality:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Session Management&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Utilizes &lt;code&gt;express-session&lt;/code&gt; to handle user sessions, ensuring secure and persistent interactions.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Database Initialization&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Connects to PostgreSQL database.&lt;/li&gt;
&lt;li&gt;Initializes the database schema, creating tables like &lt;code&gt;code_analysis&lt;/code&gt; and &lt;code&gt;commit_embeddings&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Ensures necessary extensions (&lt;code&gt;pgvector&lt;/code&gt;, &lt;code&gt;pgvectorscale&lt;/code&gt;) are installed for vector operations and AI functionalities.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Data Processing&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Fetching Data&lt;/strong&gt;: Retrieves commits, contributors, issues, and dependencies from GitHub repositories.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Embedding Generation&lt;/strong&gt;: Uses Ollama to generate vector embeddings for commit messages, storing them with &lt;code&gt;pgvector&lt;/code&gt; for efficient similarity searches.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Indexing&lt;/strong&gt;: Implements &lt;code&gt;pgvectorscale&lt;/code&gt; with &lt;code&gt;diskann&lt;/code&gt; indexing to optimize search performance.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;AI Integration&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;OpenAI &amp;amp; Ollama&lt;/strong&gt;: Integrates OpenAI for generating completions and Ollama for creating text embeddings, facilitating features like refactoring suggestions and question answering.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Error Handling&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Implements robust error handling across all endpoints, ensuring meaningful responses and logging errors for debugging.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  Technologies and Tools Used
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Frontend:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Vue.js:&lt;/strong&gt; JavaScript framework for building user interfaces.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Axios:&lt;/strong&gt; Promise-based HTTP client for making API requests.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cytoscape.js:&lt;/strong&gt; Library for graph theory (network) data visualization.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Chart.js:&lt;/strong&gt; Simple yet flexible JavaScript charting library.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Highlight.js:&lt;/strong&gt; Syntax highlighting for code snippets.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;QTip2:&lt;/strong&gt; Advanced tooltips for enhanced user interactions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;D3.js:&lt;/strong&gt; Data-driven documents for creating dynamic visualizations.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;DOMPurify:&lt;/strong&gt; Sanitizes HTML to prevent XSS attacks.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Backend:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Node.js:&lt;/strong&gt; Server-side JavaScript runtime.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Express.js:&lt;/strong&gt; Web framework for building API endpoints.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;PostgreSQL:&lt;/strong&gt; Relational database system.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;vector:&lt;/strong&gt; PostgreSQL extension for storing vector embeddings.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;vectorscale:&lt;/strong&gt; Extension for optimized vector similarity searches.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Octokit:&lt;/strong&gt; GitHub API client for fetching repository data.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;dotenv:&lt;/strong&gt; Loads environment variables from a &lt;code&gt;.env&lt;/code&gt; file.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;express-session:&lt;/strong&gt; Manages user sessions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Winston:&lt;/strong&gt; Logging library for capturing application logs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cors:&lt;/strong&gt; Enables Cross-Origin Resource Sharing.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;AI &amp;amp; Machine Learning:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Ollama:&lt;/strong&gt; Generates text embeddings using open-source models.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;OpenAI SDK:&lt;/strong&gt; Facilitates AI-driven features like completions and question answering.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;APIs&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;GitHub API:&lt;/strong&gt; Accesses repository information.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;OpenAI API:&lt;/strong&gt; For generating summaries and answering questions.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Building Code Archeologist was a great experience that showed me just how powerful combining PostgreSQL extensions with AI tools can be. Using pgvector, pgvectorscale, and Ollama together made it possible to create a strong, scalable app that can handle complex searches and give useful insights. This project really boosted my appreciation for using open-source tools to build smart AI applications.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Thanks for considering my submission!&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>pgaichallenge</category>
      <category>database</category>
      <category>ai</category>
    </item>
    <item>
      <title>Haiku Harmony: Crafting Poetry in the Cloud with Pinata</title>
      <dc:creator>Siva Teja</dc:creator>
      <pubDate>Sun, 13 Oct 2024 16:57:06 +0000</pubDate>
      <link>https://dev.to/msteja/haiku-harmony-crafting-poetry-in-the-cloud-with-pinata-17lk</link>
      <guid>https://dev.to/msteja/haiku-harmony-crafting-poetry-in-the-cloud-with-pinata-17lk</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/pinata"&gt;The Pinata Challenge &lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;I created Haiku Harmony, a web application that brings the art of haiku into the digital age. This platform allows users to create, share, and appreciate haikus, each accompanied by an image. Key features include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A user-friendly interface for composing and submitting haikus&lt;/li&gt;
&lt;li&gt;User profiles showcasing each author's haiku collection&lt;/li&gt;
&lt;li&gt;A search feature allowing users to find haikus by tags&lt;/li&gt;
&lt;li&gt;A "Hall of Fame" section highlighting the most popular haikus&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What makes Haiku Harmony unique is its use of Pinata's decentralized storage solution. Each haiku and its associated image are stored on IPFS through Pinata, eliminating the need for a traditional database. This approach not only simplified the development process but also made me realize how easy it is to create a scalable application without the usual database hassles.&lt;/p&gt;

&lt;p&gt;I developed this during my exams so excuse me for any bugs. I tested this as much as I could, so I hope you won't find any. But due to time constraints I haven't tested it as much as I would have liked.  &lt;/p&gt;

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

&lt;p&gt;You can see it in action at &lt;a href="https://haikuharmony.netlify.app/" rel="noopener noreferrer"&gt;https://haikuharmony.netlify.app/&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;The source code is available on GitHub: &lt;br&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://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/MS-Teja" rel="noopener noreferrer"&gt;
        MS-Teja
      &lt;/a&gt; / &lt;a href="https://github.com/MS-Teja/HaikuHarmony" rel="noopener noreferrer"&gt;
        HaikuHarmony
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Haiku Harmony is a web application that celebrates the art of haiku by providing a platform for users to create, share, and appreciate these brief poetic gems.
    &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;Haiku Harmony&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;Haiku Harmony is a web application that celebrates the art of haiku by providing a platform for users to create, share, and appreciate these brief poetic gems. Built with Vue.js and leveraging Pinata's Files API, this project combines the simplicity of haiku with the power of decentralized storage.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Live Demo&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;Visit Haiku Harmony: &lt;a href="https://haikuharmony.netlify.app/" rel="nofollow noopener noreferrer"&gt;Haiku Harmony&lt;/a&gt;&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;Create and share haikus with associated images&lt;/li&gt;
&lt;li&gt;Browse a feed of user-submitted haikus&lt;/li&gt;
&lt;li&gt;Like and interact with others' creations&lt;/li&gt;
&lt;li&gt;Search haikus by tags&lt;/li&gt;
&lt;li&gt;User profiles showcasing individual collections&lt;/li&gt;
&lt;li&gt;A "Hall of Fame" featuring top-rated haikus&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Technology Stack&lt;/h2&gt;

&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Frontend: Vue.js&lt;/li&gt;
&lt;li&gt;Backend: Netlify Functions&lt;/li&gt;
&lt;li&gt;Storage: IPFS via Pinata SDK&lt;/li&gt;
&lt;li&gt;Authentication &amp;amp; Likes: Firebase&lt;/li&gt;
&lt;li&gt;Hosting: Netlify&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Thank you for providing that information. I'll update the README to reflect the correct environment variables and development process. Here's the revised section for local development:&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Local Development&lt;/h2&gt;

&lt;/div&gt;
&lt;p&gt;To run this project locally:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Clone the repository&lt;/p&gt;
&lt;div class="snippet-clipboard-content notranslate position-relative overflow-auto"&gt;
&lt;pre class="notranslate"&gt;&lt;code&gt;git clone https://github.com/MS-Teja/HaikuHarmony.git&lt;/code&gt;&lt;/pre&gt;…&lt;/div&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/MS-Teja/HaikuHarmony" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  My Journey
&lt;/h2&gt;

&lt;p&gt;When I first encountered the Pinata Challenge prompt to "use Pinata" in a project, I had no idea how transformative this experience would be. As an 18-year-old student from India, I decided to create Haiku Harmony, a web application for sharing and appreciating haikus. What I discovered along the way was a revelation in web development simplicity.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Pinata Revelation
&lt;/h3&gt;

&lt;p&gt;Integrating Pinata into Haiku Harmony opened my eyes to how easy it can be to create a scalable application without the complexities of traditional databases. Here's what I learned:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Simplified Storage: Instead of setting up and managing a database, I could store haikus and images directly on IPFS through Pinata with just a few lines of code.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Effortless Retrieval: Fetching content became as simple as making API calls to Pinata's gateway. No complex queries or database management required.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Built-in Scalability: I realized that as Haiku Harmony grows, I won't need to worry about database scaling. Pinata's decentralized storage can handle increased load without additional configuration.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reduced Backend Complexity: Without a traditional database, my backend became significantly simpler, focusing mainly on interacting with Pinata's API.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  The Implementation
&lt;/h3&gt;

&lt;p&gt;Using Pinata was surprisingly straightforward. For example, uploading a haiku was as simple as:&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;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;pinata&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pinJSONToIPFS&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;haikuData&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;pinataOptions&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And retrieving it was equally uncomplicated:&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;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;axios&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="s2"&gt;`https://&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;pinataGateway&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/ipfs/&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;id&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This simplicity allowed me to focus more on creating features and improving user experience, rather than getting bogged down in database management.&lt;/p&gt;

&lt;h2&gt;
  
  
  Reflections
&lt;/h2&gt;

&lt;p&gt;Developing Haiku Harmony during my exams was challenging, but Pinata's ease of use made it possible. I was amazed at how I could create a potentially scalable application without the need for complex database setups or management.&lt;/p&gt;

&lt;p&gt;This experience has shown me that for content-centric applications, solutions like Pinata can offer a compelling alternative to traditional databases, simplifying both development and scaling processes significantly.&lt;/p&gt;

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

&lt;p&gt;The ease of using Pinata has been a game-changer in my understanding of web development. It's shown me that creating scalable applications doesn't always require complex infrastructure.&lt;/p&gt;

&lt;p&gt;I'm eager to hear thoughts and feedback from the community. If you think I did something wrong or have suggestions to improve Haiku Harmony, I'd be grateful for your input. Your insights will help me grow as a developer and enhance this project further.&lt;/p&gt;

&lt;p&gt;This challenge has not only resulted in a production level application but also opened my eyes to new possibilities in web development. It's exciting to think about how tools like Pinata can shape the future of content-driven applications.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>pinatachallenge</category>
      <category>webdev</category>
      <category>api</category>
    </item>
    <item>
      <title>Cosmic Web: A Student's Journey Through Space and Code</title>
      <dc:creator>Siva Teja</dc:creator>
      <pubDate>Thu, 12 Sep 2024 14:21:35 +0000</pubDate>
      <link>https://dev.to/msteja/cosmic-web-a-students-journey-through-space-and-code-7l</link>
      <guid>https://dev.to/msteja/cosmic-web-a-students-journey-through-space-and-code-7l</guid>
      <description>&lt;h1&gt;
  
  
  Frontend Challenge v24.09.04 Submission: Explore the Cosmos
&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;This is a submission for &lt;a href="https://dev.to/challenges/frontend-2024-09-04"&gt;Frontend Challenge v24.09.04&lt;/a&gt;, Glam Up My Markup: Space&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;I created "Explore the Cosmos," an immersive and educational landing page that takes visitors on a journey through our solar system. The goal was to design an engaging, visually appealing, and informative website that sparks curiosity about space and celestial bodies.&lt;/p&gt;

&lt;p&gt;Key features of the landing page include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A captivating header with a space background and animated scroll arrow&lt;/li&gt;
&lt;li&gt;Comprehensive overview of our solar system&lt;/li&gt;
&lt;li&gt;Detailed information about each planet, including key facts and images&lt;/li&gt;
&lt;li&gt;Sections dedicated to notable moons and other celestial objects&lt;/li&gt;
&lt;li&gt;Interactive elements that link to NASA's science pages for further exploration&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The design aims to balance aesthetics with educational content, creating an experience that's both visually stunning and intellectually stimulating.&lt;/p&gt;

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

&lt;p&gt;[&lt;a href="https://github.com/MS-Teja/spaceexplorer.git" rel="noopener noreferrer"&gt;Github Repository&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;You can view the live demo of the project at: &lt;br&gt;
&lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;a href="https://explorecosmos.web.app" rel="noopener noreferrer"&gt;
      explorecosmos.web.app
    &lt;/a&gt;
&lt;/div&gt;


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

&lt;p&gt;As a student, this is my first time participating in an event like this, and I'm excited to share my journey! Creating "Explore the Cosmos" was not only an exciting adventure that allowed me to combine my passion for web development with my fascination for space, but also a significant learning experience for me.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;First-Time Experience&lt;/strong&gt;: Being my first time entering such an event, I was both nervous and thrilled. This challenge pushed me out of my comfort zone and encouraged me to apply my skills in a real-world scenario.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Planning and Research&lt;/strong&gt;: I started by researching space-related content and deciding on the key elements to include. This helped me structure the information in a logical and engaging way.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Design&lt;/strong&gt;: I chose a dark color scheme to emulate the vastness of space, using stark whites and subtle animations to create visual interest. The font choices (Space Grotesk and Space Mono) were selected to enhance the space theme. This was my first time focusing so intensely on design aspects, and it taught me a lot about user experience and visual communication.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Development&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;HTML: I focused on semantic markup to ensure accessibility and SEO-friendliness. This project helped me understand the importance of well-structured HTML.&lt;/li&gt;
&lt;li&gt;CSS: I used modern CSS techniques like Grid and Flexbox for layout. The animated background and scroll arrow were challenging but rewarding to implement.&lt;/li&gt;
&lt;li&gt;JavaScript: I added interactivity by making each celestial body clickable, linking to NASA's science pages for more in-depth information.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Challenges&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Balancing visual appeal with performance, especially with the background animation&lt;/li&gt;
&lt;li&gt;Ensuring responsiveness across different screen sizes while maintaining the visual integrity of planet images and layouts&lt;/li&gt;
&lt;li&gt;As a student, time management was a challenge, balancing this project with my other academic responsibilities&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Learnings&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Improved my skills in creating immersive web experiences&lt;/li&gt;
&lt;li&gt;Gained deeper understanding of CSS animations and their impact on performance&lt;/li&gt;
&lt;li&gt;Learned more about our solar system while curating the content&lt;/li&gt;
&lt;li&gt;Developed project management skills and learned how to work under the constraints of a challenge&lt;/li&gt;
&lt;li&gt;Gained confidence in my abilities as a web developer&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I'm particularly proud of the seamless integration of educational content with an engaging design. The way each planet card transforms on hover, inviting users to explore further, is a detail I really enjoy. As a student, seeing my vision come to life was incredibly rewarding and has motivated me to continue exploring web development.&lt;/p&gt;

&lt;h2&gt;
  
  
  Next Steps
&lt;/h2&gt;

&lt;p&gt;This experience has ignited a passion for web development and space education. Moving forward, I'd love to expand this project by:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Adding more interactive elements, perhaps a 3D model of the solar system&lt;/li&gt;
&lt;li&gt;Implementing a quiz feature to test users' knowledge about space&lt;/li&gt;
&lt;li&gt;Creating individual pages for each celestial body with more detailed information&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Participating in this challenge has been a fantastic opportunity to combine creativity with technical skills, and I'm excited to continue refining and expanding my project. As a student, this experience has been invaluable, providing me with practical skills, boosting my confidence, and giving me a taste of real-world web development challenges. I'm looking forward to participating in more events like this in the future!&lt;/p&gt;

&lt;p&gt;See you later. &lt;br&gt;
Thank You! &lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>frontendchallenge</category>
      <category>css</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
