<?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: Poetry Of Code</title>
    <description>The latest articles on DEV Community by Poetry Of Code (@poetryofcode).</description>
    <link>https://dev.to/poetryofcode</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%2F1120880%2Fc640f1e3-0674-449e-9d79-73642c1c64d7.jpg</url>
      <title>DEV Community: Poetry Of Code</title>
      <link>https://dev.to/poetryofcode</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/poetryofcode"/>
    <language>en</language>
    <item>
      <title>We won a Hackathon at Brown University 🏆</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Mon, 02 Feb 2026 04:03:55 +0000</pubDate>
      <link>https://dev.to/poetryofcode/we-won-a-hackathon-at-brown-university-5f3o</link>
      <guid>https://dev.to/poetryofcode/we-won-a-hackathon-at-brown-university-5f3o</guid>
      <description>&lt;p&gt;&lt;strong&gt;Inspiration&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We’ve all faced household repairing issues without knowing where to start. A woman living alone in an apartment, or a college freshman who just learned how to do laundry (that’s me!), may run into everyday problems: from clogged toilets to leaks in a water pipe. &lt;/p&gt;

&lt;p&gt;Sometimes it feels uncomfortable inviting strangers into our living space just to check a minor issue. And in cities like New York, even a quick technician visit can be expensive, which becomes a real financial burden for both young adults and seniors. We realized that many people mainly need clear, step-by-step guidance on what to do first and what is actually safe to try.&lt;/p&gt;

&lt;p&gt;That’s what inspired us to build an interactive home troubleshooting platform that feels like FaceTiming your dad: someone who has experience dealing with household appliances and repairs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What it does&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;HandyDaddy helps when you’re dealing with household issues, ranging from a simple fan problem to more stressful tasks like figuring out how to plunge a toilet. Before HandyDaddy, we often ended up calling our dad or spending a long time searching online for information, but those options don’t provide live feedback for your specific situation.&lt;/p&gt;

&lt;p&gt;HandyDaddy solves that by using live video to give step-by-step guidance based on what it sees. Instead of only prompting a language model and trusting whatever it generates, HandyDaddy uses a more reliable pipeline: structured outputs plus RAG-backed retrieval, so the response stays grounded, efficient, and safe.&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%2Fqbjy312n0wviwusc0lag.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%2Fqbjy312n0wviwusc0lag.png" alt=" " width="800" height="519"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How we built it&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We built HandyDaddy as a personal real-time, vision-first home repair assistant. The core idea was simple: instead of asking users to describe a problem, we let them SHOW it.&lt;/p&gt;

&lt;p&gt;The system continuously captures images from a live video feed and sends them to a Gemini, which acts as a vision model. From each frame, the model produces a structured analysis and output in JSON, identifying the fixture, location, potential issues, and safety level. That structured output becomes the groundwork of everything that follows. This step also leads to a semantic search query that is optimized for documentation, not natural language guessing.&lt;/p&gt;

&lt;p&gt;We further used Retrieval-Augmented Generation (RAG). We built our own vector store using FAISS and sentence embeddings, indexing real repair and safety documents written in md documents. Instead of asking the model to simply “figure it out,” we retrieve the most relevant information and feed it directly into the solution stage, implementing every recommendation in real instructions.&lt;/p&gt;

&lt;p&gt;For solution generation, we use a high-performance LLM, Groq, to synthesize a clear, step-by-step plan from three inputs: the refined analysis, retrieved documents, and safety constraints. This separation (vision → reasoning → retrieval → planning) helps keep each model focused on a single responsibility and makes the system easier to debug and trust.&lt;/p&gt;

&lt;p&gt;All intermediate states are stored per session in Redis, allowing the system to track progress over time rather than treating each image as an isolated request. To make this transparent, we built a local “backstage viewer” that shows exactly how data flows through the pipeline, from raw vision output to final guidance.&lt;/p&gt;

&lt;p&gt;Overall, HandyDaddy is similar to our Dad: less about speed and power, but with careful orchestration: constraining outputs, separating responsibilities, and grounding decisions in real documentation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Challenges we ran into&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq0xxmz6op248zt6c0lb1.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%2Fq0xxmz6op248zt6c0lb1.JPG" alt=" " width="800" height="1066"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One of the hardest challenges was starting building system architecture from the ground-up, while avoiding the temptation of building just another GPT wrapper. We didn’t want HandyDaddy to feel like a chatbot that gives common answers without actually understanding the situation. Since this tool is meant to help real people with real problems, sometimes involving water, electricity, or safety, we knew guessing was not acceptable.&lt;/p&gt;

&lt;p&gt;To make the system trustworthy, we had to design a much more complex architecture than we originally expected. Instead of letting one model do everything, we separated the system into clear stages: visual understanding (Gemini), structured reasoning and output (JSON), document retrieval (RAG), and step-by-step planning (Groq). Each stage has its important roles, which made development seem a little bit slower and more difficult in the beginning, but also far more reliable.&lt;/p&gt;

&lt;p&gt;Another challenge was that creating the flow that the mode’s output leads to structured decisions. Making the system output a strict JSON schema instead of any kind of free-form text caused many doubts and failures at first. However, we learned that this constraint was necessary, and became a stepping stone to help HandyDaddy to another level. It allowed us to track state, reason about safety, and explain why the system made a certain recommendation.&lt;/p&gt;

&lt;p&gt;Overall, the biggest challenge was choosing correctness and trust over speed and simplicity. Building a system for people means being careful, even when it’s inconvenient.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Accomplishments that we're proud of&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fleqtr5qdoc6ow6aiotpa.jpeg" 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%2Fleqtr5qdoc6ow6aiotpa.jpeg" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We’re most proud of the complete full-cycle architecture we built and how it works in real time. HandyDaddy doesn’t just analyze a single image, but it reacts, updates, and guides users step by step based on what it sees LIVE. This makes the experience feel personal and practical, not theoretical.&lt;/p&gt;

&lt;p&gt;The live feedback loop is something we genuinely find useful and proud of ourselves. Seeing the system detect a situation, assess risk, and immediately guide the next safe action feels like something coming in full circle: something we would actually want to use at our college dorm starting from tomorrow.&lt;/p&gt;

&lt;p&gt;We’re also proud that the system is transparent. Every decision, from vision detection to document-based guidance, can be traced and inspected. That clarity gives us confidence that the system isn’t guessing, and it helps us improve it faster.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What we learned&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjc30si2c5tk6gwn81l8a.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%2Fjc30si2c5tk6gwn81l8a.JPG" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We learned that the world is full of problems, but time is always limited! That problem is what makes building things exciting. Staying up late (actually slept less than a minute), debugging one line at a time, and slowly watching the system come together was genuinely fun and meaningful for us.&lt;/p&gt;

&lt;p&gt;None of us had designed a full AI pipeline from scratch like this before. Reading research papers, watching youtube videos, and experimenting with different approaches taught us far more than we expected. We learned not just how models work, but how systems work, and how small design decisions affect trust, safety, and usability.&lt;/p&gt;

&lt;p&gt;Most importantly, we realized how powerful it feels to build something that could help many different people: college students, families, and even older adults. That thought made every long night feel worth it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What's next for HandyDaddy&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Right now, HandyDaddy supports image analysis and speech input, but they are still processed separately. One unresolved challenge is synchronizing voice recordings and images at the same moment. Because image capture and speech updates trigger different state resets in the frontend, true simultaneous submission is not fully solved yet.&lt;/p&gt;

&lt;p&gt;Our next step is to combine these input streams, capturing voice and image together as a single input, so the system can understand not just what it sees, but what the user is saying at that exact moment. Solving this would make HandyDaddy feel much more natural and human.&lt;/p&gt;

&lt;p&gt;Beyond that, we want to expand the system to handle more household scenarios while keeping the same core principle: complex reasoning, grounded and verified knowledge, and real usefulness for real people!&lt;/p&gt;

</description>
      <category>ai</category>
      <category>rag</category>
      <category>elevenlabs</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Frameworks for Humans in the Age of Machines</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Sat, 17 Jan 2026 01:15:30 +0000</pubDate>
      <link>https://dev.to/poetryofcode/frameworks-for-humans-in-the-age-of-machines-2aln</link>
      <guid>https://dev.to/poetryofcode/frameworks-for-humans-in-the-age-of-machines-2aln</guid>
      <description>&lt;p&gt;Yesterday I attended “Frameworks for Humans in the Age of Machines,” a talk by Rich Harris, the founder of Svelte.&lt;/p&gt;

&lt;p&gt;The talk explored a big question: as more engineering work shifts to AI agents and automation, what is left for humans to do? Rich’s answer was simple and reassuring a lot. He spoke about building tools that feel good to use, cutting unnecessary complexity, and creating frameworks that work with developers instead of fighting them.&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%2Fjan97c616t3ufyi6g5io.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%2Fjan97c616t3ufyi6g5io.JPG" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Rich also shared that he began his career in journalism before moving into tech. That background clearly shaped his focus on clarity, storytelling, and communication in software. You can see this mindset deeply reflected in Svelte’s philosophy: simple ideas, clear intent, and tools designed for humans.&lt;/p&gt;

&lt;p&gt;Svelte is turning 10 years old this year, which is a lifetime in web development, and it was born in Brooklyn, making the moment especially meaningful for a NYC audience. Svelte has been gaining popularity thanks to its no virtual DOM, compile-time optimization, small bundle sizes, and clean, readable syntax. It feels closer to real-world development, built on standard HTML, CSS, and JavaScript.&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%2Fgx5bs47g52736j0olxke.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%2Fgx5bs47g52736j0olxke.JPG" alt=" " width="800" height="1066"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A fun fact: the word Svelte literally means fast, lean, flexible, smart, and elegant, exactly what the framework aims to be.&lt;/p&gt;

&lt;p&gt;Rich closed with a quote that perfectly summed up Svelte's philosophy:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;We would rather have a thing that a small number of people love than a thing a large number of people tolerate.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>svelte</category>
      <category>webdev</category>
      <category>framework</category>
      <category>richharris</category>
    </item>
    <item>
      <title>Visiting the LinkedIn Office</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Wed, 10 Dec 2025 03:08:33 +0000</pubDate>
      <link>https://dev.to/poetryofcode/visiting-the-linkedin-office-2c8c</link>
      <guid>https://dev.to/poetryofcode/visiting-the-linkedin-office-2c8c</guid>
      <description>&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%2Fcpjwwqpg6vycfox3t20w.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%2Fcpjwwqpg6vycfox3t20w.JPG" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I’ve been using LinkedIn for a few years now, so getting the chance to tour their office felt very special. I was super excited to see what the place behind the platform actually looks like. And honestly, it could not be in a more iconic location than the Empire State Building. Walking into that building already feels like a moment.&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%2Fkogsjmnybavnhs12qncj.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%2Fkogsjmnybavnhs12qncj.JPG" alt=" " width="800" height="1066"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The office has a modern and warm vibe, full of open spaces, clean design, and amazing views of New York. It feels like a place built for ideas, teamwork, and growth.&lt;/p&gt;

&lt;p&gt;While I was walking around, I also thought about the story behind LinkedIn and its founder, Reid Hoffman. His journey is pretty unique:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;He studied philosophy at Oxford and wanted to be a public intellectual, but he realized technology could help more people. His focus became “helping humanity evolve” by building useful tools.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;He created an early social network called SocialNet back in 1997. It didn’t succeed, but it gave him important lessons.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;He joined PayPal early, becoming part of the famous “PayPal Mafia.” When PayPal was sold to eBay, he used that money to start LinkedIn.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;LinkedIn was launched in 2003 from his living room, focusing on careers, trust, and real professional connections, not just socializing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In 2016, Microsoft bought LinkedIn for $26.2 billion.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It was a great experience and a reminder of what can happen when ideas, technology, and purpose come together.&lt;/p&gt;

</description>
      <category>linkedin</category>
    </item>
    <item>
      <title>Web Components</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Fri, 21 Nov 2025 17:15:47 +0000</pubDate>
      <link>https://dev.to/poetryofcode/web-components-1683</link>
      <guid>https://dev.to/poetryofcode/web-components-1683</guid>
      <description>&lt;p&gt;Yesterday I joined a great event at the Cloudflare office on the 88th floor of One World Center, the highest office space in NYC. It felt very fitting for a company with “Cloud” in its name.&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%2Fzz5x9boa5rwfxhoor7wd.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%2Fzz5x9boa5rwfxhoor7wd.JPG" alt=" " width="800" height="1066"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The session was led by Scott Jehl, who spoke about how web components and modern web standards can help us move past the performance limits of the last decade. Scott has been building for the web for more than 20 years and has worked with many well-known brands. He is also known for his open-source work, writing, and talks around the world. Now he works at Squarespace, helping make millions of websites fast and accessible.&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%2F1riaddta2retar7434ov.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%2F1riaddta2retar7434ov.JPG" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It was great to learn from him and hear how these tools can make the web lighter, faster, and easier to maintain. &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%2F7jhtshnxkhbejh7c4by5.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%2F7jhtshnxkhbejh7c4by5.JPG" alt=" " width="800" height="1066"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Overall, it was an inspiring day and a nice reminder of how fast the web keeps moving.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>webperfomance</category>
      <category>webcomponents</category>
      <category>cloudflare</category>
    </item>
    <item>
      <title>SweetFree</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Thu, 13 Nov 2025 16:11:54 +0000</pubDate>
      <link>https://dev.to/poetryofcode/sweetfree-3o6i</link>
      <guid>https://dev.to/poetryofcode/sweetfree-3o6i</guid>
      <description>&lt;p&gt;💻 Just got back from HackPrinceton, my fourth time here, and still can’t get enough of this campus vibe! 🍂&lt;/p&gt;

&lt;p&gt;This time I built SweetFree, an app that helps you track and cut down on sugar in a fun, gamified way.&lt;/p&gt;

&lt;p&gt;🍭 Inspo:&lt;br&gt;
 Last month I gained 5 pounds traveling from one hackathon to another (too many snacks, zero workouts 😅). So I thought, why not build something to help fix that?&lt;/p&gt;

&lt;p&gt;💡 What it does:&lt;br&gt;
 It tracks your daily sugar intake, gives health insights, suggests healthier swaps, and rewards you with streaks and badges. It also features barcode scanning, AI-powered meal analysis, and motivational reminders.&lt;/p&gt;

&lt;p&gt;As Princeton University Professor Alan Turing once put it: “A computer would deserve to be called intelligent if it could deceive a human into believing that it was human.”&lt;/p&gt;

&lt;p&gt;Hackathons remind me how close we’re getting, not just to building smarter systems, but to creating tools that truly understand and help people.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>mobile</category>
      <category>showdev</category>
    </item>
    <item>
      <title>fill.ai - Turn PDFs Into Conversation's</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Fri, 03 Oct 2025 01:56:20 +0000</pubDate>
      <link>https://dev.to/poetryofcode/fillai-turn-pdfs-into-conversations-3ae3</link>
      <guid>https://dev.to/poetryofcode/fillai-turn-pdfs-into-conversations-3ae3</guid>
      <description>&lt;h2&gt;
  
  
  Inspiration
&lt;/h2&gt;

&lt;p&gt;For over 8.7 million visually impaired adults in the U.S., something as routine as filling out a tax form, medical intake sheet, or job application can be frustrating or even impossible without help. Existing form fillers require visual interaction — clicking, dragging, typing — and none are built with true accessibility in mind. We wanted to change that by building a tool that gives these users independence, speed, and confidence.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it does
&lt;/h2&gt;

&lt;p&gt;fill.ai is a voice-powered, AI-driven form filler designed specifically for visually impaired users. Just upload any form — PDF, scan, or image — and the app:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Automatically detects fields using AI + OCR&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Prompts the user to fill out each field using natural language&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Allows users to speak their responses entirely by voice&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Auto-fills the form in real time and generates a completed PDF&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No mouse. No keyboard. No visual interface required.&lt;/p&gt;

&lt;h2&gt;
  
  
  How we built it
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Frontend: React + Vite + SCSS Modules, with accessible markup and keyboard navigation support.&lt;/li&gt;
&lt;li&gt;Voice Input: Web Speech API for speech-to-text conversion.&lt;/li&gt;
&lt;li&gt;OCR &amp;amp; Field Detection: Tesseract.js + custom logic to parse text layout and detect form fields from scanned documents.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Form Filling Logic: JSON-based structure for field mapping, tied to voice prompts and AI suggestions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;PDF Handling: PDF-lib to generate and fill form data into PDF templates.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Challenges we ran into
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;OCR Accuracy: Scanned forms are often low-quality or skewed. We had to implement cleaning logic and fallback detection methods.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Voice Handling: Managing speech input in a structured and user-friendly way was tricky, especially with multiple fields and interruptions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Form Complexity: Real-world forms are inconsistent — we had to account for variable layouts and missing field tags.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Accomplishments that we're proud of
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Created a fully voice-driven form filling experience — no mouse or keyboard needed.&lt;br&gt;
Built accessible UI components that work well with screen readers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Successfully processed and completed real scanned forms using only voice input.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Designed the system to be useful not just for the visually impaired, but for anyone needing hands-free interaction.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Successfuly implemented language recognition for various languages including Hindi, Spanish, Ukrainian and Hurdu&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What we learned
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Accessibility-first design isn't just a feature — it changes how you think about user flows and interface priorities.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Voice UI is incredibly powerful, but needs thoughtful structure and fallback handling.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;AI can enhance accessibility when it’s used with purpose — detecting form fields from imperfect scans was a real win.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What's next for fill.ai
&lt;/h2&gt;

&lt;p&gt;🔄 Improve field detection using ML-based layout analysis&lt;br&gt;
🌐 Expand language support for multilingual users&lt;br&gt;
📱 Build a mobile-first experience for on-the-go form filling&lt;br&gt;
🧑‍🦯 Partner with accessibility orgs for real user testing and feedback&lt;br&gt;
🔒 Add secure document upload and signing capabilities&lt;/p&gt;

&lt;p&gt;&lt;a href="https://devpost.com/software/fill-ai" rel="noopener noreferrer"&gt;Link&lt;/a&gt;&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>a11y</category>
      <category>ai</category>
      <category>tooling</category>
    </item>
    <item>
      <title>Top 5 Most Competitive Hackathons</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Fri, 15 Aug 2025 22:18:10 +0000</pubDate>
      <link>https://dev.to/poetryofcode/top-5-most-competitive-hackathons-37pf</link>
      <guid>https://dev.to/poetryofcode/top-5-most-competitive-hackathons-37pf</guid>
      <description>&lt;p&gt;&lt;strong&gt;TreeHacks&lt;/strong&gt; (Stanford University)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Acceptance Rate: Approximately 7.5% to 8.3%&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Details: TreeHacks is Stanford University's premier hackathon, attracting thousands of applicants from around the world. In 2025, over 12,000 students applied, and about 1,000 were selected. &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;HackMIT&lt;/strong&gt; (Massachusetts Institute of Technology)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Acceptance Rate: Approximately 5–10% for external applicants&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Details: HackMIT is MIT's largest undergraduate hackathon, drawing thousands of applicants globally. While MIT students are guaranteed admission, spots for external applicants are highly limited. &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;HackHarvard&lt;/strong&gt; (Harvard University)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Acceptance Rate: Approximately 70%&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Details: HackHarvard is a 36-hour undergraduate hackathon hosted at Harvard University. It draws a significant number of applicants from top universities worldwide, making it highly competitive.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Hack the North&lt;/strong&gt; (University of Waterloo, Canada)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Details: Canada's largest hackathon, held at the University of Waterloo. It attracts over 1,000 students globally, offering a substantial prize pool and opportunities for innovation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;HackNYU&lt;/strong&gt; (New York University)&lt;/p&gt;

&lt;p&gt;Details: A 48-hour hackathon hosted by NYU students around the world. Participants build projects, learn from talks and mentors, and win prizes.&lt;/p&gt;

</description>
      <category>hackathon</category>
    </item>
    <item>
      <title>2025 Code for Good Hackathon – Software Engineer Program: Where Tech Meets Impact</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Fri, 08 Aug 2025 19:21:38 +0000</pubDate>
      <link>https://dev.to/poetryofcode/2025-code-for-good-hackathon-software-engineer-program-where-tech-meets-impact-26d6</link>
      <guid>https://dev.to/poetryofcode/2025-code-for-good-hackathon-software-engineer-program-where-tech-meets-impact-26d6</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is Code for Good?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://jpmc.fa.oraclecloud.com/hcmUI/CandidateExperience/en/sites/CX_1001/job/210648143" rel="noopener noreferrer"&gt;JPMorgan Chase’s Code for Good&lt;/a&gt; is a social-impact hackathon hosted by its Tech for Social Good team. Students team up to build technology solutions for real nonprofits under the guidance of experienced technologists worldwide—Argentina, Singapore, the U.S., and beyond JPMorgan Careers&lt;/p&gt;

&lt;p&gt;The 2025 edition, framed as the Software Engineer Program – Summer Internship, blends a real-world hackathon experience with the opportunity to enter JPMorgan’s tech career track.&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%2F575s5zpcfga1q74wjcb3.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%2F575s5zpcfga1q74wjcb3.jpg" alt=" " width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Participate? Key Benefits&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Real Social Impact: Build functional solutions for nonprofits within a tight timeframe.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Mentorship from Tech Experts: Collaborate with talented JPMorgan engineers and possibly VPs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Fast-track Into Internships: Standout teams may qualify for JPMorgan’s 2026 Software Engineer Summer Internship&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Pre-Hackathon HackerRank Assessment (Summer 2025)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Before the hackathon, participants typically must pass a HackerRank-style coding test. For summer 2025, the test includes two LeetCode-backed problems:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Find Pivot Index (&lt;a href="https://leetcode.com/problems/find-pivot-index/description/" rel="noopener noreferrer"&gt;LeetCode 724&lt;/a&gt;)&lt;/strong&gt;&lt;br&gt;
— Find the index where the sum of elements to the left equals the sum to the right.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Minimum Operations to Make First Half an Anagram of Second Half similar but for numbers (&lt;a href="https://leetcode.com/problems/minimum-number-of-steps-to-make-two-strings-anagram/description/" rel="noopener noreferrer"&gt;LeetCode 1347&lt;/a&gt;)&lt;/strong&gt;&lt;br&gt;
— Determine how many character replacements are needed to make one string an anagram of another.&lt;/p&gt;

&lt;p&gt;Focusing your prep on these challenges—especially concepts like prefix sums and character frequency—is a smart move.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What to Expect at the Hackathon&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Team-Based Build: Typically a 12–24-hour sprint to deliver a working MVP.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Client-Focused Projects: Solve real-world problems for nonprofits.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Evaluation Beyond Code: Judges look for team coordination, empathy, and the functional impact of your solution&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Tips to Excel&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Prioritize MVP Functionality: A simple, working product beats an incomplete one.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use Smart Tech: Even minimal AI or smart data handling can stand out.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Showcase Teamwork: Communication and problem-solving are just as important as code.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Prepare the Core Algorithms: Be ready for prefix sums and frequency-based logic.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;&lt;code&gt;Happy Coding...&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>codeforgood</category>
      <category>hackathon</category>
      <category>hackerrank</category>
      <category>jpmorganchasehackathon</category>
    </item>
    <item>
      <title>My Second Sprint at Piksta: Simplifying Forms and Strengthening Security</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Mon, 07 Jul 2025 00:51:24 +0000</pubDate>
      <link>https://dev.to/poetryofcode/my-second-sprint-at-piksta-simplifying-forms-and-strengthening-security-1gf6</link>
      <guid>https://dev.to/poetryofcode/my-second-sprint-at-piksta-simplifying-forms-and-strengthening-security-1gf6</guid>
      <description>&lt;p&gt;During my second sprint at Piksta, I focused on two important improvements that made our app both easier to use and more secure.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Simplifying Form Logic with React Hook Form + Zod&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuelavb098intdfdehxo1.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%2Fuelavb098intdfdehxo1.png" alt=" " width="800" height="406"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Forms are a big part of most web apps, and getting them right can be tricky. At Piksta, I refactored our form logic by integrating React Hook Form with Zod, a TypeScript-first schema validation library.&lt;/p&gt;

&lt;p&gt;This change made our forms:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cleaner – Less repetitive code&lt;/li&gt;
&lt;li&gt;More reliable – Type-safe validation using Zod schemas&lt;/li&gt;
&lt;li&gt;Easier to maintain – All form rules live in one place&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here’s a quick example of the new pattern:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(schema),
});

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Securing Auth Flow with Google reCAPTCHA&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzikokuu55pzywgdsqyhu.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%2Fzikokuu55pzywgdsqyhu.png" alt=" " width="800" height="258"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Another big win this sprint was improving our authentication flow by adding Google reCAPTCHA. This helps prevent bots from signing up or abusing the platform.&lt;/p&gt;

&lt;p&gt;Now, before any login or signup request goes through, users must pass a reCAPTCHA check. This adds a layer of protection while keeping the user experience simple and quick.&lt;/p&gt;

&lt;p&gt;This sprint was all about polish and protection. I’m proud of the improvements made and excited to keep pushing for cleaner code and better user safety at Piksta.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>I Went to the MLH x Google Gemini AI Roadshow</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Sat, 28 Jun 2025 01:20:49 +0000</pubDate>
      <link>https://dev.to/poetryofcode/i-went-to-the-mlh-x-google-gemini-ai-roadshow-5fk4</link>
      <guid>https://dev.to/poetryofcode/i-went-to-the-mlh-x-google-gemini-ai-roadshow-5fk4</guid>
      <description>&lt;p&gt;Manhattan. June 27. Sunset over the skyline. And inside a buzzing venue packed with developers, dreamers, and a whole lot of cutting-edge AI, the MLH x Google Gemini AI Roadshow kicked off — and I was lucky enough to be there.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This Wasn’t Your Average Tech Meetup&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuiw5uhpwcmsk78oi543n.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%2Fuiw5uhpwcmsk78oi543n.JPG" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The vibe was electric from the jump. Picture this: an open bar, a soundtrack of laid-back beats, and rows of demo stations glowing with possibility. Add in some incredible local food (yes, I’m still thinking about the bao buns), and the setting was perfect for something bigger than just another tech event.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI, Unleashed&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb2rvym8g6poogrn4mcce.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%2Fb2rvym8g6poogrn4mcce.JPG" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The real magic was in the tech. Google Gemini brought their latest models, and the crowd brought the curiosity. We got a look at live demos from builders already doing wild things — think AI-powered code copilots, real-time generative visuals, and smart assistants that actually feel smart.&lt;/p&gt;

&lt;p&gt;Google’s own teams from DeepMind and Labs pulled back the curtain on what’s next. These weren’t just keynote slides — they gave us insight into how Gemini’s models are evolving, and how anyone (yes, even you) can start building with them.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Code, Connect, Repeat&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzg7b7o64hhhsqc22ab35.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%2Fzg7b7o64hhhsqc22ab35.JPG" alt=" " width="800" height="1066"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What made the night different was how hands-on it felt. This wasn’t about sitting through lectures — it was about meeting other makers, talking shop, and realizing just how much potential AI is unlocking right now.&lt;/p&gt;

&lt;p&gt;I bumped into Mohamad Slim, my teammate from an IBM hackathon. Total coincidence — and totally awesome to catch up.&lt;br&gt;
It was also great meeting Saksham Kapoor and Shah. Shah and I hit it off right away — we’ve got a surprising amount in common. We're both from a mechanical engineering background and spent time studying in Germany. Always cool to find those kinds of unexpected overlaps in a crowd like this.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>gemini</category>
      <category>google</category>
      <category>deepmind</category>
    </item>
    <item>
      <title>Vibe Hacks in Under 4 Hours</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Wed, 18 Jun 2025 22:53:37 +0000</pubDate>
      <link>https://dev.to/poetryofcode/vibe-hacks-in-under-4-hours-4dl1</link>
      <guid>https://dev.to/poetryofcode/vibe-hacks-in-under-4-hours-4dl1</guid>
      <description>&lt;p&gt;Yesterday, I joined Vibe Hacks, a fast-paced hackathon focused on creating impactful products using AWS Bedrock. Unlike most hackathons, this one was incredibly short, under 4 hours, making it the shortest I’ve ever participated in. With limited time, I dove in to build something meaningful.&lt;/p&gt;

&lt;p&gt;🧠 Inspiration&lt;br&gt;
The idea came from thinking about artists who have great ideas but struggle to express them, especially those with language barriers or disabilities. I wanted to create a tool that makes creativity easier and more inclusive, even for those who don’t use traditional ways of communicating.&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%2F8bmglyvjc9nouuihfs9v.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%2F8bmglyvjc9nouuihfs9v.png" alt=" " width="800" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🚀 What I Built 🎨 InspoCanvas&lt;/p&gt;

&lt;p&gt;InspoCanvas is a multimodal creative tool powered by AWS Bedrock. It lets users either type or speak prompts like: “a dreamscape in gold with birds flying through mist”. The app understands tone, mood, and visual detail, and turns that into a beautiful AI-generated moodboard or visual concept.&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%2F6xuh2os9i3ju0vzux3hs.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%2F6xuh2os9i3ju0vzux3hs.png" alt=" " width="800" height="361"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Key Features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Text &amp;amp; Voice Input (including multilingual support)&lt;/li&gt;
&lt;li&gt;AI-generated visuals that reflect the feeling behind the prompt&lt;/li&gt;
&lt;li&gt;A Learning Corner to teach basics like color theory and composition&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🧩 Built With:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AWS Bedrock&lt;/li&gt;
&lt;li&gt;Claude&lt;/li&gt;
&lt;li&gt;Next.js&lt;/li&gt;
&lt;li&gt;Tailwind CSS&lt;/li&gt;
&lt;li&gt;TypeScript&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🎯 Why It Matters&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%2Fu8lbd6a604q86u52c3rd.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%2Fu8lbd6a604q86u52c3rd.png" alt=" " width="800" height="333"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;InspoCanvas isn’t just a visual tool — it’s meant to give anyone the power to express their imagination. Whether someone has limited language skills or prefers speaking over typing, they can still create something beautiful.&lt;/p&gt;

&lt;p&gt;🙏 Final Thanks&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%2Feumqwxgpzgiip5hmjf1e.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%2Feumqwxgpzgiip5hmjf1e.png" alt=" " width="800" height="333"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Big thanks to Rilla for organizing Vibe Hacks, your office is amazing, and the vibe was full of creative energy. Even though this hackathon was quick, it pushed me to move fast, think clearly, and build something with impact.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/craftingweb/InspoCanvas" rel="noopener noreferrer"&gt;GitHub &lt;/a&gt;&lt;br&gt;
&lt;a href="https://inspocanvas.vercel.app/" rel="noopener noreferrer"&gt;App&lt;/a&gt;&lt;/p&gt;

</description>
      <category>amazonbedrock</category>
      <category>claude</category>
      <category>ai</category>
      <category>vibecoding</category>
    </item>
    <item>
      <title>🚀 Sprint 1: Building Piksta — What I Learned as a Developer</title>
      <dc:creator>Poetry Of Code</dc:creator>
      <pubDate>Thu, 29 May 2025 14:08:48 +0000</pubDate>
      <link>https://dev.to/poetryofcode/sprint-1-building-piksta-what-i-learned-as-a-developer-1e2f</link>
      <guid>https://dev.to/poetryofcode/sprint-1-building-piksta-what-i-learned-as-a-developer-1e2f</guid>
      <description>&lt;p&gt;I just wrapped up my first sprint as a frontend developer working on Piksta, an exciting and modern photo-sharing app that combines sleek design with powerful features.&lt;/p&gt;

&lt;h2&gt;
  
  
  🛠️ The Team &amp;amp; Tools
&lt;/h2&gt;

&lt;p&gt;Our team includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;👨‍💻 &lt;strong&gt;5 Frontend Developers&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;🧑‍💻 &lt;strong&gt;2 Backend Developers&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;👩‍💼 &lt;strong&gt;1 Project Manager&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We use &lt;strong&gt;Jira&lt;/strong&gt; to manage our sprints and tasks. This helps us stay organized, track progress, and communicate better as a team.&lt;/p&gt;

&lt;p&gt;🔁 CI/CD (&lt;strong&gt;Docker, Jenkins&lt;/strong&gt;)&lt;/p&gt;

&lt;p&gt;We use Docker to containerize the application, which helps keep the environment consistent across development and production. Jenkins automates our CI/CD pipeline, so every time we push code, the app gets tested, built, and deployed automatically.&lt;/p&gt;

&lt;p&gt;☁️ Deployment (&lt;strong&gt;Kubernetes&lt;/strong&gt;)&lt;/p&gt;

&lt;p&gt;Our app is deployed with Kubernetes. It helps us manage scaling, updates, and reliability in a production environment.&lt;/p&gt;

&lt;h2&gt;
  
  
  🎯 The Goal
&lt;/h2&gt;

&lt;p&gt;Our goal in Sprint 1 was to set up reusable components. My task was to create a custom language selector dropdown that looks clean, is easy to use, and works well on all screen sizes. It also had to support flags next to each language. Additionally, create a header and integrate a select box into the header.&lt;/p&gt;

&lt;h2&gt;
  
  
  🧠 What I Learned
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Radix UI (React Primitives)&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;For the first time, I worked with &lt;strong&gt;@radix-ui&lt;/strong&gt;, a low-level UI component library. It gives you accessibility and keyboard support out of the box, and you control how it looks.&lt;/p&gt;

&lt;p&gt;Things I learned:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Using &lt;code&gt;&amp;lt;RadixSelect.Root&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;RadixSelect.Trigger&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;RadixSelect.Content&amp;gt;&lt;/code&gt;, and &lt;code&gt;&amp;lt;RadixSelect.Item&amp;gt;&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Handling &lt;code&gt;onValueChange&lt;/code&gt;, &lt;code&gt;onOpenChange&lt;/code&gt;, and state like &lt;code&gt;open&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;How &lt;code&gt;&amp;lt;RadixSelect.Portal&amp;gt;&lt;/code&gt; helps render dropdowns outside the normal DOM tree (great for z-index issues!).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;➡️ &lt;strong&gt;Why I liked it:&lt;/strong&gt; It gives you full control over styles but handles accessibility for you. 💯&lt;/p&gt;

&lt;h3&gt;
  
  
  2. &lt;strong&gt;SCSS Modules&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;I used &lt;code&gt;Select.module.scss&lt;/code&gt; to style the dropdown. SCSS modules helped me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Keep styles scoped to the component.&lt;/li&gt;
&lt;li&gt;Use nesting and variables (&lt;code&gt;--light-100&lt;/code&gt;, &lt;code&gt;--dark-300&lt;/code&gt;) for a clean and reusable design system.&lt;/li&gt;
&lt;li&gt;Easily create variants like &lt;code&gt;.small&lt;/code&gt;, &lt;code&gt;.disabled&lt;/code&gt;, or &lt;code&gt;[data-state="open"]&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  3. Storybook
&lt;/h2&gt;

&lt;p&gt;We added stories to Storybook to test our component in isolation. I created versions with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Flags&lt;/li&gt;
&lt;li&gt;Initial value&lt;/li&gt;
&lt;li&gt;Disabled state&lt;/li&gt;
&lt;li&gt;Small size&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://github.com/banzaiteam/Banzai" rel="noopener noreferrer"&gt;Piksta&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thanks for reading! 🙌&lt;br&gt;
&lt;em&gt;Follow me for more updates on Piksta and my frontend dev journey!&lt;/em&gt;&lt;/p&gt;

</description>
      <category>radixui</category>
      <category>storybook</category>
      <category>docker</category>
      <category>kubernetes</category>
    </item>
  </channel>
</rss>
