The latest articles on DEV Community by Shivam Shah (@shivam_shah_410). https://dev.to/shivam_shah_410 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4156430%2F3dbfacc4-e584-4c27-b9a0-09d05ba9803f.png https://dev.to/shivam_shah_410 en Shivam Shah Tue, 06 Oct 2026 17:24:07 +0000 https://dev.to/shivam_shah_410/random-walk-a-tiny-ai-nudge-to-get-outside-4df3 https://dev.to/shivam_shah_410/random-walk-a-tiny-ai-nudge-to-get-outside-4df3 <p><em>This is a submission for the <a href="https://dev.to/challenges/hacktoberfest-week1-2026-10-05">Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass</a></em></p> <h2> What I Built </h2> <p>I built <strong>Random Walk</strong>, a small app that turns a few minutes of free time into a reason to step outside. Choose a 5-, 10-, or 20-minute walk, share your location with the browser, and the app suggests a nearby waypoint, creates a Google Maps walking-directions link, and asks AI for a short outdoor observation mission.</p> <p>It’s for anyone who wants a low-effort nudge to explore their neighborhood. The screen helps start the walk, then gets out of the way.</p> <h2> Demo </h2> <p> <iframe src="https://www.youtube.com/embed/Dl2Mh-qSyuk" width="710" height="399"> </iframe> </p> <h2> Code </h2> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/shah-shivam-410" rel="noopener noreferrer"> shah-shivam-410 </a> / <a href="https://github.com/shah-shivam-410/random-walk" rel="noopener noreferrer"> random-walk </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><div class="markdown-heading"> <h1 class="heading-element">Touch Grass: Random Walk</h1> </div> <p>A tiny browser app for turning spare time into a nearby walk. Choose 5, 10, or 20 minutes, share your location with the browser, get an outdoor mission generated by GitHub Copilot, and open walking directions to a nearby waypoint.</p> <div class="markdown-heading"> <h2 class="heading-element">Requirements</h2> </div> <ul> <li>Node.js 20.19+ or 22.12+</li> <li>GitHub Copilot CLI installed and signed in with an eligible Copilot subscription</li> </ul> <p>The mission is generated through the GitHub Copilot SDK on the local Node.js server. The browser never receives Copilot credentials. Your coordinates are used only in the browser to calculate a waypoint and make the Google Maps link; they are not sent to Copilot or stored.</p> <div class="markdown-heading"> <h2 class="heading-element">Run locally</h2> </div> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>npm ci npm start</pre> </div> <p>In Windows PowerShell, use <code>npm.cmd ci</code> and <code>npm.cmd start</code> if script execution policy blocks <code>npm</code>.</p> <p>Open <a href="http://localhost:3000" rel="nofollow noopener noreferrer">http://localhost:3000</a> and allow location access. Browser geolocation is available on localhost and secure (HTTPS) pages. Select a duration and press…</p></div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/shah-shivam-410/random-walk" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> How I Built It </h2> <p>The interface uses plain HTML, CSS, and browser JavaScript, with a small Node.js server. The browser asks permission for geolocation, calculates an approximate waypoint in a random direction based on the selected duration, and opens Google Maps walking directions when the user chooses to view them.</p> <p>For the mission, the server uses the <strong><a href="https://github.com/github/copilot-sdk" rel="noopener noreferrer">GitHub Copilot SDK</a></strong>, an MIT-licensed open-source SDK, to prompt Copilot for one brief, safe, screen-free observation activity. The model is hosted by Copilot; this project does not run an open-weight model or perform local inference. The server keeps Copilot credentials out of browser code. The user’s coordinates stay in the browser and are not sent to the mission-generation endpoint.</p> <h2> Why Does Open Innovation Matter? </h2> <p>The open-source SDK made it possible to inspect and integrate an agent runtime directly into a small Node.js app, rather than making the experience depend on the Copilot Chat interface. That let me keep the mission generation on the server, shape its prompt around a short outdoor activity, and keep location data out of that AI request.</p> <h2> Prize Categories </h2> <p>Best Use of GitHub Copilot</p> devchallenge hf26challenge Shivam Shah Mon, 05 Oct 2026 06:01:10 +0000 https://dev.to/shivam_shah_410/image-resizer-app-hactoberfest-2d55 https://dev.to/shivam_shah_410/image-resizer-app-hactoberfest-2d55 <p><em>This is a submission for the <a href="https://dev.to/challenges/hacktoberfest-weekend-2026-10-01">Hacktoberfest Weekend Challenge: Build for a Friend</a></em></p> <h2> What I Built </h2> <p>I built Image-Resizer-App, a modern, frontend-only web application designed to solve a frustrating problem encountered during online application processes: strict image dimension and file-size constraints (such as staying under 15 KB while maintaining clear resolution).</p> <p>Many people—including friends and family filling out government exam applications, scholarship portals, passport applications, and job forms—struggle with standard image tools that stretch images, blur text/signatures, or produce files that exceed strict upload limits.</p> <p>This tool solves that problem by allowing users to:</p> <h2> Demo </h2> <p><a href="https://shah-shivam-410.github.io/Image-Resizer-App/" rel="noopener noreferrer">https://shah-shivam-410.github.io/Image-Resizer-App/</a></p> <h2> Code </h2> <p><a href="https://github.com/shah-shivam-410/Image-Resizer-App" rel="noopener noreferrer">https://github.com/shah-shivam-410/Image-Resizer-App</a></p> <h2> How I Built It </h2> <p>The application is built using modern frontend technologies and client-side processing libraries:</p> <p>Framework &amp; Tooling: React, Vite, and Tailwind CSS for a fast, responsive user interface.</p> <p>Image Processing Engine: Uses Pica for high-quality image resampling and canvas-based algorithms alongside browser-image-compression (with binary search optimization) to reach target KB sizes efficiently.</p> <p>Development Assistance: I leveraged GitHub Copilot (Free Tier) as an AI coding assistant to accelerate component scaffolding, optimize the unit conversion formulas (cm-to-pixel at specific DPIs), and streamline the image compression algorithm setup.</p> <h2> Why Does Open Innovation Matter? </h2> <p>Open-source tooling and client-side web technologies enable developers to build fast, secure utility apps without server overhead or costs. By processing sensitive documents entirely within the user's browser, this approach ensures complete privacy while eliminating reliance on external cloud APIs.</p> <h2> Prize Categories </h2> <p>Best Use of GitHub Copilot<br> <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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fvx0ixgy0eecm7uqoklgy.jpg" class="article-body-image-wrapper"><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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fvx0ixgy0eecm7uqoklgy.jpg" alt=" " width="800" height="886"></a></p> <h2> Prize Categories </h2> devchallenge weekendchallenge hf26challenge