This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend
What I Built
Every family has a loved one—a Nonno, Abuela, or aunt—whose cooking is magical, yet they never write down a single recipe. When asked, they send a rambling voice memo: "a splash of olive oil, reduce whole milk slow, brown until it smells like home."
I built KitchenTales for Nonno Giuseppe, Abuela Carmen, Auntie Priya, and Elena to capture and preserve their spoken culinary soul before it's lost to time.
KitchenTales turns casual audio voice memos into structured heirloom recipe cards using open-weight AI:
- Colloquial Normalization: Translates unmeasured speech ("a pinch of this, a couple splashes") into culinary measurements.
- Family Secret Isolation: Detects and highlights unwritten heritage techniques (e.g., nutmeg milk reduction, aroma traps, hot honey glaze).
- Hands-Free Cook Mode: Powered by warm ElevenLabs voice narration and continuous voice commands ("Next", "Back", "Timer") so dirty hands never touch the screen.
- Smart Pantry & Dietary Adapters: Swaps missing ingredients and converts dishes to Vegan or Gluten-Free in one click.
Demo
- Live Web App: https://kitchentales.onrender.com
- GitHub Repository: https://github.com/Master66999/Hacktoberfest
Code
🍲 KitchenTales
Turn messy spoken voice memos from loved ones into treasured heirloom recipes.
Built with ❤️ for the Hacktoberfest Weekend Challenge: Build for a Friend
📖 The "Build for a Friend" Story
Every family has a friend, grandmother, or uncle whose cooking is pure magic—yet they never write down a single recipe.
Whenever you ask how to recreate their signature ragù, focaccia, dal, or birria, they send an unmeasured, rambling voice memo:
"Listen kiddo, brown your chuck roast slow until it crusts, throw in whatever carrots and onions you have, grate a little nutmeg, and add a splash of milk before the wine... that's the secret nobody tells you."
Handwritten notes get grease-stained and lost. Generic recipe blogs lack the intimate family tricks. KitchenTales was built to preserve these irreplaceable audio memories forever.
Drop in an unmeasured voice memo, and open-weight Google Gemma AI listens, extracts precise quantities…
Built with pure vanilla web standards (zero bundlers, instant load):
-
index.html&css/styles.css— 3D tactile buttons, glassmorphic depth, and warm culinary typography (Fraunces&Outfit). -
js/gemma-engine.js— Client-side Google Gemma 2 processing harness for transcript extraction and dietary conversions. -
js/voice-narrator.js— ElevenLabs neural TTS + Web Speech continuous hands-free voice command listener. -
js/recipes-data.js&js/app.js— Preloaded generational voice memos and private local vault storage.
How I Built It
Spoken Voice Memo ──▶ Google Gemma 2 AI ──▶ Heirloom Card ──▶ ElevenLabs Voice Guide
("brown slow, splash") (Entities & Secrets) (Dual Units) (Hands-free commands)
- Google Gemma 2: Open-weight LLM tailored for conversational nuance. It translates vague phrases ("cook until it sounds like gentle rain") into structured culinary instructions with metric/imperial units.
- ElevenLabs Audio Guidance: Delivers warm, natural voice narration that sounds like a master chef or loving elder guiding you step-by-step.
-
Continuous Voice Commands: Native
SpeechRecognitionlistener detects spoken triggers ("next", "back", "repeat", "timer") without touching the screen.
Why Does Open Innovation Matter?
- 100% Privacy: Generational family voices, laughter, and personal stories stay private on device—never fed into commercial cloud training sets.
- Works Completely Offline: Family cooking happens in cabins, beaches, and remote kitchens without Wi-Fi. Gemma runs locally on consumer hardware.
- Zero Metered Costs: Preserving 500 family recipes over a lifetime costs $0.00 in recurring cloud API tokens.
My Agent Session
This project was pair-programmed with an autonomous coding agent:
what other feacture can i add in this first read tfolder and start inplemting all feacture you givev
look change wholedesign again and change font size also and font weight and height so some ectra 3d design thing
iwr -useb https://devrelay.com/install.ps1 | iex install this
create one proper md file
how to deploy this on render
This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend
What I Built
<!-- What does it do, and who is the friend or loved one you built it for? What problem does it solve for them? -->
Demo
<!-- Share a deployed link or a video demo. -->
Code
<!-- Show us the code! You can embed a GitHub repo directly into your post. -->
How I Built It
<!-- Which open-source AI did you use (open-weight models, agent harnesses, frameworks, local inference), and how is your project built around it? -->
Why Does Open Innovation Matter?
<!-- Why does open innovation matter for what you built? What did it make possible that a closed API wouldn't? -->
My Agent Session
<!-- Optional, but judges love it. Save your session with DevRelay and embed it with the agent_session tag (see the challenge page), or link to it. -->
Prize Categories
<!-- Which partner categories are you entering? List every one that applies, or remove this section. -->
<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->
<!-- Thanks for participating! -->
Editor Basics
Use Markdown to w
<truncated 917 bytes>
%20directly%20into%20your%20post.%20--%3E%0A%0A%23%23%20How%20I%20Built%20It%0A%3C%21--%20Which%20open-source%20AI%20did%20you%20use%20%28open-weight%20models%2C%20agent%20harnesses%2C%20frameworks%2C%20local%20inference%29%2C%20and%20how%20is%20your%20project%20built%20around%20it%3F%20--%3E%0A%0A%23%23%20Why%20Does%20Open%20Innovation%20Matter%3F%0A%3C%21--%20Why%20does%20open%20innovation%20matter%20for%20what%20you%20built%3F%20%20What%20did%20it%20make%20possible%20that%20a%20closed%20API%20wouldn%27t%3F%20--%3E%0A%0A%23%23%20My%20Agent%20Session%0A%3C%21--%20Optional%2C%20but%20judges%20love%20it.%20%20Save%20your%20session%20with%20DevRelay%20and%20embed%20it%20with%20the%20agent_session%20tag%20%28see%20the%20challenge%20page%29%2C%20or%20link%20to%20it.%20--%3E%0A%0A%23%23%20Prize%20Categories%0A%3C%21--%20Which%20partner%20categories%20are%20you%20entering%3F%20%20List%20every%20one%20that%20applies%2C%20or%20remove%20this%20section.%20--%3E%0A%0A%3C%21--%20Team%20Submissions%3A%20Please%20pick%20one%20member%20to%20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%20DEV%20usernames%20directly%20in%20the%20body%20of%20the%20post.%20--%3E%0A%0A%3C%21--%20Thanks%20for%20participating%21%20--%3E%0A#liquid).
In addition to images for the post's content, you can also drag and drop a cover image.
Embed coding agent sessions from Claude Code, Codex, Gemini CLI, and more: {% agent_session ID %}. Use named slices to embed different parts throughout your post: {% agent_session ID planning %}. Upload a session.
create cover page
Show your work. We'd love to see how you built it. Save your agent session with DevRelay and embed it in your post, or link to it. It's optional, but it helps the judges understand your process.
Skip to contentPowered by Algolia
Create Post
Upload Agent Session
Upload Agent Session
← All Sessions
Upload a coding agent session file. It will be parsed and scrubbed locally in your browser — then you can curate which parts to include before saving.
Session Title
Agent Tool Auto-detect Claude Code Codex (OpenAI) Gemini CLI OpenCode Pi GitHub Copilot
Session FileDrop your session file here or click to browse
Supports .jsonl and .json files
Where to find your session filesClaude Code
~/.claude/projects/<project>/.jsonl
Codex (OpenAI)
~/.codex/sessions/YYYY/MM/DD/.jsonl
Gemini CLI
~/.gemini/tmp/session-.json
OpenCode
Run opencode export <session-id> > opencode-session.json, then upload the exported file.
Pi
~/.pi/agent/sessions/<project>/.jsonl
GitHub Copilot
~/.copilot/session-state/<session-id>/events.jsonl
Parse File
DEV Community — A space to discuss and keep up software development and manage your software career
Home
DEV Challenges
DEV++
Videos
DEV Education Tracks
DEV Help
Advertise on DEV
Organization Accounts
DEV Showcase
About
Contact
Free Postgres Database
DEV Shop
MLH
Code of Conduct
Privacy Policy
Terms of Use
Built on Forem — the open source software that powers DEV and other inclusive communities.
Made with love and Ruby on Rails. DEV Community © 2016 - 2026.
Skip to contentPowered by Algolia
Create Post
Upload Agent Session
Upload Agent Session
← All Sessions
Upload a coding agent session file. It will be parsed and scrubbed locally in your browser — then you can curate which parts to include before saving.
Session Title
Agent Tool Auto-detect Claude Code Codex (OpenAI) Gemini CLI OpenCode Pi GitHub Copilot
Session File
📄
kitchentales-agent-session.jsonl
309.3 KB56 lines
×
Where to find your session filesClaude Code
~/.claude/projects/<project>/.jsonl
Codex (OpenAI)
~/.codex/sessions/YYYY/MM/DD/.jsonl
Gemini CLI
~/.gemini/tmp/session-.json
OpenCode
Run opencode export <session-id> > opencode-session.json, then upload the exported file.
Pi
~/.pi/agent/sessions/<project>/.jsonl
GitHub Copilot
~/.copilot/session-state/<session-id>/events.jsonl
Parsing...
Reading file
309.3 KB read
Uploading file...
Skipped (local only)
Parsing messages
0 messages found
Scrubbing secrets
No secrets found
Ready to curate
Ready to curate
Choose which messages to save. Click cards to toggle, shift+click for range, or drag across multiple. Only selected messages will be stored. Create slices to embed different parts of your session separately.
We automatically scan for and redact common secrets like API keys, tokens, and credentials, but we cannot guarantee all sensitive information has been caught. Please review your session carefully before making it public to ensure you are not sharing anything you shouldn't.
AllConversationPromptsTool callsRedacted
0 of 0 included (29 B)Select allDeselect allSave & Upload
SlicesEmbed different parts of your session separately+ New slice
No slices yet.
DEV Community — A space to discuss and keep up software development and manage your software career
Home
DEV Challenges
DEV++
Videos
DEV Education Tracks
DEV Help
Advertise on DEV
Organization Accounts
DEV Showcase
About
Contact
Free Postgres Database
DEV Shop
MLH
Code of Conduct
Privacy Policy
Terms of Use
Built on Forem — the open source software that powers DEV and other inclusive communities.
Made with love and Ruby on Rails. DEV Community © 2016 - 2026.
Prize Categories
- 🌟 Best Use of Gemma ($200): Gemma 2 powers conversational recipe extraction, unmeasured ingredient estimation, and dietary adaptation.
- 🎙️ Best Use of ElevenLabs ($100): ElevenLabs provides the natural voice narration for the hands-free culinary experience.
Preserving culinary heritage, one spoken memory at a time.
Built with ❤️ for Hacktoberfest 2026: Build for a Friend.
Top comments (2)
Nice
is the website working?