The latest articles on DEV Community by Anshuman Singh (@asrx13). https://dev.to/asrx13 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F99mvlsfu5tfj9m7ku25d.png https://dev.to/asrx13 en Anshuman Singh Mon, 05 Oct 2026 06:34:17 +0000 https://dev.to/asrx13/wandermate-2nph https://dev.to/asrx13/wandermate-2nph <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>Traveling with friends is one of the most rewarding experiences in life—until the friction begins:</p> <ul> <li><em>"Wait, what is our next stop again?"</em></li> <li><em>"Who paid for the train tickets and how much budget do we have left?"</em></li> <li><em>"Did we visit that shrine or is it scheduled for tomorrow morning?"</em></li> </ul> <p>I built <strong>WanderMate</strong> for my friend Alex, an avid globetrotter who loves planning trips across different cities but always gets overwhelmed juggling messy group chats, clunky spreadsheet trackers, and fragmented note apps on the go.</p> <p><strong>WanderMate</strong> is a clean, lightweight, all-in-one <strong>Travel Buddy Web App</strong> that keeps trips effortless and organized:</p> <ol> <li> <strong>📍 Smart "Next Destination to Cover" Hero Banner</strong>: Automatically computes the immediate next unvisited itinerary stop or bucket list spot. It displays the day, scheduled time, helpful notes (e.g., <em>"Arrive early to beat morning crowds"</em>), and a 1-click <strong>Open in Google Maps</strong> shortcut, plus a 1-click <strong>Mark as Visited</strong> button.</li> <li> <strong>🗺️ Daily Itinerary Timeline</strong>: Organizes trip activities chronologically by day with custom timestamps, categories (Sightseeing, Food, Transit, Leisure), and estimated costs.</li> <li> <strong>💳 Real-time Travel Expense Logger</strong>: <ul> <li>Live metrics for <strong>Total Spent</strong>, <strong>Remaining Budget</strong>, and <strong>Daily Average Spend</strong>.</li> <li>Visual dynamic progress bar that turns amber/red if you approach or exceed your budget.</li> <li> <strong>Spending by Category breakdown</strong> (Food &amp; Dining, Accommodation, Transport, Tickets &amp; Tours, Shopping, Misc) with interactive filters.</li> </ul> </li> <li> <strong>🎒 Trip Essentials &amp; Packing Checklist</strong>: Quick checklist for passports, adapters, battery banks, and medicines.</li> <li> <strong>🌓 Sleek Dark &amp; Light Themes</strong>: Modern travel-inspired UI with glassmorphism, responsive layout for mobile and desktop, zero-latency offline performance, and automatic <code>localStorage</code> persistence.</li> </ol> <h2> Demo </h2> <ul> <li> <strong>Local Preview</strong>: <a href="https://asrx13.github.io/WanderMate/" rel="noopener noreferrer">https://asrx13.github.io/WanderMate/</a>.</li> <li> <strong>Interactive Capabilities</strong>: <ul> <li>Preloaded with a curated <strong>Tokyo &amp; Kyoto Autumn Journey</strong> trip to explore instantly.</li> <li>Interactive tab navigation: <em>Itinerary Schedule</em>, <em>Next Points to Cover</em>, <em>Expense Logger</em>, and <em>Essentials</em>.</li> <li>1-click toggle to mark items visited, update live budget indicators, and export complete trip data as JSON.</li> <li>Full theme switcher (🌙 Dark / ☀️ Light mode).</li> </ul> </li> </ul> <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/ASRx13" rel="noopener noreferrer"> ASRx13 </a> / <a href="https://github.com/ASRx13/WanderMate" rel="noopener noreferrer"> WanderMate </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><p><em>This is a submission for the <a href="https://dev.to/challenges/hacktoberfest-weekend-2026-10-01" rel="nofollow">Hacktoberfest Weekend Challenge: Build for a Friend</a></em></p> <div class="markdown-heading"> <h2 class="heading-element">What I Built</h2> </div> <p>Traveling with friends is one of the most rewarding experiences in life—until the friction begins:</p> <ul> <li><em>"Wait, what is our next stop again?"</em></li> <li><em>"Who paid for the train tickets and how much budget do we have left?"</em></li> <li><em>"Did we visit that shrine or is it scheduled for tomorrow morning?"</em></li> </ul> <p>I built <strong>WanderMate</strong> for my friend Alex, an avid globetrotter who loves planning trips across different cities but always gets overwhelmed juggling messy group chats, clunky spreadsheet trackers, and fragmented note apps on the go.</p> <p><strong>WanderMate</strong> is a clean, lightweight, all-in-one <strong>Travel Buddy Web App</strong> that keeps trips effortless and organized:</p> <ol> <li> <strong>📍 Smart "Next Destination to Cover" Hero Banner</strong>: Automatically computes the immediate next unvisited itinerary stop or bucket list spot. It displays the day, scheduled time, helpful notes (e.g., <em>"Arrive early to beat morning</em>…</li> </ol></div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/ASRx13/WanderMate" rel="noopener noreferrer">View on GitHub</a></div> </div> <p><strong>GitHub Repository:</strong> <a href="https://github.com/ASRx13/WanderMate" rel="noopener noreferrer">https://github.com/ASRx13/WanderMate</a></p> <p>The project is structured with clean, dependency-free vanilla web technologies for lightning-fast loads and zero-setup deployment:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>├── index.html # Accessible semantic HTML5 layout, modals, and tab navigation ├── style.css # Responsive design system, CSS variables, glassmorphic cards ├── app.js # Reactive state manager, budget calculations, localStorage engine └── README.md # Complete setup and feature guide </code></pre> </div> <h3> Key Highlights: </h3> <ul> <li> <strong>Zero build steps required</strong>: Works out of the box by opening <code>index.html</code> in Chrome, Firefox, Safari, or Edge.</li> <li> <strong>Privacy First</strong>: 100% of itinerary notes and expense receipts remain stored in the user's browser via <code>localStorage</code>—no ads, no cloud trackers, no account signup hurdles.</li> <li> <strong>One-Click JSON Export</strong>: Allows travelers to download their itinerary and spending history anytime.</li> </ul> <h2> How I Built It </h2> <p>WanderMate was designed and implemented through pair-programming with the <strong>Antigravity AI Agent</strong> harness:</p> <ol> <li> <strong>Prompt-to-Architecture Formulation</strong>: <ul> <li>Specified core requirements: chronological itinerary management, a proactive "next stop" highlighter, and an intuitive travel expense logger.</li> </ul> </li> <li> <strong>Design System &amp; Aesthetics</strong>: <ul> <li>Implemented custom CSS tokens with an ocean cyan and sunset amber palette, subtle radial background glows, accessible contrast ratios, and glassmorphic cards.</li> </ul> </li> <li> <strong>Reactive Application Engine</strong>: <ul> <li>Built an event-driven <code>TravelApp</code> JavaScript class handling state mutation, automatic budget recalibration, category percentage calculations, and dynamic next-stop queue resolution.</li> </ul> </li> <li> <strong>Verification &amp; Hardening</strong>: <ul> <li>Verified JavaScript syntax via <code>node -c</code>, ensured HTML semantic hierarchy with unique identifiers, and established responsive breakpoints for mobile and desktop viewports.</li> </ul> </li> </ol> <h2> Why Does Open Innovation Matter? </h2> <p>Open innovation is the cornerstone of building software that truly respects human needs:</p> <ul> <li> <strong>No Walled Gardens or Subscriptions</strong>: Commercial travel apps lock basic features like offline access, multi-day itineraries, or expense tracking behind monthly subscriptions. Open-source, agentic development empowers anyone to build tailored software for their friends in an afternoon.</li> <li> <strong>Privacy &amp; Ownership</strong>: Travel logs contain sensitive personal location history, flight dates, and financial expenses. Because WanderMate is open and runs directly in the client browser, a friend's private itinerary never leaves their device.</li> <li> <strong>Modifiable &amp; Future-Proof</strong>: Anyone can clone, customize currency tags, add new transit integrations, or adapt the checklist for backpacking, road trips, or family vacations without fear of an API deprecation.</li> </ul> <h2> My Agent Session </h2> <ul> <li> <strong>Tooling Used</strong>: Antigravity IDE &amp; AI Pair Programming Agent.</li> <li> <strong>Workflow</strong>: Autonomous file generation (<code>index.html</code>, <code>style.css</code>, <code>app.js</code>), iterative code verification, syntax checking, local HTTP server orchestration, and comprehensive documentation creation.</li> </ul> <h2> Prize Categories </h2> <ul> <li><strong>Build for a Friend</strong></li> <li><strong>Open Innovation / Open Source Productivity</strong></li> </ul> devchallenge weekendchallenge hf26challenge