DEV Community: Malawige Inusha Thathsara Gunasekara

AI-Powered Calming Audio & Voice Companion for Dogs Home Alone

Malawige Inusha Thathsara Gunasekara — Sat, 15 Aug 2026 20:19:59 +0000

This is a submission for Weekend Challenge: Dog Days Edition

What I Built

Over 70% of dogs suffer from some degree of separation anxiety when their owners leave for work, errands, or travel. Symptoms include frantic barking, whining, pacing, destructive chewing, and prolonged stress spikes. Standard pet playlists on streaming platforms are static, repetitive, and lack the familiar reassurance pets crave most: their human's voice.

Paws & Peace is an intelligent, multi-platform sensory comfort system designed to give pets a peaceful home-alone experience. Available as both a modern web app and a native Android application, it combines:

Personalized AI & Owner Voice Loops: Using ElevenLabs AI Voice Synthesis, pet parents can generate warm, soothing voice messages with their pet's name, customized reassurance phrases, and fine-tuned stability and clarity. Owners can also record their real voices directly in the built-in Voice Studio.
Layered Procedural Soundscapes: Real-time synthesized pink-noise rainfall (to mask sudden doorbell and traffic sounds), a rhythmic maternal heartbeat simulator (60–70 BPM), and 432Hz harmonic drone frequencies scientifically proven to lower canine heart rates.
Intelligent Departure & Interval Loops: Paced session scheduler with configurable departure delays (e.g., starts 5 minutes after leaving) and recurring voice reassurance (e.g., repeating loving phrases every 3 minutes).
Biofeedback Breathing Visualizer: Luminous multi-ring ripple visualizer paired with live equalizers to create a tranquil visual atmosphere.
One-Tap Smart Presets: Instant audio mixes tailored for Thunder Shield, Bedtime Lullaby, Leaving Home, and Quick Nap.

Demo

Live Web Application: https://weekend-challenge-dog-days-edition-phi.vercel.app
Android Native APK: Download v2.0.0 APK

Web & Mobile Experience:

Web App: Glassmorphic, dark-mode responsive dashboard with Web Audio API procedural sound synthesis and Web Speech API fallback.
Android App: Native Jetpack Compose UI with AndroidX Media3 background foreground service that keeps soothing pets uninterrupted even when the device screen is locked.

Code

GitHub Repository: https://github.com/inusha-thathsara/Weekend-Challenge-Dog-Days-Edition---Home-Alone-Playlist

How I Built It

Building a truly effective sensory companion for dogs required blending canine psychoacoustics with modern cross-platform engineering.

1. Deep Integration with ElevenLabs AI Voice Synthesis

Voice is the strongest comfort cue for a dog. We integrated ElevenLabs' cutting-edge Text-to-Speech API to craft lifelike, warm voice tracks:

Turbo v2.5 Engine (eleven_turbo_v2_5): Upgraded synthesis to the newest ultra-low latency model (<300ms response time) with high throughput and lower credit usage.
Curated Soothing Voice Models: Selected gentle, calming voices (Rachel, Bella, Antoni, Domi, Elli) with adjustable Voice Stability (0.3 – 1.0) and Similarity / Clarity Boost (0.3 – 1.0) to achieve a soft, motherly or gentle fatherly cadence.
Auto-Retry & Rate Limit Handling: Implemented exponential backoff retry logic that catches burst rate limits (HTTP 429), waits 1.5 seconds, and transparently completes generation without failing.
Instant Audio Preview Engine: Embedded MediaPlayer (Android) and AudioContext (Web) previewers that immediately play synthesized tracks so owners can audit tone and volume before leaving.
Compile-Time Build Bridge: On Android, Gradle automatically reads VITE_ELEVENLABS_API_KEY from .env and injects it into BuildConfig, enabling zero-config out-of-the-box synthesis while still allowing user overrides in the Settings dialog.

2. Procedural Audio Synthesis (No Internet / No MP3 Loops)

Instead of streaming heavy, looping MP3 audio files:

Web: Implemented dynamic Web Audio API nodes with continuous pink noise buffers, a low-pass bi-quad filter, and an LFO oscillator for the rhythmic heartbeat.
Android: Engineered a native AudioSynthesizer using AudioTrack and direct PCM byte synthesis. This ensures zero network usage, minimal memory footprint, and infinite non-repeating acoustic variation.
Canine Acoustic Science:
- Pink Noise: Has equal energy per octave ($1/f$ spectral density), which matches canine hearing frequency curves and masks sudden acoustic triggers (thunder, sirens).
- Maternal Heartbeat: Low-pass filtered dual-pulse (lub-dub) at 65 BPM simulating a mother dog's calming presence.
- 432Hz Sine Harmonic: Calibrated sinusoidal frequency associated with parasympathetic nervous system activation.

3. Native Android Architecture (Jetpack Compose & Media3)

UI & Design System: Built with 100% Jetpack Compose and Material 3, featuring glassmorphism, responsive 50/50 segmented tab controls, custom equalizers, and glowing gradient action buttons.
Background Foreground Service: Implemented PlaybackService powered by androidx.media3.exoplayer and MediaSessionService. This ensures that even when the owner locks the phone or puts it on the counter, the soothing playlist continues running indefinitely with interactive lock-screen media controls.
State Management: Built on unidirectional Data Flow with HomeViewModel, Kotlin Coroutines, StateFlow, and Jetpack Preferences DataStore for instant persistence of pet profiles and voice preferences.

Built for dogs everywhere who deserve peace and comfort while waiting for their best friends to come home.

Production AI Dog Breed Identifier & Care Guide

Malawige Inusha Thathsara Gunasekara — Sat, 15 Aug 2026 17:38:43 +0000

This is a submission for Weekend Challenge: Dog Days Edition

Have you ever looked at a dog at the park or in an adoption shelter and wondered: "What breed is that, and what kind of care does it need?"

Meet BreedSnap, a production-grade, full-stack canine intelligence web application powered by Google Gemini Multimodal Vision AI. With just a single photo, BreedSnap instantly identifies the dog breed, scores temperament and energy traits, generates a veterinary-grade care guide, and lets you download a verified PDF breeding report with one click.

What I Built

BreedSnap transforms any canine photo into an actionable, comprehensive genetic and breed profile.

Instead of returning a simple text label, BreedSnap delivers a complete companion intelligence profile:

Instant Canine Visual Recognition: Snap a live photo using your phone's camera, drag and drop files from desktop, or test instantly with one-click canine presets (Golden Retriever, Siberian Husky, Pembroke Welsh Corgi).
Deep Breed & Heritage Breakdown: Pinpoints official breed names, historical origins, and confidence ratings with ~99% match accuracy.
5-Factor Trait & Temperament Scoring: Visual 5-point rating bars for:
- Energy Level
- Trainability & Intelligence
- Family & Child Friendliness
- Grooming Demand
- Barking Tendency
Veterinary Care Guide & Health Watchlist: Provides tailored daily exercise routines, coat maintenance frequency, dietary guidelines, adult weight/size specs, life expectancy, and a genetic health watchlist (e.g., hip dysplasia, IVDD, cataracts).
Canine Trivia & Heritage: Uncovers historical folklore and behavioral facts.
Downloadable Official PDF Report: Compiles a print-ready, high-resolution PDF certificate containing the dog's photo, visual rating bars, care matrix, and verification seal.
Voice Pronunciation: Native audio synthesis of complex breed names using the Web Speech API.
Persistent Scan History: Local storage-backed scan drawer allowing users to browse, reload, and re-export past analyses offline.

Demo

Live Application: https://weekend-challenge-dog-days-edition-nine.vercel.app
Source Code Repository: https://github.com/inusha-thathsara/Weekend-Challenge-Dog-Days-Edition---Breed-Identifier

Code

The entire codebase is open-source and available on GitHub:

Repository Link: https://github.com/inusha-thathsara/Weekend-Challenge-Dog-Days-Edition---Breed-Identifier

How I Built It

1. Architecture & Tech Stack

BreedSnap was designed with speed, privacy, and visual excellence in mind:

Frontend: Lightweight Vanilla HTML5, modern CSS3 (custom glassmorphism design system, Outfit & Plus Jakarta Sans typography, smooth micro-animations), and modular ES6+ JavaScript.
Backend API: Node.js & Express with rate-limiting middleware (express-rate-limit) to prevent API abuse and securely isolate the Gemini API key from the browser.
Serverless Ready: Native Vercel Serverless Functions (/api/identify.js, /api/status.js) and vercel.json for 1-click zero-config cloud deployments.
AI Vision Engine: Google Generative Language API (Gemini 3.1 Flash / Gemini 3.7 Flash).
PDF Engine: Client-side document compilation with html2pdf.js and CSS print media stylesheets (@media print).

2. Prompt Engineering & Structured Gemini Vision

To ensure consistent veterinary outputs, Gemini is guided with structured system instructions and responseMimeType: "application/json":

const prompt = `You are a world-class veterinarian and canine genetics expert. Analyze this dog photo carefully.
Respond strictly with valid JSON only (no markdown fencing, no backticks, no explanatory comments).

If the image clearly contains a dog, return:
{
  "isDog": true,
  "breed": "Official breed name (e.g. Golden Retriever, French Bulldog)",
  "confidence": "High (98%) / Medium (85%) / Low (60%)",
  "origin": "Country / Region of origin",
  "summary": "Engaging 2-3 sentence overview of this breed's character and heritage.",
  "temperament": ["Trait 1", "Trait 2", "Trait 3", "Trait 4"],
  "size": "Size category and typical adult weight range (lbs & kg)",
  "lifespan": "Typical life expectancy in years",
  "ratings": {
    "energyLevel": 1-5,
    "groomingDemand": 1-5,
    "trainability": 1-5,
    "childFriendliness": 1-5,
    "barkingTendency": 1-5
  },
  "careGuide": {
    "exercise": "Recommended daily exercise schedule and activity types",
    "grooming": "Coat maintenance and grooming frequency",
    "nutrition": "Dietary requirements or sensitivities",
    "healthWatchlist": "Common genetic health conditions to monitor"
  },
  "funFacts": [
    "Fascinating historical or behavioral trivia item 1",
    "Fascinating historical or behavioral trivia item 2"
  ]
}

If the image does NOT contain a dog:
{
  "isDog": false,
  "message": "A friendly, witty description of what is actually visible in the image."
}`;

3. Resilient Multi-Model Fallback Cascade

To guard against high-demand traffic spikes and quota limits, the backend implements an automatic fallback cascade across Gemini models:

gemini-3.1-flash-lite (ultra-fast latency & high throughput)
gemini-3.7-flash (deep multimodal reasoning)
gemini-3.5-flash (high-capacity fallback)

If any model encounters high demand or temporary unavailability, the request seamlessly transitions to the next model without failing the user experience.

4. Official PDF Report Generation

Rather than a simple screenshot, clicking Download PDF Report dynamically constructs a high-resolution, branded certificate offscreen, formatting:

The analyzed dog's photo
Official breed title & match badge
Visual 5-star trait rating bars
3-column care guide matrix
Health watchlist alert box
Official diagnostic verification stamp

What's Next for BreedSnap?

Multi-Dog Detection: Identifying and segmenting multiple dogs in a single group photo.
Mixed Breed Percentage Estimator: Estimating heritage percentages for rescue and cross-breed dogs.
PWA Support: Full offline caching with installable mobile home-screen capabilities.

Thank you for reading! Feel free to check out the live demo and share your feedback in the comments.

Building an Adjarian Khachapuri in Pure CSS

Malawige Inusha Thathsara Gunasekara — Sat, 15 Aug 2026 15:44:58 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

My comfort-food inspiration for this project was Adjarian khachapuri, the iconic Georgian cheese bread with a golden crust and a molten egg yolk resting in the center. It feels like a warm, homemade hug: rich, cozy, and deeply comforting. I wanted to recreate not just the look of the dish, but the feeling of it being fresh from the oven.

I love how food can be a story in itself, and this challenge gave me a chance to turn a favorite comfort dish into a tiny scene built entirely with HTML and CSS. The goal was to capture the softness of the cheese, the warmth of the crust, and the playful glow of the yolk through gradients, shadows, and subtle motion.

Demo

This project is a pure CSS illustration of an Adjarian khachapuri, built with layered shapes and gradients rather than external images or assets.

Live demo: GitHub repository

If you want to view it locally, just open the project in a browser and interact with the yolk to trigger the jiggle animation.

Journey

This project started as a simple challenge: create a food illustration using only CSS. I quickly realized that the real magic was in the details. The crust needed warmth and depth, the cheese needed softness and texture, and the yolk needed to feel glossy and slightly luxurious without relying on any images.

I spent most of my time refining the gradients and shadows to give the khachapuri a more realistic, premium look. The crust is built with warm browns and highlights to mimic baked dough, while the cheese uses soft ivory tones and subtle highlight bubbles to create a melted, creamy effect. The yolk is the focal point, and I added a small jiggle animation so the composition feels alive and playful.

One thing I’m especially proud of is the way the illustration still feels simple and clean even with the detailed shading. It stays very CSS-first, but it has enough contrast and texture to feel like a polished food shot.

I also learned how much personality can come from small design choices: the steam, the shadow beneath the board, the wobble of the bread, and even the tiny highlights on the cheese. These details make the illustration feel warm and appetizing rather than rigid or flat.

This project reminded me that CSS art is not just about drawing shapes. It is about crafting emotion. A comfortable, believable composition can do a lot with color, depth, and motion alone.

I hope to keep exploring more food-themed CSS illustrations in the future, especially ones that focus on texture and storytelling. It has been a really fun way to combine design, illustration, and front-end development.

Thanks for reading, and if you love warm comfort food as much as I do, I hope this little khachapuri made you smile.

Building a 60fps Scroll-Driven Showcase with Vanilla HTML, CSS, and GSAP

Malawige Inusha Thathsara Gunasekara — Fri, 14 Aug 2026 09:02:05 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

For this challenge, I built A World of Warmth, an editorial, scroll-driven landing page and mythic codex celebrating comfort food as a universal language of love, nostalgia, and human connection. Rather than creating a standard restaurant site or commercial meal-delivery platform, I wanted to craft an immersive digital publication that treats comfort food not merely as sustenance, but as "history served hot." The experience begins with a full-viewport hero scene bathed in warm candlelight and ambient tones, setting an intimate, candlelit tone that invites visitors to embark on a culinary journey across six continents.

To capture this spirit, the landing page is structured into six full-bleed chapter stories featuring Japanese Tonkotsu Ramen, American Baked Mac & Cheese, Indian Dal Khichdi, French Pot-au-Feu, West African Party Jollof Rice, and Mexican Pork Tamales. Each chapter weaves together origin lore, flavor profiles, and rich imagery, paired with a word-by-word scroll manifesto and an interactive infographic breaking down the real neuroscience behind why comfort food makes us feel so safe and happy.

Demo

Click on above image for the Demo. 🔝

Source Code: Github

Journey

My journey building A World of Warmth began with a clear goal: to avoid creating a simple minimum viable product and instead engineer a complete, magazine-quality web experience that wows users visually while delivering rock-solid frontend fundamentals. Throughout the development process, I learned invaluable lessons about orchestrating complex scroll-driven animations and balancing hardware-accelerated motion with robust fallback systems. Integrating GSAP ScrollTrigger taught me how to fine-tune scroll scrubbing, word-by-word text color reveals, and multi-layered image parallax without triggering layout thrashing or dropping frames. What I am most proud of in this project is the seamless fusion of high-end visual polish with lighthearted, creative storytelling. Watching the project transform from a visual editorial landing page into an interactive Mythic Recipe Codex where clicking a card reveals absurd data like 4,000-year-old eclipse bones and 420-lightyear cook times brought an unexpected layer of joy and humor to the user experience.

Thank You!

Translating Culinary Comfort into Pure CSS Art

Malawige Inusha Thathsara Gunasekara — Fri, 14 Aug 2026 07:45:45 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

Ramen is the ultimate universal comfort food: rich, layered, and crafted with meticulous attention to detail. This project set out to translate that directly into front-end architecture. Inspired by the cozy ambience of traditional Japanese ramen counters, Midnight Ramen Bar channels complex CSS gradient math, 3D transform matrices, and keyframe turbulence into a living work of digital art. By replacing every pixel of traditional image assets with native CSS vectors, the artwork bridges the gap between technical precision and pure visual comfort.

Demo

inusha-thathsara.github.io

Journey

Building Midnight Ramen Bar started with a challenge: create a photorealistic artwork using zero raster images. I deconstructed a physical bowl of ramen into distinct optical layers: ceramic bowl geometry, broth depth, submerged noodles, oil beads, artisanal toppings, and rising steam clouds.

Every texture was constructed using pure CSS primitives. Finally, I added a lightweight JavaScript presentation layer for 3D mouse parallax tracking , dynamic room lighting switches, and a live CSS wireframe inspector.

I plan to expand this into a full CSS Comfort Food Collection (like a steaming stack of pancakes with melting butter or a hot slice of pie), explore CSS Houdini Paint Worklets for procedural textures, and build an interactive 3D culinary customizer.

Thank You!

Deconstructing the 2026 Maritime Chokepoint Crisis With a Prioritized SWOT Framework

Malawige Inusha Thathsara Gunasekara — Sat, 18 Jul 2026 18:12:38 +0000

Geopolitical volatility isn't just a headline—it is a brutal stress test for global supply chains. When critical maritime chokepoints face sudden closure, the cascading disruptions hit transshipment hubs with unforgiving speed.

As part of our submission for the INFINITY 7.0 Inter-University Case Study Competition, our team, Case Closed, dived deep into a high-stakes scenario: The 2026 Global Maritime Disruption & Sri Lankan Port Capacity Crisis.

Here is a look at the data, the bottlenecks we uncovered, and the architectural recommendations we proposed to future-proof regional port infrastructure.

1. The Anatomy of the Disruption

The baseline architecture of global shipping relies heavily on the hub-and-spoke model. However, the fatal flaw of this model is its vulnerability to single geographic chokepoints.

When the Strait of Hormuz (which handles roughly 20% of the world's oil and LNG) and the Red Sea/Suez Canal route face severe restrictions or closures, the maritime network experiences immediate systemic shock:

Massive Physical Rerouting: Ocean carriers are forced to divert around the Cape of Good Hope, adding 10 to 15 days of transit time per voyage.
Asset Stranding: These extended transit times trap critical equipment (vessels and empty shipping containers) in transit, triggering an acute global container shortage.
The Transshipment Influx: Rerouted cargo suddenly shifts toward alternative hubs like Colombo, Singapore, and Jebel Ali, pushing their operational capacities to the absolute limit.

2. The Bottleneck: Colombo's Capacity Crisis

When Middle East chokepoints restricted traffic, the Port of Colombo experienced a massive, sudden demand surge, seeing a 20% volume growth within a tight February-to-April window, hitting over 761,000 TEUs in a single month.

This sudden volume spike exposed critical infrastructure vulnerabilities:

[Global Disruptions] ──> [Sudden Rerouting to Colombo]
                                │
                                ▼
               [Transshipment Exceeds 80% of Ops]
                                │
                                ▼
                  [Extreme Yard Overcrowding]
                                │
                                ▼
              [2-3 Day Berthing Delays for ULCVs]
                                │
                                ▼
             [Carriers Begin Bypassing the Port]

With transshipment exceeding 80% of total operations, the physical yard space reached maximum inelasticity. The resulting 2-to-3-day berthing delays meant global carriers began completely bypassing the port, risking Colombo's long-term competitive position.

3. The Analytical Framework: Prioritized SWOT

Instead of relying on a standard, text-heavy SWOT matrix, we utilized a Prioritized SWOT and Matrix Strategy to weigh impacts mathematically and determine which moves yielded the highest strategic ROI.

Matrix Quad	Strategy Focus	Implementation Framework
SO Strategy	Expand Land Bridges	Leverage global fleet adaptability to scale multi-modal overland routes (e.g., the Saudi Landbridge) to bypass maritime blockades.
WO Strategy	Accelerate Green Transition	Shift toward sustainable maritime fuels and dual-fuel vessels to buffer against volatile fossil fuel pricing and emergency bunker surcharges.
ST Strategy	Agile Fleet Rerouting	Permanently optimize Cape of Good Hope alternative routing paths to eliminate total logistical paralysis during multi-chokepoint closures.
WT Strategy	Abandon Just-In-Time (JIT)	Move aggressively away from lean inventory models, increasing safety stocks and diversifying supply chains away from high-risk zones.

4. Engineering a Resilient Logistics Ecosystem

To solve physical bottlenecks, a port cannot rely solely on expanding concrete footprint; it must optimize its digital and logical infrastructure. We proposed six core architecture upgrades for the regional maritime ecosystem:

⚡ 1. Fully Digital "Single Window" Customs

Eliminating paper silos by creating a unified API-driven clearing platform. Digitizing documentation removes friction before the cargo even hits the yard.

🤖 2. Scale Terminal Automation & AI Scheduling

Implementing AI-driven dynamic scheduling to handle inter-terminal transfers. Automated crane deployments and predictive yard slotting allow the port to maximize its existing footprint even under heavy stress.

🌐 3. Build a Multi-Port Ecosystem

Actively diverting excess container and RoRo (Roll-on/Roll-off) traffic south to Hambantota Port. Treating national ports not as isolated competitors, but as a load-balanced network, allows the region to absorb massive volume spikes without failing entirely.

Conclusion: Moving Past "Just-In-Time"

The core takeaway from this case study is clear: Lean inventory systems are incredibly fragile. In an era of increasing geopolitical and climate instability, supply chain architecture must pivot from Just-In-Time efficiency to Just-In-Case resilience. By embracing terminal automation, regional port collaboration, and data transparency, logistics hubs can convert a global crisis into a massive operational opportunity.

We are proud to share that this framework secured our team a spot in the upcoming round of **INFINITY 7.0! If you're working in supply chain tech, logistics optimization, or AI-driven scheduling, I’d love to connect in the comments and hear how you approach system resilience.

🔗 View our full presentation slide deck here

Reverse-Engineering an Old Node.js Crossword App into a Modern Next.js Stack

Malawige Inusha Thathsara Gunasekara — Mon, 22 Jun 2026 15:30:39 +0000

As an IT undergrad at the University of Moratuwa, I’ve built my fair share of projects. Recently, I looked back at an old project of mine—a traditional Node.js Crossword App and realized it was time for a complete teardown.

The old app worked, but the architecture felt dated. I wanted to modernize it, improve the performance, and implement a cleaner, editorial-style UI. Instead of just refactoring, I decided to reverse-engineer the core logic of my own app and rebuild it from the ground up using Next.js 16, Neon PostgreSQL, Better Auth, and v0 by Vercel.

Here is how I broke down the legacy system and engineered the new application, Crosshatch. You can check out the live deployment here: crossword-web-app.vercel.app

The Teardown: Reverse-Engineering the Core Loop

When reverse-engineering an existing app—even your own—the goal is to separate the underlying business logic from the legacy plumbing. I ignored the old routing and view layers and focused entirely on the data structures and the game loop.

I identified three critical systems that needed to be extracted and modernized:

Grid Generation: How words intersect and fit into a 10x10 matrix.
State Management: Tracking user input, active cells, and directional navigation (Across vs. Down).
Session & Progress: How to persist a user's progress without hammering the database.

Once I had the core logic mapped out, I started the rebuild.

Accelerating the UI with v0

I wanted the new app to have a calm, newspaper-inspired light theme. To move fast, I leveraged v0 by Vercel to generate the initial React components.

By prompting v0 with my required game state constraints (e.g., handling keyboard events like Tab, Shift+Tab, and arrow keys for navigation), I was able to rapidly prototype the 10x10 interactive grid. v0 handled the Tailwind CSS boilerplate, allowing me to focus on wiring up the complex state machine using a custom useCrossword React hook.

The Modern Stack & Architecture

With the UI taking shape, I built out a robust backend architecture to support it.

Framework: Next.js 16 (App Router)
Database: Neon PostgreSQL with Drizzle ORM
Authentication: Better Auth (handling secure email/password flows and session management)

Here are the key technical problems I had to solve during the rebuild:

1. Deterministic Puzzle Generation

In the old app, puzzle generation could be unpredictable. For the new build, I implemented a Seeded RNG algorithm. By using the puzzle's ID (e.g., animals-1) as the seed, the generation is completely deterministic. It shuffles the word list, places the first word at (0,0), and maps intersecting cells. If you and a friend both load animals-1, you are guaranteed to get the exact same layout.

Because generating a puzzle is CPU-intensive, I implemented a caching layer. The server generates the puzzle once, caches it in a Map, and serves it instantly on subsequent requests.

2. Smart Autosave & The Visibility API

Losing crossword progress is frustrating. I built a system that autosaves every 5 seconds. To prevent excessive database writes, I used a PostgreSQL UPSERT pattern via Drizzle:

INSERT INTO puzzle_progress (userId, puzzleId, entries, elapsedSeconds)
VALUES ($1, $2, $3, $4)
ON CONFLICT (userId, puzzleId)
DO UPDATE SET entries = $3, elapsedSeconds = $4, updatedAt = now()

Additionally, the puzzle timer uses the browser's Visibility API. If you switch tabs, the timer automatically pauses, ensuring your "Solve Time" stats remain accurate to your actual active playtime.

3. Data Integrity: The "No Double-Credit" Problem

I built a user dashboard to track completions, best times, and average solve times. But what happens if a user submits the same completed puzzle twice?

Instead of writing complex application-level checks, I let the database handle it. I added a unique constraint on (userId, puzzleId) in the completion table and utilized the ON CONFLICT DO NOTHING clause. If a user solves a puzzle for the first time, it records their time. If they re-submit it, the database ignores the insert, returning a response that acknowledges the correct answers without skewing their dashboard analytics.

Final Thoughts

Reverse-engineering an older project and rebuilding it with modern tooling is one of the best ways to measure your growth as a developer. By moving to Next.js and leveraging v0 for rapid UI prototyping, I was able to spend my time solving actual engineering problems (like deterministic generation and state synchronization) rather than wrestling with basic CSS.

Check out the live app at crossword-web-app.vercel.app and let me know what you think of the architecture! I’m always open to technical feedback.

Stop Funding History: Building a Demand Prediction App to Optimize Trade Spend

Malawige Inusha Thathsara Gunasekara — Mon, 22 Jun 2026 15:00:24 +0000

Let’s be honest: in the FMCG (Fast-Moving Consumer Goods) space, trade marketing budgets are almost always misallocated. Companies tend to fund invoice history rather than actual potential.

For the DataStorm 7.0 competition, our team, Stack Kings, decided to stop guessing and start modeling latent demand. We built an analytics pipeline and a Next.js field app to optimize a LKR 5M trade spend across 20,000 retail outlets in Sri Lanka. Here is the unvarnished breakdown of how we achieved a +253% lift over a naive budget allocation.

The "Empty Shelf" Problem (Right-Censoring)

The core data science issue here is a concept called right-censoring. The monthly sales volumes we observed in the 2.3M transaction records were just a lower bound. If a small shop shows low sales, it might just be under-stocked or credit-constrained, not lacking in customer demand.

Because of this, standard averages systematically underestimate a shop's true potential. Instead of using standard textbook models like Tobit—which require strict indicators of exactly when a shop ran out of stock (which we didn't have)—we built an ensemble model.

We took a two-pronged approach:

Lookalike Clustering: We clustered similar outlets to see what the top performers in that specific group were achieving, assuming that less-constrained shops reveal the true ceiling.
Upper-Tail Regression: We used a specific type of regression (Quantile Regression) designed to estimate the maximum possible demand based on a shop's features, rather than the average.

Taking the maximum of these two estimates ensured we weren't artificially pulling down a shop's potential.

Mapping the Real World (Spatial Features)

To give the models a real signal, we engineered spatial features using OpenStreetMap Points of Interest (POIs).

Rather than using arbitrary "flat disk" counts—like just counting how many shops are within a 3km radius—we implemented a distance-decay model. In plain English: a bus stop 200 meters away matters a lot more to foot traffic than one 2 kilometers away.

We grouped locations into tiers. Transport and food places have a "fast" drop-off in influence, meaning you need to be right next to them to get the benefit. Meanwhile, schools and temples cast a wider, "slower" net of influence over the entire neighborhood.

Squeezing Every Drop of Budget (The Optimizer)

Ranking outlets by potential isn't enough; you need to maximize the incremental liters gained per rupee spent.

We modeled the volume response to trade spend as a curve with diminishing returns. Simply put, the more you spend on a single shop, the less extra volume you get for your next rupee.

To solve this efficiently across 9,000 Western Province outlets, we broke that curve into straight-line segments. This allowed us to use a Linear Programming solver to allocate the LKR 5M budget mathematically perfectly. The result? A massive 253% lift compared to the standard gut-feel approach of just splitting the money evenly among top shops.

Building Trust with the Field App

stackkings.inusha.me

A complex optimizer is useless if field sales reps don't trust the numbers. They need to know why a shop is getting a certain budget.

We built a live Outlet Intelligence Web App using Next.js and Postgres. To explain the outputs, we added an Explainable AI (XAI) layer. It uses a local Ollama process (gemma3:1b) running in the browser to generate a structured SWOT summary. If the local AI is offline, it falls back to a Gemini cloud API or a safe deterministic template.

Crucially, the AI doesn't make the predictions. It simply translates our hard, pre-computed data into plain business language so the sales reps can actually use it on the ground.

The Dirty Reality of Data

Data engineering isn't glamorous. We built a strict Medallion architecture. We didn't silently drop messy data. We explicitly quarantined 37,205 records using failure reason codes. We even retained 7,417 "blackout" outlets (shops with zero December transactions), treating them correctly as supply signals rather than zero demand.

Check out the live production app at stackkings.inusha.me

We don't fund history. We fund potential.

I Made Tyre Size Detection App Using Gemma4:e4b

Malawige Inusha Thathsara Gunasekara — Tue, 19 May 2026 18:21:37 +0000

This is a submission for the Gemma 4 Challenge: Build with Gemma 4

What I Built

NewTyre-AI is a secure, localized full-stack web application designed to automate a deceptively complex industrial task: passenger vehicle tyre sidewall size extraction.

The Problem

Traditional computer vision pipelines frequently default to cloud-dependent architectures to process visual data. While convenient, this approach introduces persistent operational liabilities for businesses: recurring cloud API bills, data transit latencies, and corporate data privacy exposure. Furthermore, reading alphanumeric characters from a tyre sidewall is difficult for traditional linear Optical Character Recognition (OCR) tools because text printed on rubber is non-linear, low-contrast, heavily textured, and curved.

The Solution

NewTyre-AI solves this by shifting the entire visual processing workload onto a local, physical on-premise company server. The system ingests sidewall photos, filters them through a localized multimodal edge model, and returns an un-hallucinated, deterministic 9-character tyre size code (e.g., 205/60R16) to the technician with zero ongoing cloud compute or external API costs.

Demo

Video Demo(30 sec): Google Drive

Code

GitHub Repo

How I Used Gemma 4

For this project, I deliberately selected the Gemma4:e4b (Effective 4B) parameter model rather than scaling up to the massive dense weights or downgrading to the highly lightweight e2b version. 2B model lack the visual cross-attention layer density required to accurately map characters in noisy geometric layouts, while 32B model is a overkill. The e4b model retains the precise structural transformer resolution required to read curved, dirty text on dark rubber cylinders without throwing a wave of false positives.

Built an AI Study Tool That Refuses to Give You the Answers for UoM

Malawige Inusha Thathsara Gunasekara — Sun, 01 Mar 2026 17:10:22 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

I am an IT undergraduate at the University of Moratuwa(UoM), Sri Lanka. In our community, the night before a brutal technical exam is chaotic. When faced with a massive, complicated past-paper question that we don't understand, students often hit a wall of panic and just give up (we call it going "Bora").

The problem with existing AI study tools is that they just give you the final answer or the raw code. That doesn't help you learn; it just helps you cheat. I wanted to build a tool for my batchmates that acts like a senior student holding a late-night study session(a "Kuppi") guiding you to the answer without actually giving it to you.

What I Built

I built Triage AI, a cross-platform (Next.js Web + Flutter Android) tool designed specifically for technical exam preparation. You simply snap a photo of a difficult past paper question, and the app uses AI to break it down.

Instead of solving the problem, it returns three specific things:

Core Concepts: The exact fundamental topics you need to Google to understand the question.

The Trap: It identifies the subtle pitfall or trick hidden in the question designed to make students fail.

Attack Plan: A step-by-step strategic breakdown of how to approach the solution.

If you are still stuck, Triage AI features a "Practice" mode that generates a similar question, and a "Hint" system that provides progressive, helpful nudges (never the answer) to get you unblocked.

Demo

Live: Vercel
This weekend sprint proved to me that AI doesn't have to be a shortcut that ruins learning. When built with the right constraints, it can be the ultimate teaching assistant.

Code

Source Code: Github

How I Built It

Balancing this weekend challenge with my strict university workload was tough. As an IT undergraduate, I couldn't afford to ignore my own university assignments to build an app. Because I was juggling coursework and only had the weekend to code, I needed to keep the technical setup extremely lean and fast.

The Brain: I used the Google Gemini 2.5 Flash API because it can process uploaded images incredibly fast.

The Logic: I built a Next.js application to handle the requests. I wrote strict prompts and set up Gemini to return structured data, which made it easy to display the results in clean UI cards.

The App: The Next.js backend powers both a smooth React web app and a native Flutter Android app(kinda buggy though) at the same time.

Aside from time management, the hardest technical challenge was the Hint System. To ensure the AI didn't repeat itself or accidentally reveal the answer, the app keeps track of the clues you've already seen. It sends this history back to Gemini so that the next hint is a progressively more specific nudge in the right direction.

Good luck with exams, batchmates!

How I Built a 15,000+ Line Flutter App with Gemini to "Hack" My University Attendance

Malawige Inusha Thathsara Gunasekara — Wed, 25 Feb 2026 18:55:37 +0000

This is a submission for the Built with Google Gemini: Writing Challenge

What I Built with Google Gemini

As an IT undergraduate balancing startup ambitions and a heavy coursework load, missing too many classes can lead to disastrous exam bans. To solve this, I built Attendance Tracker (code-named "The 80%"). It's a cross-platform Flutter application designed to mathematically optimize university attendance using offline-first storage and AI.

The app features a "Danger Zone Planner" that calculates the exact margin for absences across specific sessions (Lectures, Labs, Tutorials). This allows students to simulate granular scenarios and understand their attendance buffer, ensuring they never accidentally drop below their mandatory academic thresholds.

Google Gemini played a massive, two-fold role in this project:

The Architecture (Agentic AI): This project scaled to over 15,000 lines of code. I used the Gemini 3 Pro (High) model inside the Antigravity IDE as an autonomous coding agent to help architect the offline-first database (Hive), manage state (Provider), and handle complex UI animations.
The Core Feature (API Integration): The biggest friction point in attendance apps is manual data entry. I integrated the Gemini 2.5 Flash API to handle multimodal timetable extraction. Users simply upload their official university schedule as a PDF or image, and Gemini intelligently parses the unstructured data into a clean matrix of subjects, times, and session types.

Demo

You can experience the live web app directly in your browser:

Live Web App: Attendance Tracker Web

Source Code: GitHub Repository (Only the Demo source code is available with the latest apk releases)

Screenshot:

What I Learned

Building a 15,000+ line production app taught me several critical lessons:

Background Asynchronous Processing: Because parsing detail-heavy timetable PDFs via the Gemini API can take time, I had to learn how to run these complex tasks in the background. This ensures the UI doesn't freeze, allowing users to navigate the app while waiting for an in-app "Timetable Ready" notification.
Defensive Engineering: AI isn't perfect. I learned to build a robust "Draft Review" step so users can verify and edit the AI's extracted timetable before committing it to the Firebase database.
System Design: Implementing an offline-first architecture with Hive local caching and syncing it seamlessly with Firebase Firestore taught me how to handle complex data states across varying network conditions.

Google Gemini Feedback

The Good:
The multimodal capabilities of gemini-2.5-flash are incredible. It flawlessly handled messy, poorly formatted university PDFs and images, turning unstructured visual data into a clean, usable dataset. Using Gemini 3 Pro (High) as an agentic coding partner felt like having a senior engineer on call, saving me weeks of boilerplate coding and UI tweaking.

The Bad and The Ugly:
When you let an AI agent loose on a 15,000-line codebase, you push context windows to their absolute limits. Occasionally, the IDE agent would lose the thread of the architecture, hallucinating variable names or forgetting how distant files interconnected.

On the API side, relying heavily on Gemini 2.5 Flash for file parsing introduced the reality of rate limits. To prevent the app from breaking for users during high-traffic periods, I had to engineer a Multi-API Key Support system, allowing the app to rotate through different user-provided Gemini keys to ensure uninterrupted parsing. Additionally, highly non-standard timetable layouts occasionally confused the model, making the manual draft review step an absolute necessity. Overall, it's a powerhouse, but it requires strict guardrails in a production environment.

The Shores of Denial – The World that Shouldn't Exist

Malawige Inusha Thathsara Gunasekara — Fri, 23 Jan 2026 13:23:07 +0000

My Voluntary Descent

When I first stepped onto the Fort Oasis pier as Tyler, the atmosphere was immediately suffocating. My first instinct wasn't to explore, it was to leave. I was given the functioning boat , then took the exit, and triggered the ending within minutes. But as the credits rolled, I realized I hadn’t actually played the game; I had simply committed a "coward’s move." I chose the "Safe Lie" because the reality of the island was too unsettling. I believe everyone have tried that in their first playthrough.

On my second run, I refused the boat. I stayed because I wanted the content. By staying, I felt like I was actively validating Tyler’s internal chaos. The game stopped being a survival horror and started feeling like a psychological autopsy I was performing on myself.

Navigating a Broken Mind

As I explored Fort Oasis, I realized it isn't just a game with a map; there are some metaphors. Since the game doesn't tell us the direct story, I explored the internet and found that the story explains about the terminal disease and the depression on the character I'm playing. I began to see the environment as a manifestation of Tyler’s isolation:

The Mining Colony: This is the skeletal remains of a life once filled with productivity and purpose, now hollowed out.
The Rot: The black, organic corruption "overwrite" the walls was visceral. It’s the visual language of a terminal illness that doesn't just inhabit the world but replaces it.
The Permafrost: The cold represents an emotional numbness I think Tyler uses to shield himself from the memory of Leda’s love (Leda is Tyler's wife). It is the "Distant Embrace" of a death that has already begun.

The Realization of the Mission

In the beginning, I followed the story believing I was on a rescue mission. However, the deeper I went, the more I felt manipulated. I wasn't there to save a colony; I was there to witness the final shutdown of me(actually the Tyler).

The most haunting part of my experience was the silence. Before the monsters ever appeared, the weight of being all alone in a dying world was more terrifying than any jump-scare. That silence is the bridge between Tyler’s past and the "Total Chaos" of his current mental state and the void left behind when love is replaced by a diagnosis.