DEV Community: Kas

FoodieCompass : The No-Screen Walk-to-Eat Guide

Kas — Sat, 10 Oct 2026 06:03:14 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

FoodieCompass

It's a simple app that allows user to tap just one button to find out their breakfast/lunch/brunch/dinner place , then just pockets the phone and walk around. *Work best for students and 9-to-5 workers who does not own their transport *

Why I Built

When people want to eat out, most of us just get trapped in endless "review paralysis" no matter using Yelp , Google Map or someone blog , sometimes maybe 15 minutes walking just turn into an empty and disappointing restaurants.

How it solved

User only need to open the app -> choose their preferences (NO TYPING AT ALL) , the UI will shows a single analog-style compass arrow pointing directly toward the single highest-sentiment spot.
To reduce the frequency of taking out phone just to make sure users' current positions, a haptic vibrations and short audio cues will support them at intersections
An open-weight Small Language Model (SLM) running directly on-device analyzes raw community reviews, detecting signals of genuine crowd buzz, outdoor seating, and authentic quality while filtering out tourist traps and empty venues.

Core Features

1. "One-Tap Stroll" Selector
Simple presets: "Quick Bite (5 min)", "Dinner Stroll (12 min)", "Outdoor/Street Food Walk (15 min)".
No typing, no infinite scrolling, no search filters.

2. Open-Weight Auto-Filtering Engine
Scans candidate eateries within walking distance.
Open SLM classifies places based on:

Crowd Authenticity: High local turnover vs. dead restaurant risk.
Signature Dish Consensus: What item diners actually rave about.
Outdoor Vibe: Patio seating, street tables, or walkability.

3. The Compass UI
A clean, full-screen directional needle that rotates in real time using the device's magnetic compass sensor even user is offline.
Shows only:
Destination name & distance in meters (e.g., 320m • 4 mins walk).
Target dish pill (e.g., "Crispy Roast Pork").
1-sentence AI verdict: "Consistently lively patio; locals praise the handmade dumplings."

4. "Eyes-in-Pocket" Sensory Guidance
Haptic Pulse: Phone gently vibrates when the user is walking in the exact heading of the food spot.
Proximity Buzz: Distinct vibration sequence when within 40 meters of the destination.
Audio Chime : A subtle chime or whisper cue: "You have arrived. Look to your right."

Demo

foodiecompass.vercel.app

Code

123EFD / Hacktoberfest

Food Compass - Simple Website for foodie , a few click then start your hunting

How I Built It

Open-source AI

Open-Weight Model : SmolLM2-360M-Instruct (Hugging Face) — an ultra-compact, high-efficiency open-weight Small Language Model (SLM)
Local Inference Framework : Transformers.js (v3) powered by ONNX Runtime Web with WebGPU hardware acceleration and WebAssembly (WASM).
Open Knowledge & Data Engine : OpenStreetMap (OSM) / Overpass API — an open, decentralized geographic database acting as the community knowledge harness for local eateries, replacing closed commercial map APIs.
Open Client Edge Infrastructure : Packaged via Capacitor and Vite PWA (Workbox Service Worker), allowing the entire AI inference runtime, compass math, and synthesizer code to run completely offline on client hardware.

How is my project built around it?
Compared to traditional food apps which require you to read many reviews and choose what's the best for you , FoodieCompass reduce this feature unnecessary via open-source AI.

The open models digests raw venue data (seating, cuisine and dietary tags etc.) and filter out hundreds of potentials choices into one single high-confidence destination.
Once the destination is selected, local hardware sensors (your magnetometer chip inside your phone) will take charge of the GPS coordinates as well as the notification, vibration and audio assistance.

Why Does Open Innovation Matter?

This app is built for those who prefer location privacy. When using commercial platforms ( Google Maps , Yelp), every GPS coordinate , walking path and dining craving is transmitted to commercial ad servers to build behavorial ad profiles. This open-weight AI running directly on the device without search query and location packet leaves user's phone.
Zero-cost : Running an open-weight model locally costs $0.00 in cloud fees, making this tool completely sustainable and free for anyone in the world to self-host or install.

My Agent Session

The full interactive agent transcript of this build session is documented here:

View Full Agent Session Transcript (session.jsonl)

Submitted by @kas_6156c2c3d9f90

My Rasa Malaysia: The Soul of Malaysian Comfort Food & Commuter Food Guide

Kas — Sat, 15 Aug 2026 09:26:38 +0000

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

What I Built

Rasa Malaysia is an immersive, aesthetic landing page and interactive food guide dedicated to celebrating the authentic comfort food of Malaysia. Malaysian food culture is a vibrant, multi-ethnic tapestry where Malay, Chinese, and Indian flavors blend harmoniously — from steaming bowls of Sarawak Laksa and rich Curry Mee to fragrant banana-leaf Nasi Lemak and wok-fired Char Kway Teow.
Beyond being a visual love letter to Malaysian cuisine, this project solves a real-life challenge for students, tourists, and daily commuters: discovering legendary, budget-friendly comfort food accessible purely via public transit (LRT, MRT, KTM, and RapidKL buses).

✨ Key Features

Dynamic Hero Showcase:
- Cross-fading background featuring signature dishes every 5 seconds.
- Distinctive typography powered by Share Tech Mono and frosted glassmorphism accents.
Iconic Dishes Carousel with Live Progress Indicator:
- Fully accessible horizontal showcase with smooth slide navigation.
- A reactive dotted progress bar that tracks and reflects your scroll progress across all 9 featured delicacies in real-time.
Public Transit Food Blog & Guide (/blog):
- Curated food stall guide mapped to specific transit lines (e.g., Oriental Kopi at Mid Valley via LRT Abdullah Hukum/KTM, Chow Yang Kopitiam in SS2 via LRT Taman Bahagia, Foo Hing Dim Sum at LRT Taipan).
- Clear transit directions (bus routes, covered walkways, on-demand vans), direct Google Maps links, and handy price range tags (💰).
Skeuomorphic Commuter Sticky Note ("Commuter's Toolkit"):
- A playful, paper-styled sticky note pinned to the sidebar with tape effects, ruled notepad lines, and subtle hover tilt.
- Quick links to essential schedule and tracking apps (myrapid PULSE, Rapid On Demand, GOKL, and RapidKL Live Map).
"Borak-borak Corner" (Localized Malaysian Comment Board):
- An interactive comment board using Malaysian dialect ("Got other solid port makan near LRT/MRT? Kongsi sikit your recommendation here lah!").
- Instant live feedback allowing visitors to post and discover new transit-accessible port makan spots.
Bespoke Glassmorphism Design System & Dark/Light Mode:
- Crafted with pure Vanilla CSS using a curated Malaysian color palette (Merah Bunga Raya, Kuning Telur, Hijau Daun, Kelabu Asap).
- Instant Dark Mode toggle with theme persistence in localStorage.
Mobile-First Responsive Navigation:
- A clean mobile menu bar with smooth dropdown transitions, accessible controls, and theme toggling for screens of all sizes.

Demo

🌐 Live Website: Rasa Malaysia
💻 Source Code: https://github.com/123EFD/food-challenge

Journey

Refining Carousel Physics & Performance: Initially, automatic interval sliding conflicted with user interactions and caused erratic jumps. I refactored the carousel into a pure React component leveraging useRef, smooth scroll APIs, and scroll event calculations to drive a synchronous dotted progress bar.
Pure CSS Glassmorphism without Tailwind: Rather than relying on generic utility classes, I engineered a bespoke CSS design system using CSS custom properties for frosted glass translucency (backdrop-filter: blur(12px)), fluid container borders, and accessible text shadows that maintain crisp contrast across both Light and Dark themes.
Designing for Real Utility (Commuter Empathy): Many great food directories assume you have a car. Focusing on transit-accessible spots (specifying bus numbers like PJ02, T807, and walking times from LRT stations) transformed this landing page from a simple showcase into a genuinely useful community tool for students and non-drivers.

🚀 What's Next

Integrating live Google Maps API previews directly on the page.
Connecting real-time bus arrival status via open transport APIs.
Adding a filtering system for dietary preferences (Halal, Vegetarian, Street vs. Restaurant).

🛠️ Architecture & Tech Stack

Framework: Next.js (App Router) + React 19 + TypeScript
Styling: Pure Vanilla CSS (CSS Variables, Flexbox, CSS Grid, Glassmorphism backdrop-filters) — Zero heavy UI library bloat
Typography: Google Fonts (Share Tech Mono)
Icons & Theme: Custom CSS & localized emoji accents

Built with passion by @kas_6156c2c3d9f90

License: MIT

DEV Community: Kas

FoodieCompass : The No-Screen Walk-to-Eat Guide

What I Built

FoodieCompass

Why I Built

How it solved

Core Features

Demo

Code

123EFD / Hacktoberfest

Food Compass - Simple Website for foodie , a few click then start your hunting

How I Built It

Why Does Open Innovation Matter?

My Agent Session

My Rasa Malaysia: The Soul of Malaysian Comfort Food & Commuter Food Guide

What I Built

✨ Key Features

- A clean mobile menu bar with smooth dropdown transitions, accessible controls, and theme toggling for screens of all sizes.

Demo

Journey

🚀 What's Next

🛠️ Architecture & Tech Stack