<?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: Sujan Koirala</title>
    <description>The latest articles on DEV Community by Sujan Koirala (@sujankoirala021).</description>
    <link>https://dev.to/sujankoirala021</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%2F2145997%2F0a567046-da13-4be4-b8ef-d043c4fc34cc.jpeg</url>
      <title>DEV Community: Sujan Koirala</title>
      <link>https://dev.to/sujankoirala021</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sujankoirala021"/>
    <language>en</language>
    <item>
      <title>PawRover:A Community-Driven Solution for Pet Care</title>
      <dc:creator>Sujan Koirala</dc:creator>
      <pubDate>Mon, 02 Mar 2026 05:23:46 +0000</pubDate>
      <link>https://dev.to/sujankoirala021/pawrovera-community-driven-solution-for-pet-care-3le1</link>
      <guid>https://dev.to/sujankoirala021/pawrovera-community-driven-solution-for-pet-care-3le1</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/weekend-2026-02-28"&gt;DEV Weekend Challenge: Community&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;Pet owners face a universal challenge: finding trustworthy, affordable care for their furry family members when they travel. Traditional boarding facilities can be expensive and stressful for pets, while finding reliable sitters through word-of-mouth is hit-or-miss. I built Paw Rover for the global community of pet lovers—people who understand that pets aren't just animals, they're family.&lt;/p&gt;

&lt;p&gt;This platform serves two interconnected groups: pet owners who need peace of mind while traveling, and pet enthusiasts who want to experience the joy of caring for animals while exploring new places. It's a community built on trust, shared love for animals, and the belief that pet care should be accessible, transparent, and rewarding for everyone involved.&lt;/p&gt;

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

&lt;p&gt;Paw Rover is a platform that connects pet owners with trusted sitters through a home exchange model. Instead of expensive boarding fees, pet owners can find caring individuals who'll stay in their homes and look after their pets. In return, sitters get free accommodation in unique locations while enjoying the company of adorable animals.&lt;/p&gt;

&lt;p&gt;Key features include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Find a Pet Sitter&lt;/strong&gt;: Search for reliable sitters in your area or travel destination&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Explore Homes to Sit&lt;/strong&gt;: Browse pet-friendly homes available for sitting opportunities&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interactive Onboarding&lt;/strong&gt;: Guided tour for new users using Shepherd.js&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The platform emphasizes transparency and trust through its rating system, ensuring both pet owners and sitters can connect with confidence.&lt;/p&gt;

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

&lt;h3&gt;
  
  
  🎥 Live Demo
&lt;/h3&gt;

&lt;p&gt;

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


&lt;/p&gt;

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

&lt;p&gt;Home Page with Interactive Guide by Rabbit:&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%2F2d5hay4uvr7t838upy73.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%2F2d5hay4uvr7t838upy73.png" alt="Home Page"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Choose your pets:&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%2Fqsgjzztxxyut375x6a8d.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%2Fqsgjzztxxyut375x6a8d.png" alt="Choose pets"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Explore perfect pet sitters:&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%2Fdcjwvgtrpfh3lppneyxb.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%2Fdcjwvgtrpfh3lppneyxb.png" alt="Find sitters"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Explore comfy homes to sit&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%2Fnosyxrjavswtps53r15j.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%2Fnosyxrjavswtps53r15j.png" alt="Find places"&gt;&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://github.com/Sujan-Koirala021/paws-rover.git" rel="noopener noreferrer"&gt;Github Link for PawRover&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;Paw Rover is built with modern web technologies focused on performance and user experience:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;React&lt;/strong&gt;: Powers the interactive UI and component-based architecture&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Vite&lt;/strong&gt;: Provides lightning-fast development and optimized production builds&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tailwind CSS&lt;/strong&gt;: Enables responsive, beautiful styling with utility-first approach&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Shepherd.js&lt;/strong&gt;: Creates an intuitive guided tour for first-time users&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The tech stack was chosen to deliver a smooth, responsive experience that works seamlessly across devices—because pet owners and sitters need to connect on the go.&lt;/p&gt;

&lt;h2&gt;
  
  
  Impact
&lt;/h2&gt;

&lt;p&gt;Paw Rover transforms pet care from a transactional service into a community-driven experience. By eliminating the high costs of traditional boarding and creating meaningful connections between pet lovers, the platform makes travel more accessible for pet owners while giving animal enthusiasts opportunities to explore new places.&lt;/p&gt;

&lt;p&gt;Every successful match strengthens the network, creating a ripple effect of positive experiences that benefit pets, owners, and sitters alike.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Built with ❤️ for pet lovers everywhere&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>weekendchallenge</category>
      <category>showdev</category>
    </item>
    <item>
      <title>LessonSync - Interactive Video Learning Platform</title>
      <dc:creator>Sujan Koirala</dc:creator>
      <pubDate>Mon, 05 Jan 2026 03:12:01 +0000</pubDate>
      <link>https://dev.to/sujankoirala021/lessonsync-interactive-video-learning-platform-2g6c</link>
      <guid>https://dev.to/sujankoirala021/lessonsync-interactive-video-learning-platform-2g6c</guid>
      <description>&lt;h2&gt;
  
  
  🎥 LessonSync - Interactive Video Learning Platform
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/mux-2025-12-03"&gt;DEV's Worldwide Show and Tell Challenge Presented by Mux&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;LessonSync is a revolutionary video-based learning platform that transforms passive video watching into interactive, collaborative experiences. Unlike traditional video platforms where viewers can only watch and move on, LessonSync allows learners to ask timestamped questions, record video responses, and navigate content through an intelligent interactive timeline.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;🎯 &lt;strong&gt;Timestamped Q&amp;amp;A&lt;/strong&gt; - Click anywhere on the video timeline to ask questions at specific moments&lt;/li&gt;
&lt;li&gt;📹 &lt;strong&gt;Video Responses&lt;/strong&gt; - Record video answers directly in the browser using built-in camera integration&lt;/li&gt;
&lt;li&gt;🗺️ &lt;strong&gt;Interactive Timeline&lt;/strong&gt; - Visual timeline with question markers for easy navigation and content discovery&lt;/li&gt;
&lt;li&gt;👥 &lt;strong&gt;User Engagement&lt;/strong&gt; - Upvoting system, user avatars, and real-time collaboration&lt;/li&gt;
&lt;li&gt;📊 &lt;strong&gt;Analytics Dashboard&lt;/strong&gt; - Track video engagement, views, and learning patterns&lt;/li&gt;
&lt;li&gt;🔍 &lt;strong&gt;Public Discovery&lt;/strong&gt; - Explore educational content from other creators&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  My Pitch Video
&lt;/h2&gt;

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

&lt;p&gt;

&lt;iframe src="https://player.mux.com/NS3Gy2p61o25R00G5zS01ORjY16umk028qNR8008aOS6FdE" width="710" height="399"&gt;
&lt;/iframe&gt;



&lt;/p&gt;

&lt;p&gt;🔗 &lt;strong&gt;GitHub Repository:&lt;/strong&gt; &lt;a href="https://github.com/Sujan-Koirala021/lessonsync" rel="noopener noreferrer"&gt;https://github.com/Sujan-Koirala021/lessonsync&lt;/a&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  The Story Behind It
&lt;/h2&gt;

&lt;p&gt;The idea for LessonSync came from a frustrating personal experience during online learning. I was watching educational videos and constantly had questions about specific moments, but there was no way to ask them contextually. I'd pause, write notes, lose track of timestamps, and eventually give up on getting answers.&lt;/p&gt;

&lt;p&gt;I realized that video learning was fundamentally broken - it was a one-way street. Students watch passively, questions pile up unanswered, and engagement dies. What if we could make every moment in a video a potential conversation starter?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The "Aha!" Moment:&lt;/strong&gt; What if clicking on a video timeline could do more than just seek? What if it could start a conversation?&lt;/p&gt;

&lt;p&gt;This led to LessonSync's core innovation: &lt;strong&gt;timestamped interactions&lt;/strong&gt;. Every question is tied to a specific moment, creating a rich, contextual learning experience where knowledge builds upon itself.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why It Matters:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;📚 &lt;strong&gt;For Students:&lt;/strong&gt; Get answers to specific questions without losing context&lt;/li&gt;
&lt;li&gt;👨‍🏫 &lt;strong&gt;For Educators:&lt;/strong&gt; Understand exactly where students struggle and engage directly&lt;/li&gt;
&lt;li&gt;🌍 &lt;strong&gt;For Communities:&lt;/strong&gt; Transform isolated learning into collaborative knowledge building&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Technical Highlights
&lt;/h2&gt;

&lt;p&gt;LessonSync is built as a modern full-stack application with a focus on real-time interactivity and seamless video experiences.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Frontend:&lt;/strong&gt; React 19 + Vite for lightning-fast development and modern UI&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Backend:&lt;/strong&gt; Node.js + Express with JWT authentication&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Database:&lt;/strong&gt; SQLite for rapid development with easy deployment&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Video Infrastructure:&lt;/strong&gt; Mux for professional video processing and streaming&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Key Technical Innovations
&lt;/h3&gt;

&lt;h4&gt;
  
  
  1. &lt;strong&gt;Interactive Timeline System&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Custom timeline component with clickable question markers&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;getTimelineMarkers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;questions&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;question&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;question&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;question&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;timestamp&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="nx"&gt;video&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;
  &lt;span class="p"&gt;}));&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  2. &lt;strong&gt;Real-time Video Recording&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Built-in browser-based video recording using MediaRecorder API&lt;/li&gt;
&lt;li&gt;Automatic codec detection for cross-browser compatibility&lt;/li&gt;
&lt;li&gt;Real-time camera preview with stream validation&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  3. &lt;strong&gt;Smart User Experience&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Contextual Timestamps:&lt;/strong&gt; "5m ago", "just now" instead of raw dates&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consistent User Avatars:&lt;/strong&gt; Color-coded avatars based on username hashing&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Progressive Enhancement:&lt;/strong&gt; Works without JavaScript for basic video playback&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  4. &lt;strong&gt;Scalable Data Architecture&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Efficient question-to-video relationship mapping&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;videoQuestions&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;questionsStore&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;values&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;q&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;q&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;videoId&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;videoId&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sort&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;timestamp&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;timestamp&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Use of Mux (Additional Prize Category Participants Only)
&lt;/h3&gt;

&lt;p&gt;LessonSync leverages Mux extensively beyond basic video hosting, utilizing multiple advanced features:&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;1. Direct Upload Integration&lt;/strong&gt;
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Seamless direct-to-Mux uploads without server storage&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;res&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;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/upload&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;trim&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
  &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;description&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;trim&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
  &lt;span class="na"&gt;is_public&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;videoId&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;muxUploadId&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;strong&gt;2. Webhook-Driven Processing&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Real-time status updates&lt;/strong&gt; via Mux webhooks for upload progress&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Automatic asset management&lt;/strong&gt; when videos finish processing&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Error handling&lt;/strong&gt; for failed uploads with user feedback
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Webhook handlers for different Mux events&lt;/span&gt;
&lt;span class="k"&gt;switch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;video.upload.asset_created&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;handleUploadAssetCreated&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;video.asset.ready&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;handleAssetReady&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;video.asset.errored&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;handleAssetError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;strong&gt;3. Advanced Playback Features&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Mux Player React integration&lt;/strong&gt; for professional video experience&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Programmatic seeking&lt;/strong&gt; for timeline-based navigation&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Time-based event handling&lt;/strong&gt; for question synchronization&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;4. Video Recording Pipeline&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Dual video streams:&lt;/strong&gt; Main educational content + user-generated Q&amp;amp;A videos&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Automatic transcoding&lt;/strong&gt; for optimal playback across devices&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Thumbnail generation&lt;/strong&gt; for video previews&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;5. Analytics Integration&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;View tracking&lt;/strong&gt; with completion percentages&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Engagement metrics&lt;/strong&gt; tied to specific video moments&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Performance monitoring&lt;/strong&gt; for video load times&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;My Experience Building with Mux&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;What I Loved:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🚀 &lt;strong&gt;Developer Experience:&lt;/strong&gt; The API is intuitive and well-documented&lt;/li&gt;
&lt;li&gt;⚡ &lt;strong&gt;Speed:&lt;/strong&gt; Videos process incredibly fast, keeping users engaged&lt;/li&gt;
&lt;li&gt;🔧 &lt;strong&gt;Flexibility:&lt;/strong&gt; Direct uploads eliminate server storage concerns&lt;/li&gt;
&lt;li&gt;📊 &lt;strong&gt;Reliability:&lt;/strong&gt; Webhooks provide real-time updates without polling&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Challenges Overcome:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Webhook Timing:&lt;/strong&gt; Learned to handle async processing gracefully&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Error States:&lt;/strong&gt; Built robust fallbacks for upload failures&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cross-browser Recording:&lt;/strong&gt; Mux's format flexibility solved codec issues&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Impact on User Experience:&lt;/strong&gt;&lt;br&gt;
Mux enabled LessonSync to feel like a professional platform from day one. Users upload videos and see them processing in real-time, creating a seamless experience that would have taken months to build from scratch.&lt;/p&gt;




&lt;h2&gt;
  
  
  What's Next?
&lt;/h2&gt;

&lt;p&gt;LessonSync represents just the beginning of interactive video learning. Future plans include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🤖 &lt;strong&gt;AI-powered question suggestions&lt;/strong&gt; based on video content&lt;/li&gt;
&lt;li&gt;📱 &lt;strong&gt;Mobile app&lt;/strong&gt; for learning on the go&lt;/li&gt;
&lt;li&gt;🎓 &lt;strong&gt;Classroom integration&lt;/strong&gt; for educators&lt;/li&gt;
&lt;li&gt;🌐 &lt;strong&gt;Multi-language support&lt;/strong&gt; for global accessibility&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;strong&gt;Built with ❤️ for the future of interactive learning&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>muxchallenge</category>
      <category>showandtell</category>
      <category>video</category>
    </item>
    <item>
      <title>Building Bunny Brew Café: A Delightful Interactive Pet Experience with Hot Design &amp; AI</title>
      <dc:creator>Sujan Koirala</dc:creator>
      <pubDate>Sun, 07 Dec 2025 16:41:19 +0000</pubDate>
      <link>https://dev.to/sujankoirala021/building-bunny-brew-cafe-a-delightful-interactive-pet-experience-with-hot-design-ai-2e8b</link>
      <guid>https://dev.to/sujankoirala021/building-bunny-brew-cafe-a-delightful-interactive-pet-experience-with-hot-design-ai-2e8b</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/devteam/join-the-ai-challenge-for-cross-platform-apps-3000-in-prizes-25c3"&gt;AI Challenge for Cross-Platform Apps&lt;/a&gt; - Hot Design Showcase&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;I created &lt;strong&gt;Bunny Brew Café&lt;/strong&gt; - an interactive virtual pet experience where a charming barista bunny serves coffee in a cozy café setting. The app combines the joy of virtual pet interactions with a delightful coffee shop theme, featuring:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🐰 An animated barista bunny with 10 different GIF animations&lt;/li&gt;
&lt;li&gt;☕ Interactive coffee menu cards with smooth hover effects&lt;/li&gt;
&lt;li&gt;🎨 Real-time particle effects (floating coffee beans, carrot rain)&lt;/li&gt;
&lt;li&gt;💬 Dynamic speech bubbles with personality-filled responses&lt;/li&gt;
&lt;li&gt;📋 A chalkboard menu with daily specials and rotating quotes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What started as a simple pet playground evolved into a full café experience, and Hot Design Agent was instrumental in refining the UI interactions and animations in real-time.&lt;/p&gt;

&lt;h2&gt;
  
  
  Original Design Reference
&lt;/h2&gt;

&lt;p&gt;The concept was inspired by:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Virtual pet games&lt;/strong&gt; like Tamagotchi and Neko Atsume&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cozy café aesthetics&lt;/strong&gt; with warm brown tones (#6F4E37, #D4A574)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interactive UI patterns&lt;/strong&gt; from modern mobile apps&lt;/li&gt;
&lt;/ul&gt;

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

&lt;h3&gt;
  
  
  🎥 Live Demo
&lt;/h3&gt;

&lt;p&gt;👉 Watch here: &lt;a href="https://youtu.be/H_O0kQyUD-c" rel="noopener noreferrer"&gt;YouTube – Live Demo&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;Main Café View:&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%2F212zgnsiv9rnnm3pfe4j.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%2F212zgnsiv9rnnm3pfe4j.png" alt="Main menu" width="800" height="531"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Interactive Bubble Dialogue:&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%2F8eqhejroeofhopd4i5io.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%2F8eqhejroeofhopd4i5io.png" alt="Interactive Hover Effects" width="800" height="475"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Carrot Rain Celebration:&lt;/strong&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%2Fp6y4mmpygta11ykhdctg.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%2Fp6y4mmpygta11ykhdctg.png" alt="Carrot Rain Celebration" width="800" height="535"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  🔗 Repository
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/Sujan-Koirala021/bunny-brew-cafe" rel="noopener noreferrer"&gt;GitHub Repository&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Hot Design Agent in Action
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F594147t5hs79trejmibd.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%2F594147t5hs79trejmibd.png" alt="Hot Design Agent in Action" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Real-Time UI Refinement
&lt;/h3&gt;

&lt;p&gt;The Hot Design Agent was a game-changer for bringing the café to life. Here's how it helped me tackle complex animation challenges:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Challenge 1: Dynamic GIF Switching on Interaction&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Problem&lt;/strong&gt;: Wanted the bunny to change expressions when users click different coffee cards, but managing 10 different GIF states was complex&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI Solution&lt;/strong&gt;: Described the desired behavior - "bunny should react differently to each coffee type"&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Agent's Help&lt;/strong&gt;: Suggested organizing GIFs by mood (happy, excited, eating) and creating a mapping system&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Implementation&lt;/strong&gt;: Agent helped me set up event handlers for each card that trigger specific animations&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Result&lt;/strong&gt;: Bunny now shows unique reactions - excited for espresso, content for latte, delighted for mocha!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Challenge 2: Speech Bubble Appearing on Card Hover&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Initial Attempt&lt;/strong&gt;: Bubble appeared instantly, felt jarring&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI Guidance&lt;/strong&gt;: Agent recommended a pop-in animation with BackEase for a bouncy, playful feel&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Real-Time Tuning&lt;/strong&gt;: While app was running, adjusted timing from 200ms → 150ms for snappier response&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Polish&lt;/strong&gt;: Added scale transform (0.5 → 1.0) with amplitude of 0.5 for that perfect "pop"&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Impact&lt;/strong&gt;: Bubble now feels alive and responsive, enhancing the café's personality&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Challenge 3: Carrot Rain Celebration Effect&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Vision&lt;/strong&gt;: When users buy coffee, celebrate with falling carrots (bunny's favorite treat!)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Complexity&lt;/strong&gt;: 30 animated carrots with rotation, drift, and fade effects&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI Assistance&lt;/strong&gt;: Agent helped optimize the staggered creation (100ms delays) and animation curves&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Fine-Tuning&lt;/strong&gt;: Adjusted fall duration (1500-2500ms random), rotation speed (2-5 full spins)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Result&lt;/strong&gt;: Delightful reward animation that makes purchases feel special&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Challenge 4: Performance Optimization - Too Many Animations&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Problem&lt;/strong&gt;: App became laggy with floating beans + carrot rain + bubble animations all running simultaneously&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Symptoms&lt;/strong&gt;: Frame drops, stuttering on lower-end devices&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI Diagnosis&lt;/strong&gt;: Agent identified the particle cleanup wasn't happening efficiently&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Solution&lt;/strong&gt;: Implemented proper &lt;code&gt;storyboard.Completed&lt;/code&gt; handlers to remove particles from Canvas&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Optimization&lt;/strong&gt;: Reduced floating beans from 15 → 10, adjusted opacity to 0.25 for lighter rendering&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Result&lt;/strong&gt;: Smooth 60fps animations even with multiple effects active&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Design Process
&lt;/h2&gt;
&lt;h3&gt;
  
  
  1. Initial Setup with Hot Reload
&lt;/h3&gt;

&lt;p&gt;Started with basic XAML structure:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight xml"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;Border&lt;/span&gt; &lt;span class="na"&gt;Background=&lt;/span&gt;&lt;span class="s"&gt;"#6F4E37"&lt;/span&gt; &lt;span class="na"&gt;CornerRadius=&lt;/span&gt;&lt;span class="s"&gt;"12"&lt;/span&gt; &lt;span class="na"&gt;Width=&lt;/span&gt;&lt;span class="s"&gt;"140"&lt;/span&gt; &lt;span class="na"&gt;Height=&lt;/span&gt;&lt;span class="s"&gt;"180"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;StackPanel&lt;/span&gt; &lt;span class="na"&gt;Padding=&lt;/span&gt;&lt;span class="s"&gt;"16"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="c"&gt;&amp;lt;!-- Coffee card content --&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/StackPanel&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/Border&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Hot Reload kept my Visual Studio and running app perfectly synchronized as I:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Adjusted color schemes in real-time&lt;/li&gt;
&lt;li&gt;Modified spacing and margins&lt;/li&gt;
&lt;li&gt;Tested different font sizes&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Animation Development
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;GIF State Management:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;OnEspressoHover&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;object&lt;/span&gt; &lt;span class="n"&gt;sender&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;PointerRoutedEventArgs&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;ShowCoffeeDialogue&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Espresso! ☕ Bold and intense, just like you!"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nf"&gt;AnimateCardHover&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;sender&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;Border&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;OnImageTapped&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;object&lt;/span&gt; &lt;span class="n"&gt;sender&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;TappedRoutedEventArgs&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;_currentGifIndex&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;_currentGifIndex&lt;/span&gt; &lt;span class="p"&gt;%&lt;/span&gt; &lt;span class="n"&gt;TotalGifs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;+&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;newSource&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;$"ms-appx:///Assets/Pet/rabbit&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;_currentGifIndex&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s"&gt;.gif"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;PetImage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Source&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nf"&gt;BitmapImage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nf"&gt;Uri&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;newSource&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Speech Bubble Pop Animation:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;ShowCoffeeDialogue&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;string&lt;/span&gt; &lt;span class="n"&gt;message&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;SpeechText&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Text&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;message&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;scaleXIn&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="n"&gt;DoubleAnimation&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;From&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="m"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;To&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="m"&gt;1.0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;Duration&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;TimeSpan&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;FromMilliseconds&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;150&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="n"&gt;EasingFunction&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="n"&gt;BackEase&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="n"&gt;EasingMode&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;EasingMode&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;EaseOut&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="n"&gt;Amplitude&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="m"&gt;0.5&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="c1"&gt;// Bubble pops in with personality!&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Carrot Rain Celebration:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight csharp"&gt;&lt;code&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;CreateCarrotRain&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt; &lt;span class="m"&gt;30&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;++)&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;delay&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="p"&gt;*&lt;/span&gt; &lt;span class="m"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Stagger creation&lt;/span&gt;
        &lt;span class="kt"&gt;var&lt;/span&gt; &lt;span class="n"&gt;timer&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="n"&gt;DispatcherTimer&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="n"&gt;Interval&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;TimeSpan&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;FromMilliseconds&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;delay&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="p"&gt;};&lt;/span&gt;
        &lt;span class="n"&gt;timer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Tick&lt;/span&gt; &lt;span class="p"&gt;+=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;s&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nf"&gt;CreateFallingCarrot&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
            &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;s&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;DispatcherTimer&lt;/span&gt;&lt;span class="p"&gt;)?.&lt;/span&gt;&lt;span class="nf"&gt;Stop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="p"&gt;};&lt;/span&gt;
        &lt;span class="n"&gt;timer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;Start&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Hot Design Agent helped me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Organize GIF switching logic for different interactions&lt;/li&gt;
&lt;li&gt;Perfect the bubble pop timing (200ms → 150ms)&lt;/li&gt;
&lt;li&gt;Optimize carrot animation performance with proper cleanup&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Visual Polish with AI Assistance
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Floating Coffee Beans:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Used Canvas for particle system&lt;/li&gt;
&lt;li&gt;Hot Design Agent suggested opacity (0.25) and size ranges (30-50px)&lt;/li&gt;
&lt;li&gt;Implemented sine wave motion for natural floating effect&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Performance Fix&lt;/strong&gt;: Reduced from 15 → 10 beans after Agent identified frame drops&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Speech Bubbles:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Positioned dynamically with CompositeTransform&lt;/li&gt;
&lt;li&gt;AI helped optimize the pop-in animation timing (150ms sweet spot)&lt;/li&gt;
&lt;li&gt;Added personality with randomized messages array&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Trigger&lt;/strong&gt;: Appears on card hover, creating delightful feedback&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Carrot Rain Particles:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;30 carrots with rotation (2-5 full spins), drift, and fade&lt;/li&gt;
&lt;li&gt;Agent helped implement proper cleanup: &lt;code&gt;storyboard.Completed += (s, e) =&amp;gt; ParticleCanvas.Children.Remove(carrot);&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Random fall durations (1500-2500ms) for natural variation&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Challenge&lt;/strong&gt;: Initial implementation caused lag; Agent suggested staggered creation with 100ms delays&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Color Palette Refinement:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Original: #6F4E37 (coffee brown)&lt;/li&gt;
&lt;li&gt;Hover: #96644B (warmer brown) - suggested by Agent&lt;/li&gt;
&lt;li&gt;Accent: #D4A574 (caramel) for buttons and highlights&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. Controls &amp;amp; Bindings Modified
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Modified in Hot Design:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Border.Background&lt;/code&gt; - Color animations&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;StackPanel.Padding&lt;/code&gt; - Spacing optimization&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;TextBlock.FontSize&lt;/code&gt; - Typography hierarchy&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Button.Padding&lt;/code&gt; - Touch target sizing&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Border.CornerRadius&lt;/code&gt; - Rounded corners&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;ThemeShadow&lt;/code&gt; - Depth and elevation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Data Bindings:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Dynamic quote rotation from string array&lt;/li&gt;
&lt;li&gt;Random message selection for speech bubbles&lt;/li&gt;
&lt;li&gt;Mood-based animation selection (10 rabbit GIFs)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Design Process
&lt;/h2&gt;

&lt;h2&gt;
  
  
  Key Takeaways
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🚀 Speed &amp;amp; Efficiency
&lt;/h3&gt;

&lt;p&gt;Hot Design Agent + Hot Reload reduced iteration time by &lt;strong&gt;~70%&lt;/strong&gt;. What used to take multiple compile cycles now happens in seconds with visual feedback.&lt;/p&gt;

&lt;h3&gt;
  
  
  🎨 AI as a Design Partner
&lt;/h3&gt;

&lt;p&gt;The Agent doesn't just execute commands - it &lt;strong&gt;suggests improvements&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;"This scale might cause overflow, try 1.08 instead of 1.12"&lt;/li&gt;
&lt;li&gt;"Reduce padding to create more breathing room"&lt;/li&gt;
&lt;li&gt;"Consider elastic easing for a playful feel"&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  🔄 Real-Time Iteration
&lt;/h3&gt;

&lt;p&gt;Being able to adjust UI while the app runs is transformative:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Test hover states without restarting&lt;/li&gt;
&lt;li&gt;See animation timing changes immediately&lt;/li&gt;
&lt;li&gt;Validate color choices in context&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  📱 Cross-Platform Confidence
&lt;/h3&gt;

&lt;p&gt;Built with Uno Platform, the same XAML runs on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Windows (WinUI 3)&lt;/li&gt;
&lt;li&gt;Web (WebAssembly)&lt;/li&gt;
&lt;li&gt;Mobile (iOS/Android)&lt;/li&gt;
&lt;li&gt;macOS and Linux&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Hot Design ensures consistency across all platforms.&lt;/p&gt;

&lt;h3&gt;
  
  
  🤖 AI-Powered vs Traditional Development
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Traditional Approach:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Write XAML&lt;/li&gt;
&lt;li&gt;Compile&lt;/li&gt;
&lt;li&gt;Run app&lt;/li&gt;
&lt;li&gt;Notice issue&lt;/li&gt;
&lt;li&gt;Stop app&lt;/li&gt;
&lt;li&gt;Modify code&lt;/li&gt;
&lt;li&gt;Repeat&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Hot Design + AI Approach:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Run app once&lt;/li&gt;
&lt;li&gt;Describe desired change to Agent&lt;/li&gt;
&lt;li&gt;See it happen in real-time&lt;/li&gt;
&lt;li&gt;Iterate visually&lt;/li&gt;
&lt;li&gt;Keep refining without stopping&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Result:&lt;/strong&gt; From idea to polished UI in a fraction of the time.&lt;/p&gt;

&lt;h3&gt;
  
  
  💡 Lessons Learned
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Start simple, iterate visually&lt;/strong&gt; - Basic structure first, then refine with Hot Design&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Performance matters with animations&lt;/strong&gt; - Too many simultaneous effects = lag; Agent helped identify bottlenecks&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Animation timing is everything&lt;/strong&gt; - 50ms difference between 200ms and 150ms is noticeable; real-time testing is crucial&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Proper cleanup prevents memory leaks&lt;/strong&gt; - Always remove particles from Canvas in &lt;code&gt;Completed&lt;/code&gt; handlers&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Stagger complex animations&lt;/strong&gt; - 100ms delays between carrot creations made the effect smooth instead of janky&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GIF state management needs structure&lt;/strong&gt; - Organizing 10 animations by mood/action makes code maintainable&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cross-platform from day one&lt;/strong&gt; - Hot Design makes it easy to validate on multiple targets&lt;/li&gt;
&lt;/ol&gt;

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

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Framework:&lt;/strong&gt; Uno Platform 5.x&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Language:&lt;/strong&gt; C# + XAML&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;IDE:&lt;/strong&gt; Visual Studio Code, Kiro&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tools:&lt;/strong&gt; Hot Design, Hot Reload, Hot Design Agent (Preview)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Animations:&lt;/strong&gt; Storyboards with custom easing functions&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;Building Bunny Brew Café with Hot Design Agent showed me the future of UI development. The combination of visual design tools and AI assistance creates a workflow that's both faster and more creative. Instead of fighting with code, I could focus on crafting delightful interactions and polishing every detail.&lt;/p&gt;

&lt;p&gt;The barista bunny is ready to serve! ☕🐰&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Thank you for checking out Bunny Brew Café! I hope it makes you smile as much as it made me smile building it.&lt;/em&gt; 😊&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>unoplatformchallenge</category>
      <category>dotnet</category>
      <category>crossplatform</category>
    </item>
    <item>
      <title>How Apache Spark Transforms Big Data Analytics</title>
      <dc:creator>Sujan Koirala</dc:creator>
      <pubDate>Fri, 18 Jul 2025 11:01:15 +0000</pubDate>
      <link>https://dev.to/sujankoirala021/how-apache-spark-transforms-big-data-analytics-4e6a</link>
      <guid>https://dev.to/sujankoirala021/how-apache-spark-transforms-big-data-analytics-4e6a</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Background&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;With the increase in internet usage, there is tremendous increase in the quantity of data from various sources including social media posts, images, audio, video, texts, etc. Due to these large data from variety of sources, the traditional data processing tools become incapable of processing.&lt;/p&gt;

&lt;p&gt;So the concept of &lt;strong&gt;big data&lt;/strong&gt; emerged, where big data is defined as extremely large and complex datasets that are difficult to process using the traditional data processing tools. Big data is generally characterized by &lt;strong&gt;3Vs&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Volume&lt;/strong&gt; (data size varies from terabytes to petabytes)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Velocity&lt;/strong&gt; (high speed with which data is processed)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Variety&lt;/strong&gt; (data with different format, source and structure)&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Introduction to Apache Spark&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Apache Spark is an open-source distributed data processing engine for large data. Started in 2009 as a research project at the University of Colombia, the main objective of the project was to speed up the processing jobs in Hadoop systems.&lt;br&gt;&lt;br&gt;
It supports &lt;strong&gt;batch processing&lt;/strong&gt;, &lt;strong&gt;stream processing&lt;/strong&gt;, &lt;strong&gt;graph processing&lt;/strong&gt; and &lt;strong&gt;machine learning&lt;/strong&gt;, with support for programming languages like &lt;strong&gt;Python, Java, Scala, R, and SQL&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Why Spark?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Spark is used because of its fast data processing, advanced API support, scalability and ease of use, which are explained below:&lt;/p&gt;

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

&lt;h3&gt;
  
  
  &lt;strong&gt;1. Scalability&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Apache Spark can handle data ranging from a single machine to thousands of servers in a cluster. It distributes data and computation across many nodes, allowing you to process very large datasets (big data) efficiently.&lt;br&gt;&lt;br&gt;
You can easily add more nodes to scale up processing power.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;2. Real Time&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Spark supports real-time data processing with its Spark Streaming module.&lt;br&gt;&lt;br&gt;
It processes live data streams (e.g., from sensors, logs, social media) with low latency.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;3. Fault Tolerance&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Spark’s data abstraction, &lt;strong&gt;RDD (Resilient Distributed Dataset)&lt;/strong&gt;, is designed to handle failures. Each RDD keeps track of how it was derived from other datasets (lineage).&lt;br&gt;&lt;br&gt;
If a node fails, Spark can recompute lost partitions automatically without needing to restart the entire job.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;4. Ease of Use&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Spark provides high-level APIs that simplify writing distributed applications.&lt;br&gt;&lt;br&gt;
It supports multiple programming languages (Scala, Python, Java, R) and comes with built-in libraries (&lt;strong&gt;Spark SQL, MLlib, GraphX&lt;/strong&gt;) for common tasks, reducing the amount of code needed.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;5. Speed&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Spark performs data processing &lt;strong&gt;in-memory&lt;/strong&gt;, reducing time spent on disk I/O. This makes Spark much faster (up to 100x) than traditional systems like Hadoop MapReduce for many workloads. It also optimizes execution plans to run tasks efficiently in parallel.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Why Spark Outperforms Hadoop MapReduce&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Apache Hadoop, a traditional distributed data processing tool, writes the intermediate result to disk after each step resulting in slow performance, making it inefficient for iterative jobs.  &lt;/p&gt;

&lt;p&gt;However, Spark makes use of &lt;strong&gt;in-memory processing&lt;/strong&gt;, i.e., the intermediate results are stored in RAM so that only the final result could be written into the disk, making it 100 times faster than Hadoop.&lt;/p&gt;

&lt;p&gt;Besides, Apache Spark's &lt;strong&gt;fault tolerance&lt;/strong&gt;, based on its &lt;strong&gt;resilient distributed datasets (RDDs)&lt;/strong&gt;, allows it to quickly recover from node failures by recomputing only lost data partitions — enhancing efficiency.  &lt;/p&gt;

&lt;p&gt;Moreover, Spark supports &lt;strong&gt;real-time data processing&lt;/strong&gt; through its streaming capabilities, whereas Hadoop is mainly limited to batch jobs.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Spark Ecosystem&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6xsen1bgg700np6uu8uv.webp" 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%2F6xsen1bgg700np6uu8uv.webp" alt="Spark Ecosystem" width="800" height="418"&gt;&lt;/a&gt;&lt;br&gt;&lt;br&gt;
&lt;em&gt;Figure: Overview of the Apache Spark Ecosystem and its Core Components&lt;/em&gt;&lt;br&gt;&lt;br&gt;
&lt;em&gt;(Source: &lt;a href="https://data-flair.training/blogs/apache-spark-ecosystem-components/" rel="noopener noreferrer"&gt;Data Flair&lt;/a&gt;)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The Apache Spark ecosystem consists of powerful tools and libraries built around the core Spark engine to support various big data processing tasks. Here are the key components:&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;1. Spark Core&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;This is the foundation of the Spark ecosystem, where all other Spark components are built on top of it.&lt;br&gt;&lt;br&gt;
It handles:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Task Scheduling&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Memory Management&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Fault Recovery&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Interactions with Storage Systems&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;2. Spark SQL&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;It enables querying structured data using SQL or DataFrame APIs. It supports various data sources like &lt;strong&gt;JSON&lt;/strong&gt;, &lt;strong&gt;Hive tables&lt;/strong&gt;, and &lt;strong&gt;Parquet files&lt;/strong&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;3. Spark Streaming&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;It allows processing of real-time data streams from sources such as &lt;strong&gt;Kafka&lt;/strong&gt;, &lt;strong&gt;Flume&lt;/strong&gt;, or &lt;strong&gt;TCP sockets&lt;/strong&gt; and processes it in near real-time. This is crucial for applications like &lt;strong&gt;fraud detection&lt;/strong&gt;, &lt;strong&gt;live monitoring&lt;/strong&gt;, and &lt;strong&gt;alert systems&lt;/strong&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;4. MLlib (Machine Learning Library)&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;It is a scalable machine learning library that offers algorithms for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Classification&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Regression&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Clustering&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Collaborative Filtering&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;and more.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;5. GraphX&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;It is a library for &lt;strong&gt;graph processing&lt;/strong&gt; and &lt;strong&gt;analytics&lt;/strong&gt;.&lt;br&gt;&lt;br&gt;
It enables computation on graphs and graph-parallel computations.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Resilient Distributed Datasets(RDD)&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;RDD is the fundamental data structure of spark and is the Spark's main programming abstraction. It is immutable and fault tolerant collection of elements or objects that can be processed in parallel across the cluster of machines. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;RDDs are called "resilient" because they track data lineage information so that lost data can be rebuilt if there is a failure, making RDDs highly fault-tolerant.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Once created, a RDD cannot be changed. Transformations are applied to RDD to create new RDD leaving the original one unchanged.&lt;/p&gt;

&lt;h2&gt;
  
  
  RDD Operations
&lt;/h2&gt;

&lt;p&gt;There are two types of operations that can be performed on RDD:&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%2Fywyw2y5wyap7gpx2507q.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%2Fywyw2y5wyap7gpx2507q.png" alt="RDD Operations: Transformations and Actions" width="800" height="365"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Figure: Transformations and Actions&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Transformations&lt;/strong&gt;&lt;br&gt;
Transformations are the operations that create new RDD from existing one. &lt;br&gt;
As mentioned earlier, RDD are immutable but, we can create new RDD by applying the transformation. It takes RDD as input and produces one or more RDD as output. Transformations are lazy in nature i.e., they get execute when we call an action. They are not executed immediately. Two most basic type of transformations is a map(), filter().&lt;br&gt;
Transformations can be Narrow Transformation or Wide Transformation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A. Narrow Transformation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This type of transformation doesn't require data to be shuffled across different partitions. Each input partition produces one output partition and there is no need of communication between the nodes in the cluster for the operations.&lt;br&gt;
It is more efficient as there is less network overhead. &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%2Fhgobttn9ul18z1h0p13m.webp" 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%2Fhgobttn9ul18z1h0p13m.webp" alt="Narrow Transformation" width="658" height="345"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Figure: Narrow Transformation&lt;/em&gt;&lt;br&gt;&lt;br&gt;
&lt;em&gt;(Source: &lt;a href="https://data-flair.training/blogs/spark-rdd-operations-transformations-actions/" rel="noopener noreferrer"&gt;Data Flair&lt;/a&gt;)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;B. Wide Transformation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This type of transformation require shuffle of data between different partitions. Operation depends on data from the multiple partitions and needs to be redistributed across the cluster.&lt;br&gt;
It has higher latency and less efficient execution due to disk I/O and network involved in shuffling. &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%2Fsa2myy8402xhzjbfnqmv.webp" 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%2Fsa2myy8402xhzjbfnqmv.webp" alt="Wide Transformation" width="659" height="345"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Figure: Narrow Transformation&lt;/em&gt;&lt;br&gt;
&lt;em&gt;(Source: &lt;a href="https://data-flair.training/blogs/spark-rdd-operations-transformations-actions/" rel="noopener noreferrer"&gt;Data Flair&lt;/a&gt;)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Actions&lt;/strong&gt;&lt;br&gt;
Actions trigger the actual computation of RDD. When the action is triggered after the result, new RDD is not formed like transformation. Thus, Actions are Spark RDD operations that give non-RDD values. Results are returned to driver or write data to external storage systems.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Job, Stage, and Task&lt;/strong&gt;
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Job&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;A job is the sequence of transformations on data. It can be thought of as the total work that your Spark application needs to perform, broken down into a series of steps.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Stage&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;When a job is divided, it results in the creation of multiple stages. A stage is a sequence of transformations executed in a single pass (i.e., without shuffling of data).&lt;br&gt;&lt;br&gt;
Each stage comprises tasks that all perform the same computation.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Task&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;A task is the unit of execution that runs on a single machine. It is associated with the number of partitions.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Lazy Evaluation&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Lazy Evaluation is a powerful feature in Apache Spark that allows Spark to optimize the execution of data processing pipelines.&lt;br&gt;&lt;br&gt;
It means that Spark delays the execution of operations until it absolutely needs to perform them (i.e., until an action is called).&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;How Lazy Evaluation Works&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;In Spark, transformations like &lt;code&gt;map()&lt;/code&gt;, &lt;code&gt;filter()&lt;/code&gt;, and &lt;code&gt;flatMap()&lt;/code&gt; are lazy. They don’t immediately execute; rather, they are recorded as transformations in a &lt;strong&gt;DAG (Directed Acyclic Graph)&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Spark builds up a series of transformations on the data, but doesn't compute anything until it encounters an action like &lt;code&gt;collect()&lt;/code&gt;, &lt;code&gt;count()&lt;/code&gt;, or &lt;code&gt;save()&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;When an action is called, Spark looks at the entire DAG of transformations, optimizes the execution plan, and then runs the tasks in the most efficient order.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Spark Architecture&lt;/strong&gt;
&lt;/h2&gt;

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

&lt;p&gt;&lt;strong&gt;1. Driver Program&lt;/strong&gt;&lt;br&gt;
It is the central co-ordinator of the spark application. It contains the Spark Context, which is the entry point to the Spark's execution environment.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;What it does?&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Job Scheduling&lt;/li&gt;
&lt;li&gt;Task Distribution&lt;/li&gt;
&lt;li&gt;Fault Tolerance&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Cluster Manager&lt;/strong&gt;&lt;br&gt;
It is responsive for allocating resources across the cluster and decides which worker node your application gets to use. Examples are YARN, Mesos, etc.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Executors&lt;/strong&gt;&lt;br&gt;
These are the worker processes that run on the worker nodes. It is responsible for executing the tasks assigned to it by driver. It then reports the result back to the driver.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Worker Nodes&lt;/strong&gt;&lt;br&gt;
Worker nodes are the machines in the cluster where executors run.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Execution Flow of Apache Spark&lt;/strong&gt;
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;1. App Submission&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;When a user submits an application, a driver program is launched.&lt;br&gt;&lt;br&gt;
Driver communicates with the cluster manager to request resources.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;2. Job Creation and DAG Creation&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Driver converts user code into jobs, which are divided into stages and further into tasks.&lt;br&gt;&lt;br&gt;
Driver creates a logical &lt;strong&gt;DAG&lt;/strong&gt; representing the sequence of stages and tasks.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;3. Stage Division and Task Scheduling&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;DAG Scheduler divides the DAG into stages, each with multiple tasks.&lt;br&gt;&lt;br&gt;
Task Scheduler assigns tasks to executors based on available resources and data.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;4. Task Execution on Worker Nodes&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Executors run tasks on worker nodes, process data, and return results to the driver.&lt;br&gt;&lt;br&gt;
Driver aggregates and presents the result to the user.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Speculative Execution in Spark&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;In a large spark job, tasks are distributed across many nodes in a cluster. Sometimes, a few tasks may runs significantly slower than others due to the issues like hardware degradation, network congestion, data skew, resource contention.&lt;br&gt;
So what speculative execution in spark does is that it launches duplicate copies of slow-running tasks on different nodes under the assumption that these new nodes may complete faster than the older one. Then, whichever task finishes first wins, and the result of others is discarded. &lt;/p&gt;

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

&lt;p&gt;In conclusion, Apache Spark is a powerful, open-source distributed data processing engine that has revolutionized big data analytics. Its ability to handle vast amounts of data in real-time, coupled with its fault tolerance, scalability, and speed, makes it an ideal choice for various industries dealing with massive datasets.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>PawPal: Automate Your Dog’s Daily Routine with One Prompt Using Runner H</title>
      <dc:creator>Sujan Koirala</dc:creator>
      <pubDate>Mon, 07 Jul 2025 06:40:31 +0000</pubDate>
      <link>https://dev.to/sujankoirala021/pawpal-automate-your-dogs-daily-routine-with-one-prompt-using-runner-h-334d</link>
      <guid>https://dev.to/sujankoirala021/pawpal-automate-your-dogs-daily-routine-with-one-prompt-using-runner-h-334d</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;PawPal is a Runner H-powered AI agent that manages the entire daily care routine for your pet — without needing a single line of code. It automatically plans when to feed and walk your dog, taking into account local weather and your calendar availability, and updates your pet sitter via email when you're unavailable.&lt;/p&gt;

&lt;p&gt;Instead of manually juggling schedules, emails, and logs, PawPal handles everything from one single prompt — making pet care consistent, reliable, and intelligent.&lt;/p&gt;

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

&lt;p&gt;With single prompt, Runner H starts the workflow.&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%2F30jv7iwevf7kijppfkw6.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F30jv7iwevf7kijppfkw6.gif" alt="Prompt to start workflow"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Result presented by Runner H&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%2Fcpf5tft87b4m5g3as2rq.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcpf5tft87b4m5g3as2rq.gif" alt="Output of Runner H"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Create logs in Google Docs&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%2F7cqwtdx5af9h4g24n9x8.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7cqwtdx5af9h4g24n9x8.gif" alt="Logs in Google Docs"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Schedules updated in Google Calendar&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%2Fkpgffloqupe3uxcqt86y.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkpgffloqupe3uxcqt86y.gif" alt="Schedules updated "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Email sent to the caretaker automatically&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%2Fmv4k065kzkeglw797yh7.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%2Fmv4k065kzkeglw797yh7.png" alt="Email to caretaker"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  How I Used Runner H
&lt;/h2&gt;



&lt;p&gt;I connected Runner H with these tools:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Google Calendar – To schedule feeding and walking sessions for my dog Jessica.&lt;/li&gt;
&lt;li&gt;Gmail – To notify my pet sitter when I’m unavailable.&lt;/li&gt;
&lt;li&gt;Google Docs – To log the complete pet care schedule and updates.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then, I ran this single prompt to automate the entire workflow:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Take care of my dog Jessica today. Check the local weather and schedule walking times accordingly in my Google Calendar (preferably when it’s not too hot or raining). Also, add feeding times at 8 AM and 6 PM to the calendar. If I have overlapping events and can't manage Jessica, email my dog-sitter at &lt;a href="mailto:xyz@gmail.com"&gt;xyz@gmail.com&lt;/a&gt; with today's full pet care schedule. Finally, log the entire care routine (feeding + walking times, weather note, and sitter update status) in the Google Doc connected to my account.”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
  
  
  Use Case &amp;amp; Impact
&lt;/h2&gt;



&lt;p&gt;PawPal is perfect for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Busy pet owners with packed calendars.&lt;/li&gt;
&lt;li&gt;People who travel and want their sitter informed without daily effort.&lt;/li&gt;
&lt;li&gt;Elderly owners who need automated reminders and logs.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Impact:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Removes the mental load of remembering pet care tasks.&lt;/li&gt;
&lt;li&gt;Prevents missed walks or meals.&lt;/li&gt;
&lt;li&gt;Provides backup coverage (via email) automatically.&lt;/li&gt;
&lt;li&gt;Keeps all actions transparently logged in a Doc.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s like having a smart assistant for your dog, operating quietly in the background every day.&lt;/p&gt;


&lt;h2&gt;
  
  
  Social Love
&lt;/h2&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1942113446906015841-693" src="https://platform.twitter.com/embed/Tweet.html?id=1942113446906015841"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1942113446906015841-693');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1942113446906015841&amp;amp;theme=dark"
  }



&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>runnerhchallenge</category>
      <category>ai</category>
      <category>machinelearning</category>
    </item>
    <item>
      <title>MovieMonk: An AI-Powered Movie Recommendation App Using MindsDB Knowledge Base + Agent</title>
      <dc:creator>Sujan Koirala</dc:creator>
      <pubDate>Mon, 30 Jun 2025 16:47:25 +0000</pubDate>
      <link>https://dev.to/sujankoirala021/moviemonk-an-ai-powered-movie-recommendation-app-using-mindsdb-knowledge-base-agent-2if</link>
      <guid>https://dev.to/sujankoirala021/moviemonk-an-ai-powered-movie-recommendation-app-using-mindsdb-knowledge-base-agent-2if</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;🎯 Why I Built MovieMonk&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;I’m a movie maniac. But scrolling endlessly through streaming platforms or generic recommendation lists? Not fun.&lt;/p&gt;

&lt;p&gt;That’s why I built MovieMonk, an AI-powered movie discovery app using MindsDB that lets you ask natural language questions like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Recommend a thrilling action time travel movie with high ratings from the last 5 years.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  🧠 What is MindsDB?
&lt;/h2&gt;

&lt;p&gt;MindsDB is an AI data platform that lets you query data with natural language and build smart agents on top of structured and unstructured sources.&lt;/p&gt;

&lt;p&gt;In June 2025, MindsDB introduced Knowledge Bases — a way to semantically index and query documents, similar to vector search — but SQL-native and way more developer-friendly.&lt;/p&gt;

&lt;h2&gt;
  
  
  🤖 Why MindsDB?
&lt;/h2&gt;

&lt;p&gt;When building an intelligent app, most of the time you get stuck juggling:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🔢 Embedding models&lt;/li&gt;
&lt;li&gt;🧠 Vector databases&lt;/li&gt;
&lt;li&gt;🔍 Search logic&lt;/li&gt;
&lt;li&gt;📦 Data pipelines&lt;/li&gt;
&lt;li&gt;🤯 Prompt engineering&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s a lot of moving parts for one simple goal: query your data intelligently.&lt;/p&gt;

&lt;p&gt;With MindsDB, all of this is unified in one SQL-like interface.&lt;/p&gt;

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

&lt;h2&gt;
  
  
  What I Did?
&lt;/h2&gt;

&lt;p&gt;Here's a quick overview of what I built:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Prepared a movie dataset with metadata like Title, Genre, Overview, Release Date, Ratings, etc.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Created a MindsDB Project and uploaded the movie data into a table using the Python SDK.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Built a Knowledge Base (KB) from that table using Title, Genre, and Overview for semantic search, and added metadata columns like Vote_Average, Popularity, and Release_Date.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Created a Movie Agent using CREATE AGENT with a custom prompt so it talks like a friendly movie expert.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Evaluated the Knowledge Base using EVALUATE KNOWLEDGE_BASE to check the quality of the results.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  🧱 Challenges
&lt;/h2&gt;

&lt;p&gt;Here’s a list of &lt;strong&gt;"Problems Faced"&lt;/strong&gt; based on your context:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;❌ Encountered error with &lt;code&gt;version='llm_relevancy'&lt;/code&gt; during evaluation, so had to switch to &lt;code&gt;version='doc_id'&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;🧪 Needed to create a custom test dataset manually for evaluation purposes.&lt;/li&gt;
&lt;li&gt;⚙️ Faced initial confusion while setting up and managing &lt;strong&gt;Jobs&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;📚 Had no prior experience using a &lt;strong&gt;knowledge base&lt;/strong&gt;, so had to learn its structure and usage (though MindsDB simplified the process).&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🎬 Use Cases
&lt;/h2&gt;

&lt;p&gt;MovieMonk is just the beginning — here are other ways you could use MindsDB KBs + Agents:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Streaming platform assistant: Recommend shows/movies based on user taste&lt;/li&gt;
&lt;li&gt;Smart filtering bot: Let users find media with filters like genre, language, and popularity&lt;/li&gt;
&lt;li&gt;Media search tool: Let analysts or journalists search through a movie database semantically&lt;/li&gt;
&lt;li&gt;Personal movie planner: Build a chatbot that plans your weekend watchlist&lt;/li&gt;
&lt;li&gt;Trivia or quiz bots: Use movie data to power engaging Q&amp;amp;A experiences&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;Building with MindsDB was a refreshing experience.&lt;/p&gt;

&lt;p&gt;It simplified complex tasks like vector search, agent creation, and prompt engineering — all within a single platform. I didn’t have to worry about separate vector databases, embeddings, or model integration.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;With just Python, SQL, and a few lines of config, I built a fully functional AI-powered movie app.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;MovieMonk proves how easy it is to turn a plain CSV file into a smart, conversational experience.&lt;/p&gt;

&lt;p&gt;If you're thinking about building anything with your own data — whether it's books, reports, research papers, or customer feedback — MindsDB’s Knowledge Base + Agent combo is a powerful toolkit worth exploring.&lt;/p&gt;

</description>
      <category>mindsdb</category>
      <category>database</category>
      <category>knowledgebase</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Make your Day with Daytona</title>
      <dc:creator>Sujan Koirala</dc:creator>
      <pubDate>Fri, 10 Jan 2025 11:38:25 +0000</pubDate>
      <link>https://dev.to/sujankoirala021/make-your-day-with-daytona-4loc</link>
      <guid>https://dev.to/sujankoirala021/make-your-day-with-daytona-4loc</guid>
      <description>&lt;h2&gt;
  
  
  The Challenge: A Tale of Technical Debt 😓
&lt;/h2&gt;

&lt;p&gt;Just a few days ago, I participated in Online Hackathon to put myself into test. Like many developers, I was excited to dive straight into coding and bring my ideas to life. However, reality hit hard when I realized that setting up my development environment was eating into my precious hackathon time. The hackathon project required a complex stack:-&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;React frontend with specific Node.js version requirements&lt;/li&gt;
&lt;li&gt;Python backend with multiple dependencies &lt;/li&gt;
&lt;li&gt;Multiple API integrations.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With only 48 hours on the clock, I spent the first 3 hours just wrestling with environment setup. Different team members were running different operating systems, and we kept running into version conflicts and dependency issues. It was frustrating to watch valuable hackathon time slip away on setup tasks instead of building features.&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%2Fcn2jpmr1nsdjpmnll6ds.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%2Fcn2jpmr1nsdjpmnll6ds.jpg" alt="Image description" width="500" height="688"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The breaking point came when one team member couldn't get the development environment running at all, forcing them to spend hours debugging instead of contributing to the project. We needed a better way to ensure everyone could start coding quickly and have identical development environments regardless of their local setup.&lt;/p&gt;
&lt;h2&gt;
  
  
  Enter Daytona: The Game-Changer ✨
&lt;/h2&gt;

&lt;p&gt;After struggling with the setup for weeks, I discovered Daytona through a colleague's recommendation. The promise of standardized development environments that "just work" seemed too good to be true. Spoiler alert: it wasn't.&lt;/p&gt;

&lt;p&gt;Daytona is an open-source Development Environment Manager (DEM) licensed under the Apache License 2.0. Daytona streamlines the entire workflow by automating instance provisioning, configuration interpretation and application, prebuild setup, secure VPN connection establishment, seamless integration with your local or Web IDE, and assigning a fully qualified domain name to the development environment for effortless sharing and collaboration.&lt;/p&gt;

&lt;p&gt;This allows developers to dive straight into what truly matters—their code.&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/daytonaio" rel="noopener noreferrer"&gt;
        daytonaio
      &lt;/a&gt; / &lt;a href="https://github.com/daytonaio/daytona" rel="noopener noreferrer"&gt;
        daytona
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      The Open Source Dev Environment Manager.
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;br&gt;
&lt;div&gt;
  
    
    &lt;img alt="Daytona logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fdaytonaio%2Fdaytona%2Fraw%2Fmain%2Fassets%2Fimages%2FDaytona-logotype-black.png" width="40%"&gt;
  
&lt;/div&gt;
&lt;br&gt;
&lt;div&gt;
&lt;p&gt;&lt;a href="https://www.daytona.io/docs" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/a6875dce5b9bc7b5ca47dca1b068e5dcb068038a500da135966575bc338d75df/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f646179746f6e61696f2f646f63733f6c6162656c3d446f637326636f6c6f723d323363633731" alt="Documentation"&gt;&lt;/a&gt;
&lt;a href="https://github.com/daytonaio/daytona#license" rel="noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/01ecdea1854758fa9bf0f359fa2f4464324463279ccc4b6d586e90de272e3474/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4170616368652d2d322e302d626c7565" alt="License"&gt;&lt;/a&gt;
&lt;a href="https://goreportcard.com/report/github.com/daytonaio/daytona" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/295bd4f82b11ba8bacd85262875f1c68c755cee403312c7cee959ab68c151023/68747470733a2f2f676f7265706f7274636172642e636f6d2f62616467652f6769746875622e636f6d2f646179746f6e61696f2f646179746f6e61" alt="Go Report Card"&gt;&lt;/a&gt;
&lt;a href="https://github.com/daytonaio/daytona/issues" rel="noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/3db9bc12d79f4a0378f300c7c35a4f2f72d773c750fbaef0b722cdea8e8b3db3/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f646179746f6e61696f2f646179746f6e61" alt="Issues - daytona"&gt;&lt;/a&gt;
&lt;a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/baa6ce5587f122a2abc4c996fb5dd9ccc4b33eea6d914d227f3063754e01e758/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f646179746f6e61696f2f646179746f6e61"&gt;&lt;img src="https://camo.githubusercontent.com/baa6ce5587f122a2abc4c996fb5dd9ccc4b33eea6d914d227f3063754e01e758/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f646179746f6e61696f2f646179746f6e61" alt="GitHub Release"&gt;&lt;/a&gt;
&lt;br&gt;
&lt;a href="https://console.algora.io/org/daytonaio/bounties?status=open" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/22acd6dcf9e3a5321c52363de0e1ded1c603b8188164d4edaefbdb24c39f9731/68747470733a2f2f696d672e736869656c64732e696f2f656e64706f696e743f75726c3d6874747073253341253246253246636f6e736f6c652e616c676f72612e696f253246617069253246736869656c6473253246646179746f6e61696f253246626f756e746965732533467374617475732533446f70656e" alt="Open Bounties"&gt;&lt;/a&gt;
&lt;a href="https://console.algora.io/org/daytonaio/bounties?status=completed" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/f42498dcfd5b3407d64e22817ac1fc9be379304f803c3fad4a49003a374ba31d/68747470733a2f2f696d672e736869656c64732e696f2f656e64706f696e743f75726c3d6874747073253341253246253246636f6e736f6c652e616c676f72612e696f253246617069253246736869656c6473253246646179746f6e61696f253246626f756e74696573253346737461747573253344636f6d706c65746564" alt="Rewarded Bounties"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;br&gt;
&lt;p&gt;&lt;a href="https://www.producthunt.com/posts/daytona?utm_source=badge-top-post-badge&amp;amp;utm_medium=badge&amp;amp;utm_souce=badge-daytona" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/712ec3d008155f8c39db7cab71a1e9cb70b050877426e1758fb13337f69e93cc/68747470733a2f2f6170692e70726f6475637468756e742e636f6d2f776964676574732f656d6265642d696d6167652f76312f746f702d706f73742d62616467652e7376673f706f73745f69643d343435333932267468656d653d6c6967687426706572696f643d6461696c79" alt="Daytona - Dev environment manager that makes you 2x more productive | Product Hunt" width="250" height="54"&gt;&lt;/a&gt;
&lt;a href="https://www.producthunt.com/posts/daytona?utm_source=badge-top-post-topic-badge&amp;amp;utm_medium=badge&amp;amp;utm_souce=badge-daytona" rel="nofollow noopener noreferrer"&gt;&lt;img src="https://camo.githubusercontent.com/d7459107bbc3c86cc6dcc78d21eabbc94ceef7f329cdba536de08a0abf6871e1/68747470733a2f2f6170692e70726f6475637468756e742e636f6d2f776964676574732f656d6265642d696d6167652f76312f746f702d706f73742d746f7069632d62616467652e7376673f706f73745f69643d343435333932267468656d653d6c6967687426706572696f643d7765656b6c7926746f7069635f69643d323637" alt="Daytona - Dev environment manager that makes you 2x more productive | Product Hunt" width="250" height="54"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;The Open Source Development Environment Manager&lt;/h1&gt;
&lt;/div&gt;
&lt;div&gt;
Set up a development environment on any infrastructure, with a single command
&lt;/div&gt;
&lt;br&gt;
&lt;p&gt;
    &lt;a href="https://www.daytona.io/docs" rel="nofollow noopener noreferrer"&gt;Documentation&lt;/a&gt;
    ·
    &lt;a href="https://github.com/daytonaio/daytona/issues/new?assignees=&amp;amp;labels=bug&amp;amp;projects=&amp;amp;template=bug_report.md&amp;amp;title=%F0%9F%90%9B+Bug+Report%3A+" rel="noopener noreferrer"&gt;Report Bug&lt;/a&gt;
    ·
    &lt;a href="https://github.com/daytonaio/daytona/issues/new?assignees=&amp;amp;labels=enhancement&amp;amp;projects=&amp;amp;template=feature_request.md&amp;amp;title=%F0%9F%9A%80+Feature%3A+" rel="noopener noreferrer"&gt;Request Feature&lt;/a&gt;
    ·
  &lt;a href="https://go.daytona.io/slack" rel="nofollow noopener noreferrer"&gt;Join Our Slack&lt;/a&gt;
    ·
    &lt;a href="https://twitter.com/daytonaio" rel="nofollow noopener noreferrer"&gt;Twitter&lt;/a&gt;
  &lt;/p&gt;
&lt;div&gt;&lt;a rel="noopener noreferrer" href="https://github.com/daytonaio/daytona/raw/main/assets/images/daytona_demo.gif"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fdaytonaio%2Fdaytona%2Fraw%2Fmain%2Fassets%2Fimages%2Fdaytona_demo.gif" width="50%"&gt;&lt;/a&gt;&lt;/div&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;Single Command&lt;/strong&gt;: Activate a fully configured development environment with a single command.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Runs everywhere&lt;/strong&gt;: spin up your development environment on any machine — whether it's local, remote, cloud-based, physical server, or a VM &amp;amp; any architecture x86 or ARM.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Configuration File Support&lt;/strong&gt;: Initially support for &lt;a href="https://containers.dev/" rel="nofollow noopener noreferrer"&gt;dev container&lt;/a&gt;, ability to expand to DevFile, Nix &amp;amp; Flox (Contributions welcome here!).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Prebuilds System&lt;/strong&gt;: Drastically improve environment setup times (Contributions welcome here!).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;IDE Support&lt;/strong&gt; : Seamlessly supports &lt;a href="https://github.com/microsoft/vscode" rel="noopener noreferrer"&gt;VS Code&lt;/a&gt; &amp;amp; &lt;a href="https://www.jetbrains.com/remote-development/gateway/" rel="nofollow noopener noreferrer"&gt;JetBrains&lt;/a&gt; locally, ready to use without configuration. Includes a built-in Web IDE for added convenience.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Git Provider Integration&lt;/strong&gt;: GitHub, GitLab, Bitbucket, Bitbucket Server, Gitea, Gitness, Azure DevOps, AWS CodeCommit, Gogs &amp;amp; Gitee can be connected, allowing…&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/daytonaio/daytona" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Setting Up Sample React Project using Daytona
&lt;/h2&gt;

&lt;p&gt;I will walk you through setting up a daytona project for ReactJS app. &lt;/p&gt;

&lt;h3&gt;
  
  
  The Tech Stack I Used 🛠️
&lt;/h3&gt;

&lt;p&gt;My project involved:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;React&lt;/li&gt;
&lt;li&gt;Tailwind&lt;/li&gt;
&lt;li&gt;Express JS&lt;/li&gt;
&lt;li&gt;Mistral and Llama(Groq)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Installation and Initial Setup 🗺️
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;First, I installed Daytona using the following official documentation. Make sure you have Docker Desktop pre-installed.&lt;/li&gt;
&lt;/ul&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
      &lt;div class="c-embed__cover"&gt;
        &lt;a href="https://www.daytona.io/docs/installation/installation/" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"&gt;
          &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.daytona.io%2Fdocs%2Fdaytona.png" height="402" class="m-0" width="800"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;div class="c-embed__body"&gt;
      &lt;h2 class="fs-xl lh-tight"&gt;
        &lt;a href="https://www.daytona.io/docs/installation/installation/" rel="noopener noreferrer" class="c-link"&gt;
          Installation | Daytona
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;p class="truncate-at-3"&gt;
          Learn how to install Daytona on Linux, macOS, and Windows.
        &lt;/p&gt;
      &lt;div class="color-secondary fs-s flex items-center"&gt;
          &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.daytona.io%2Fdocs%2Ffavicon.ico" width="800" height="400"&gt;
        daytona.io
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;Next, I created a devcontainer.json file inside the .devcontainer folder. Here's what our .devcontainer.json looked like:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
    "name": "React Dev Container",
    "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
    "features": {
      "python": "3.10"
    },
    "forwardPorts": [
      5173
    ],
    "postCreateCommand": "npm install"
  }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You may make use of Devcontainer.ai help generate the initial file and then change it as per your requirement. Finally, I pushed .devcontainer folder to my GitHub repo where rest of my project is.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Creating a workspace&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now you can create workspace with just single command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;daytona create https://github.com/daytonaio/sample-react-job-assistant
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you are ready to go 🎉 !!&lt;/p&gt;

&lt;h2&gt;
  
  
  The Benefits I Saw 🌟
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Consistent Environments:&lt;/strong&gt; No more "works on my machine" syndrome. Every team member had identical setups.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rapid Onboarding:&lt;/strong&gt; New team members could start contributing within minutes instead of days.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Resource Efficiency:&lt;/strong&gt; Daytona's workspace management meant we weren't wasting local resources on multiple development environments.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Version Control:&lt;/strong&gt; Our development environment configuration was version-controlled alongside our code.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Tips for Success 💡
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Start Small:&lt;/strong&gt; Begin with a basic configuration and iterate.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Document Everything:&lt;/strong&gt; Keep a changelog of your Daytona setup.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use Pre-builds:&lt;/strong&gt; They significantly reduce workspace creation time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Leverage VS Code Remote:&lt;/strong&gt; It works beautifully with Daytona.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Impact 📈
&lt;/h2&gt;

&lt;p&gt;After implementing Daytona:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Development environment setup time decreased from 4+ hours to 15 minutes&lt;/li&gt;
&lt;li&gt;Onboarding new developers now takes 1 hour instead of 2-3 days&lt;/li&gt;
&lt;li&gt;Zero environment-related issues &lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Community and Support 🤝
&lt;/h2&gt;

&lt;p&gt;The Daytona community has been incredibly helpful. Don't hesitate to &lt;a href="https://go.daytona.io/slack" rel="noopener noreferrer"&gt;Join their Slack channel&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;Daytona transformed our development workflow from a constant struggle with environment issues to a smooth, efficient process. For teams dealing with complex setups or legacy applications, it's a game-changer.&lt;/p&gt;

&lt;p&gt;P.S. If you're struggling with similar challenges, feel free to reach out or check out my project's public documentation. Together, we can make development workflows better for everyone! 🚀&lt;/p&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/daytonaio/sample-react-job-assistant" rel="noopener noreferrer"&gt;Source Code to my project&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>daytona</category>
      <category>react</category>
      <category>opensource</category>
      <category>quira</category>
    </item>
    <item>
      <title>Building Personalized Assistance of Ex-Convicts: Ex-cons Thrive</title>
      <dc:creator>Sujan Koirala</dc:creator>
      <pubDate>Mon, 30 Sep 2024 11:53:07 +0000</pubDate>
      <link>https://dev.to/sujankoirala021/building-personalized-assistance-of-ex-convicts-ex-cons-thrive-172l</link>
      <guid>https://dev.to/sujankoirala021/building-personalized-assistance-of-ex-convicts-ex-cons-thrive-172l</guid>
      <description>&lt;p&gt;Ex-Cons Thrive is a project designed to help formerly incarcerated individuals reintegrate into society by providing job search assistance, legal support, mental health services, and more. This project draws inspiration from the hardships faced by ex-convicts during reintegration, including the stigma, lack of opportunities, and legal barriers that often limit their options.&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Features
&lt;/h2&gt;

&lt;h2&gt;
  
  
  Key Features of Ex-Cons Thrive
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Personalized Job Search for Ex-Convicts&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Users can input their job experience, skills, legal restrictions, interests, and rehabilitation programs to receive tailored job recommendations.&lt;/li&gt;
&lt;li&gt;AI-generated job listings with detailed descriptions, helping users find opportunities that suit their background.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;AI-Powered Legal Support&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Provides categorized legal guidance on common issues faced by ex-convicts.&lt;/li&gt;
&lt;li&gt;Uses AI models like Llama and Mistral to offer contextual responses to predefined legal questions, making it easier to understand complex legal processes.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Mental Health Support Chatbot&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Emotional support chatbot powered by Groq API for two AI models to help users manage stress, mental health, and other emotional challenges they may face during reintegration.&lt;/li&gt;
&lt;li&gt;Provides personalized suggestions and coping strategies based on user inputs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h1&gt;
  
  
  How Ex-Con Thrive Leverages Multiple AI Models
&lt;/h1&gt;

&lt;h3&gt;
  
  
  Llama3-8b-8192
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This model is designed for high-speed token processing and excellent performance. It excels in performing tasks requiring faster response times, making it ideal for providing real-time job recommendations based on user input (experience, skills, legal restrictions, etc.).&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Mixtral-8x7b-32768
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This model is slower compared to Llama3, processing ~80.7 tokens/second. However, providing more creative, contextually rich, and nuanced answers is its strength, which makes it ideal for legal support and mental health features.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Performance Comparison
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Model&lt;/th&gt;
&lt;th&gt;Speed (tokens/sec)&lt;/th&gt;
&lt;th&gt;Best Use Case&lt;/th&gt;
&lt;th&gt;Strengths&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Llama3-8b-8192&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;212.7&lt;/td&gt;
&lt;td&gt;Job Recommendations&lt;/td&gt;
&lt;td&gt;Fast, efficient, ideal for generating multiple results.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Mixtral-8x7b-32768&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;80.7&lt;/td&gt;
&lt;td&gt;Legal Support, Mental Health&lt;/td&gt;
&lt;td&gt;Deep, context-aware, ideal for nuanced, complex responses.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Challenges Faced While Working with APIs
&lt;/h2&gt;

&lt;p&gt;While developing the Ex-Cons Thrive application, I faced several challenges while integrating and utilizing multiple AI APIs. Here are some of the major issues I faced:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;API Response Formatting&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
One of the major challenges was ensuring that the responses from the APIs were properly formatted and structured. The responses from the Groq Cloud API, particularly when generating job suggestions, sometimes returned unexpected formats. I spent almost an hour for maintaining suitable format.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Rate Limiting&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Managing API rate limits was another hurdle. During peak testing times, I experienced instances where requests to the Groq API were throttled, leading to delayed responses or failed requests.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Integration Complexity&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Integrating two different AI models into a cohesive user experience was complex. &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Though these challenges were difficult, I found it very rewarding to overcome them. Each of these obstacles not only enhanced my problem-solving skills but also deepened my understanding of how to effectively work with AI APIs. &lt;/p&gt;

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

&lt;p&gt;Ex-Cons Thrive aims to benefit ex-convicts by providing personalized job assistance and support through the use of advanced AI models. The combination of Llama3-8b-8192 and Mixtral-8x7b-32768, facilitated by Groq Cloud, ensures that users receive tailored job suggestions based on their unique experiences, skills, and needs and mental as well as legal support.&lt;/p&gt;

&lt;p&gt;By addressing the specific challenges faced by ex-convicts, this project not only aims to improve employment opportunities but also seeks to develop a supportive community. &lt;/p&gt;

&lt;h2&gt;
  
  
  Some snapshots of the project
&lt;/h2&gt;

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

</description>
      <category>webdev</category>
      <category>mistral</category>
      <category>llama</category>
      <category>quira</category>
    </item>
  </channel>
</rss>
