DEV Community

Prabakaran
Prabakaran

Posted on

Walk and Relax - Ready for relaxation, walking workouts, and bedtime viewing.

#devchallenge #hf26challenge

Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady Submission 🦥

Walk&Relax — Hacktoberfest DEV.to Submission

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

What I Built

Walk&Relax is an all-in-one relaxation, mindful walking, and bedtime sanctuary web application.

Modern wellness routines often force you to juggle three separate subscription-heavy apps:

  1. A sound machine app for sleep or study background noise.
  2. A fitness app to count steps and calories burned during evening walks.
  3. A bedside alarm or nightstand clock app with a sleep timer.

Walk&Relax replaces all three with a unified, lightweight, zero-subscription web application:

  • Procedural Nature Sound Mixer: 100% offline procedural Web Audio synthesis for rain, forest wind, bird calls, mountain streams, crackling campfires, night crickets, ocean swells, thunder, brown noise, and 432Hz delta sleep resonance. No external MP3 downloads, no buffering, and no streaming drops.
  • Hands-Free Walking Pedometer & Calorie Counter: Leverages mobile device accelerometer hardware (DeviceMotionEvent) to detect steps in pocket or in hand with calibrated MET (Metabolic Equivalent of Task) calorie burn formulas based on your body weight and stride length. Also includes an indoor treadmill/cadence pace mode (90, 115, 135 SPM).
  • Bedtime Sleep Timer with Logarithmic Audio Fade: Set a timer for 15, 30, 45, 60, or 90 minutes. In the final minutes of playback, the audio gracefully and smoothly fades to silence without abrupt cuts that might jolt you awake.
  • Ultra-Dim OLED Bedtime Clock: Pure #000000 pitch-black background with warm candle-amber or soft moonlight typography, adjustable display dimmer slider (down to 15% luminance), and auto-hiding controls to prevent nightstand eye strain. Includes a guided 4-7-8 breathing pacer to help you drift off.

Who gets to be a little lazier because of it?
Anyone who wants to relax without fumbling through menus, managing multiple app subscriptions, or waking up at 2 AM to manually turn off their sound machine. You set your timer, slip your phone into your pocket for an evening stroll or place it on your nightstand, and let Walk&Relax quietly handle pacing, tracking, dimming, and fading out.

Demo

Code

The complete source code is open-source and structured for easy local development or static hosting on Render:

  • Repository: walk-and-relax
  • Key Architectures:
    • src/audio/soundEngine.ts: Web Audio API graph synthesizers (BiquadFilter, BufferSource, GainNode, OscillatorNode).
    • src/hooks/usePedometer.ts: Real-time mobile motion sensor listener with magnitude peak detection.
    • src/hooks/useSleepTimer.ts: Countdown timer with automated audio gain interpolation curve.
    • src/components/BedtimeClock.tsx: Fullscreen OLED bedside nightstand clock with 4-7-8 relaxation guide.
    • render.yaml & .npmrc: Automated 1-click Render blueprint with SPA routing and peer dependency safety.

How I Built It

Walk&Relax was architected using an AI-assisted engineering workflow within Google AI Studio Build:

  1. Procedural Web Audio Graph (Zero Audio Files):
    Instead of bundling large, fragile MP3 audio files or relying on external cloud CDN streams that can fail offline, the audio engine generates soundwaves on the fly using the browser's native AudioContext:

    • Rain & Stream: Dual pink noise buffers with highpass/lowpass biquad filters and randomized droplet oscillator impulse clicks.
    • Forest Wind: Brown noise filtered with a slow 0.12Hz Low-Frequency Oscillator (LFO) creating dynamic gust swells.
    • Woodland Birds: Frequency-modulated sine oscillator bursts sweeping between 2,200Hz and 3,600Hz at natural intervals.
    • Campfire: Warm lowpass noise paired with periodic triangle wave crackles and ember pops.
    • Summer Crickets: 4,600Hz sine tone modulated by an 18Hz tremolo oscillator.
    • 432Hz Delta Sleep: Harmonic binaural tone generator offset by 2.5Hz to stimulate delta wave sleep induction.

  2. Mobile Motion & Accelerometer Engine:

    • Analyzes real-time 3D acceleration vectors $\sqrt{x^2 + y^2 + z^2}$ via devicemotion.
    • Filters out micro-jitters with a lowpass filter and 260ms minimum refractory window to accurately isolate legitimate footsteps.
    • Computes calories burned using the scientific MET formula ($kcal = \text{MET} \times 3.5 \times \text{weight} / 200 \times \text{minutes}$).

  3. Frontend Stack & Styling:

    • React 19 & TypeScript: Strict type safety and state hooks.
    • Tailwind CSS v4 (@tailwindcss/vite): Clean dark-mode aesthetics, custom OLED black layouts, and zero-pill typographic discipline.
    • Lucide React & Motion: High-contrast, tactile iconography and smooth transitions.
    • Render.com Blueprint: Complete Infrastructure-as-Code render.yaml with SPA rewrite rules (/* -> /index.html) and Node 20 runtime locking.

Why Does Open Innovation Matter?

Open innovation and open-standard web technologies are the foundation of what makes an application like Walk&Relax possible:

  • No Paywalls or Closed Ecosystem Locks: Most ambient sound and step-tracking apps lock basic features (custom sound mixing, sleep timers, dark OLED modes) behind recurring monthly subscriptions. By utilizing standard, open Web Audio and device motion APIs, we deliver a superior, private experience that runs directly on any device without account walls or trackers.
  • Privacy First & Local Storage: Walk&Relax stores all your activity logs and preferences in local browser storage. Your fitness and sleep data never leaves your device and is never harvested by third-party ad networks.
  • Zero Heavy Infrastructure Footprint: Open procedural audio synthesis requires virtually zero bandwidth after the initial page load (only a few kilobytes of HTML/JS), compared to closed streaming platforms that continuously consume server bandwidth and battery life.

My Agent Session

This application was planned, designed, implemented, and refined end-to-end with the Google AI Studio Build assistant:

  • Planning Mode: Formulated an architectural implementation plan specifying procedural sound design, pedometer algorithms, and OLED UI ergonomics.
  • Execution: Built the complete procedural audio engine, pedometer motion filters, and bedtime view.
  • Refinement: Configured non-intrusive muted page loads, synchronized the app title to Walk&Relax, and resolved npm peer dependency resolutions for Render.com deployment.

The Lazy Payoff

"Slow and Steady" is about conserving energy and doing more with less effort:

  • Saved Time & Context Switching: Instead of opening Spotify for rain sounds, opening a fitness tracker to count a walk, and setting an alarm app sleep timer, you launch Walk&Relax with one tap.
  • Zero-Wake Bedtime Routine: The automated sleep timer fades the volume logarithmically over the final minutes of your countdown. You don't have to stay awake or reach over in the dark to turn off a blaring speaker—your audio gently dissipates, leaving you in peaceful silence.
  • No Account Hassle: Zero sign-ups, zero passwords, and zero credit cards. Open the URL, press play, and start relaxing.

Prize Categories

  • Slow and Steady (Grand Prize)
  • Best Open-Source AI Agent Application

Top comments (0)