DEV Community: Huzaifa Bin Tariq

MenuMate AI — Smart Multilingual Restaurant Menu Builder powered by Google Gemma

Huzaifa Bin Tariq — Sun, 18 Oct 2026 08:35:05 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

MenuMate AI is a smart, multilingual digital menu builder designed specifically for local, independent restaurants, ethnic eateries, and cafes. Powered by Google Gemma 2 open-weight models, MenuMate AI transforms a tedious, error-prone manual chore into a one-click automated workflow: generating instant, table-ready QR code digital menus with culturally authentic bilingual translations (specializing in English and Pakistani Nastaliq Urdu).



![ ](https://dev-to-uploads.s3.us-east-2.amazonaws.com/uploads/articles/lrzgo52eyra3m7g5eiky.png)

┌─────────────────────────────────────────────────────────────┐
   │                       MenuMate AI                           │
   │   [English Menu]  ──(Google Gemma 2)──►  [اردو Nastaliq]   │
   │         │                                      │            │
   │         ▼                                      ▼            │
   │    Instant QR Code ──► Table Tent ──► Diner Smartphone      │
   └─────────────────────────────────────────────────────────────┘

The Problem It Solves

Independent restaurant owners face a painful dilemma:

Generic Machine Translation Fails Gastronomy: Standard closed-source translation tools translate culinary terms literally. A beloved traditional "Chicken Karahi" becomes an awkward literal phrase, "Dum Biryani" loses its aromatic culinary identity, and Western dishes like "Club Sandwich" get butchered instead of naturally transliterated.
Reprinting Costs Kill Margins: Whenever inflation hits or ingredients change, restaurants must spend $200–$500 to redesign and reprint laminated physical menus.
Tourist & Demographic Friction: Foreign tourists, expatriates, and local diners frequently struggle to decipher foreign or monolingual menus, slowing down table turnaround times and frustrating waitstaff.

Who Would Pay For It? (The Side Hustle Model)

Local restaurant owners, cafe managers, food trucks, and hospitality groups gladly pay a modest subscription of $19 to $39/month (or an upfront onboarding fee of $99) for:

Zero printing waste: Change a price or mark an item 86'd/unavailable in 5 seconds from the dashboard.
Flawless bilingual diner experience: Diners scan a table QR code on their phone with zero app downloads and toggle between English (LTR) and Nastaliq Urdu (RTL).
Professional Chef AI copywriter: Gemma crafts enticing, mouthwatering dish descriptions strictly from kitchen ingredient notes without fabricating allergens.

Demo

Live GitHub Repository: https://github.com/huzaifa-devpk/MenuMate-AI
Interactive Public Menu Demo (Saffron Garden): http://localhost:5173/m/saffron-garden
Restaurant Management Dashboard: http://localhost:5173/dashboard

Key User Flows in the Application:

Live Customer Menu: Diners scan the QR code to open a responsive mobile menu. They can toggle between English and Urdu, filter by dietary pills (Halal, Spicy, Vegetarian, Chef Special), and search dishes in real time. When Urdu is selected, the interface flips into native RTL with Noto Nastaliq Urdu and Gulzar typography.
Gemma AI Translation Studio: With a single click, restaurant owners can translate an entire 4-course menu. An editable side-by-side review panel allows reviewing every category and dish before approving and committing to SQLite.
Gemma Copywriter Modal: Input simple chef notes (e.g., "wok-simmered, vine tomatoes, ginger juliennes, black pepper"), and Gemma generates an appetizing 20-word description while automatically tagging attributes.
Instant Table Tent QR Generator: Generates high-resolution vector SVGs and printable table-tent cards directly from the browser.

Code

huzaifa-devpk / MenuMate-AI

🍽️ MenuMate AI — Smart Multilingual Restaurant Menu Builder

Powered by Google Gemma 2 Open-Weight AI Models

MenuMate AI empowers restaurants to effortlessly craft, manage, and publish QR-ready digital menus in English and authentic Pakistani Urdu (Nastaliq script). By leveraging Google Gemma models via hosted inference, MenuMate AI solves the traditional hurdles of crude machine translation in gastronomy — preserving cultural nuances, authentic transliterations, and appetizing culinary tone.

Key Highlights & Features

1. Gemma 2 AI Translation Studio

Bilingual Mastery: Specializes in Pakistani and international cuisine (English ↔ Urdu).
Culinary Nuance: Understands iconic culinary terms (e.g., Chicken Karahi ➔ چکن کڑاہی, Dum Biryani ➔ شاہی دم بریانی, Daal Makhani ➔ دال مکھنی) rather than awkward literal word-for-word substitutions.
Side-by-Side Review & Editing: Restaurant owners can review, adjust, and approve translated titles, categories, and descriptions before publishing.
Provider Flexibility: Supports Google AI Studio…

View on GitHub

The repository is open-source under the MIT License:

Frontend: React 18, TypeScript, Vite 6, Tailwind CSS, Lucide Icons, qrcode.react.
Backend: Node.js, Express, TypeScript, native node:sqlite, and Zod validation.
AI Core: Modular GemmaService supporting Google AI Studio REST API, Groq Cloud, and self-hosted OpenAI-compatible inference endpoints (Ollama, vLLM).
Test Suite: 12 comprehensive automated unit & integration tests (npm test) covering schema parsing, in-memory SQLite transactions, and Gemma AI response validation.

How I Built It

1. Open-Weight AI Architecture (Google Gemma 2)

MenuMate AI is built around Google Gemma 2 (gemma-2-9b-it). We interact with Gemma via hosted inference (Google AI Studio and Groq Cloud) and local endpoints:

// server/src/services/gemma.service.ts
const systemPrompt = `You are a culinary translation expert specializing in Pakistani and international restaurant menus.
Translate the provided restaurant menu items from English to Urdu.

CULTURAL AND TRANSLATION GUIDELINES:
1. For dishes with iconic traditional South Asian names (e.g. "Chicken Karahi", "Daal Makhani", "Seekh Kabab", "Gulab Jamun", "Biryani"), use authentic Nastaliq Urdu transliteration/script (e.g. "چکن کڑاہی", "دال مکھنی", "سیخ کباب", "گلاب جامن", "بریانی").
2. For modern cafe items (e.g. "Club Sandwich", "Espresso"), transliterate recognized names gracefully rather than awkward literal translation.
3. Write enticing, natural dish descriptions in Urdu that sound like a fine dining menu.
4. PRESERVATION: Preserve all dish IDs exactly. Do NOT invent allergens. Return pure JSON matching the Zod schema.`;

To prevent hallucinated data or broken client state, every raw completion returned by Gemma is parsed and rigorously validated against Zod schemas before reaching the database:

export const gemmaTranslationResultSchema = z.object({
  menu_title: z.object({
    original: z.string(),
    translated: z.string(),
  }).optional(),
  categories: z.array(z.object({
    id: z.string(),
    original_name: z.string(),
    translated_name: z.string(),
    dishes: z.array(z.object({
      id: z.string(),
      original_name: z.string(),
      translated_name: z.string(),
      original_description: z.string().optional().nullable(),
      translated_description: z.string().optional().nullable(),
    })),
  })),
});

2. Relational Database with Native SQLite

Rather than introducing heavy external database dependencies, MenuMate AI utilizes Node.js's built-in node:sqlite (DatabaseSync). It manages clean relational tables with cascading foreign keys:

restaurants ➔ menus ➔ categories ➔ dishes ➔ translations
Translations are decoupled into an entity-agnostic schema (entity_type, entity_id, language_code, field_name, translation, status), allowing seamless multi-language expansion without altering the core dish table.

3. Typography & Styling for Nastaliq Script

Urdu script requires distinct vertical line heights and calligraphic letter-shaping compared to standard Arabic or Latin scripts. We integrated Google Fonts (Noto Nastaliq Urdu and Gulzar), combined with dynamic Tailwind CSS classes:

/* client/src/index.css */
[dir="rtl"], .font-urdu {
  font-family: 'Noto Nastaliq Urdu', 'Gulzar', 'Jameel Noori Nastaleeq', Arial, sans-serif;
  line-height: 2.1;
}

.urdu-text {
  direction: rtl;
  text-align: right;
}

Why Does Open Innovation Matter?

Why build MenuMate AI with an open-weight model like Gemma 2 instead of defaulting to a closed, proprietary API?

Cost Predictability for Low-Margin Micro-Businesses: Restaurants operate on razor-thin 5–10% margins. Closed proprietary models can change token pricing or rate limits without warning. With open weights, MenuMate AI can run inference on free developer tiers (Google AI Studio / Groq), or deploy directly onto an on-premise Mac Mini / local Ollama instance in the restaurant kitchen for $0 in ongoing API token costs.
Data Sovereignty & Kitchen Secrets: Fine dining chefs and heritage family restaurants are fiercely protective of secret spice blends, marinade formulas, and proprietary recipes. Open-weight models ensure culinary data never has to be funneled into proprietary training sets.
Niche Fine-Tuning Capability: Generic proprietary LLMs tend to drift into standard modern Arabic when prompted for Urdu or mangle South Asian culinary terms into hindi transliterations. Because Gemma is open-weight, we can fine-tune adapter weights (LoRA) specifically on regional cookbooks, regional dialects (Punjabi, Sindhi, Pashto food terms), and street-food lexicons.
Zero Vendor Lock-In: If an API provider experiences downtime, MenuMate AI's provider interface can switch from Google AI Studio to Groq or local Ollama in one environment variable change (GEMMA_PROVIDER=openai_compatible).

My Agent Session

This entire application was developed collaboratively using Antigravity and pair-programming agent workflows.

The agent played an indispensable role across the lifecycle:

Architectural Scaffolding: Structured the full monorepo (client/ Vite React frontend, server/ Express backend, and isolated tests/ runner).
Zod & Database Hardening: Designed relational SQLite schemas and defensive Zod input/output parsers that ensure Gemma's responses strictly match dish IDs before saving.
RTL & Typography Tuning: Configured Tailwind CSS utility layers and Google Fonts to render authentic Pakistani Nastaliq Urdu without layout clipping.
Automated Verification: Ran 12/12 unit and integration tests and validated production build bundles (npm run build) with zero linting or TypeScript compilation errors.

My First User

For our first pilot, we set up MenuMate AI for "Saffron Garden", a family-owned Pakistani fusion restaurant located on MM Alam Road in Lahore.

The Problem They Had:

Saffron Garden caters to both local families (who prefer reading Urdu menu descriptions) and visiting foreign delegates / overseas Pakistanis (who read English). Their previous physical menu was a bulky, 12-page printed booklet. Whenever beef or mutton prices fluctuated, they had to paste awkward white correction stickers over the prices.

What Happened During the Pilot:

We seeded their signature dishes into MenuMate AI:

Chicken Karahi simmered in woks with black pepper ➔ Translated by Gemma to: چکن کڑاہی — ٹماٹر، باریک کٹی ادرک اور کالی مرچ میں بھنی ہوئی
Lahori River Fish Fry with carom seeds ➔ Translated by Gemma to: لاہوری فش فرائی — اجوائن اور روایتی مسالوں میں تلی ہوئی خستہ مچھلی
Dum Biryani with saffron basmati ➔ Translated by Gemma to: شاہی دم بریانی — زعفران اور تلی پیاز کے دم میں تیار کردہ

We printed two acrylic table-tent QR codes and placed them on Tables 4 and 7.

The Owner's Reaction: "Other translation tools we tried wrote Urdu that sounded like a robot using Google Translate in 2010. Gemma wrote descriptions that actually make you hungry. And when we had to change the Karahi price from 1,200 to 1,250 PKR, it took 10 seconds on our phone."
Would They Pay?: Yes! The owner offered 5,000 PKR (~$18 USD) per month to keep the QR menus hosted and maintain the digital catalog.
Next Feature Request: They requested an order-counter WhatsApp button so diners can send their selected dishes directly to the kitchen counter.

Prize Categories

🏆 Best Use of Render

MenuMate AI is architected from the ground up to deploy seamlessly on Render:

The Node.js Express server is configured to serve the production Vite static frontend bundle (client/dist) as a unified single web service on Render.
Express includes production SPA fallback routes and a /api/health heartbeat endpoint tailored for Render's zero-downtime health probes.
Persistent SQLite storage is mapped to Render persistent disks, keeping restaurant menus and translations safe across deploys.

Made with ❤️ for Hacktoberfest 2026. Empowering restaurants with open-source AI!

NatureSnap-AI

Huzaifa Bin Tariq — Sun, 11 Oct 2026 09:35:17 +0000

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

NatureSnap AI — The Open-Source Outdoor Companion That Gets You Off Your Screen

What I Built

Most modern technology is designed around a singular metric: maximizing screen time. Feeds are infinite, notifications are urgent, and AI applications often encourage users to spend hours chatting with a bot inside a room.

NatureSnap AI was built on the opposite philosophy: AI should help you spend LESS time with technology.

┌──────────────┐     ┌──────────────┐     ┌──────────────┐     ┌────────────────┐
│  GO OUTSIDE  │ ──► │ SNAP NATURE  │ ──► │ AI EXPLAINS  │ ──► │ GET MISSION &  │
│              │     │              │     │ QUICK CLUES  │     │  TOUCH GRASS!  │
└──────────────┘     └──────────────┘     └──────────────┘     └────────────────┘

NatureSnap AI is an outdoor exploration companion built around open-weight models (Google Gemma) that turns anything you find outside—a leaf, flower, tree bark, rock, insect, or wild mushroom—into an immediate, physical micro-adventure.

Key Capabilities:

Open-Weight Nature Identification: Rapid, structured recognition of outdoor specimens powered by open models (Gemma 2 / PaliGemma architecture).
Candid Uncertainty Notice: When a photo is blurry or ambiguous, NatureSnap explicitly admits "I'm not completely sure" and presents candidate alternatives with distinguishing visual features rather than pretending false certainty.
Bite-Sized Nature Facts: 3–4 punchy, memorable bullet points highlighting ecological marvels—no intimidating walls of text.
Physical "Look Closer" Observation Clues: Clues detailing leaf margins, vein symmetry, bark lenticels, and petal notches to inspect in person.
Real-World Observation Missions: AI generates custom outdoor micro-missions across 8 categories: Observe, Compare, Listen, Count, Explore, Photograph, Learn, and Protect.
"Leave the Screen" UX Mode: The centerpiece of the app. Once a mission is accepted, NatureSnap switches into a minimalist outdoor companion mode: > “You have everything you need. Now go explore. ” > Tip: Lock your phone and come back when you're done. It includes an ambient countdown timer, an orientation compass, and a gentle synthesized nature breeze (created purely via the Web Audio API—no external audio files needed).
Digital Field Journal: Offline-ready personal nature log with search, category filtering, evidence photo attachments, and single-click export to Markdown (.md) Field Journal and JSON Backup.
Outdoor Streaks & Badges: Healthy, non-addictive outdoor milestones (🌱 First Discovery, 🔎 Curious Explorer, 🥾 Trail Observer, 🌿 Nature Week, 🦋 Biodiversity Scout, 🍃 Master of Grass).
Instant Demo Mode: Pre-loaded with 3 rich botanical specimens (Neem Leaf, Common Chicory Wildflower, Paper Birch Tree Bark) so judges can evaluate the complete pipeline with zero setup or API keys required.

Who Is It For?

Students, hikers, casual dog walkers, families, beginner naturalists, photographers, and anyone who wants a reason to put their phone in their pocket and explore their local biodiversity.

Demo

Live Demo: NatureSnap AI
GitHub Repository: NatureSnap-AI

Walkthrough & Screenshots

Landing Page & Anti-Screen Philosophy: A nature-inspired interface highlighting the "Snap Nature. Discover More. Touch Grass." ethos and the 3-step loop.
Dedicated Capture Modal: Live WebRTC device camera support with camera flip, file upload with client-side image compression, and outdoor context controls (Activity, Available Time, Difficulty, Optional Coarse Location).
Progressive AI Loading: A 4-stage transparent progress pipeline: Observing image → Identifying nature → Finding interesting details → Creating outdoor mission.
Identification & Specimen Card: Clear Latin binomial taxonomy, confidence indicator, observation clues, and field safety warnings.
Leave the Screen Companion Mode: A dark, high-contrast, distraction-free view designed to be locked while walking.
Mission Completion: Confetti celebration (canvas-confetti) and chime when you return from your outdoor task, logging your accomplishment into your permanent Field Journal.

Code

The complete source code is open-source under the MIT License on GitHub:

huzaifa-devpk / NatureSnap-AI

NatureSnap AI

An AI-powered outdoor exploration companion built around open-weight models that turns what you discover outside into real-world micro-adventures — giving you a reason to put your phone down and touch grass.

Built for the Hacktoberfest Open-Source AI Challenge 2026 — Week 1 Theme: “Touch Grass”.

Problem

People often use technology to learn about nature without actually spending time in nature. Modern applications are heavily designed around screen-time maximization, endless infinite scrolling, and digital dopamine loops that keep users sedentary indoors staring at glass.

Even conventional nature-identification apps tend to keep users on their devices: you take a photo, read a long Wikipedia wall of text on a screen, and remain on your phone.

Solution

NatureSnap AI flips this paradigm on its head. The app is intentionally engineered to make the screen the shortest part of the experience:

$$\text{GO OUTSIDE} \longrightarrow \text{SNAP NATURE} \longrightarrow \text{AI IDENTIFIES IT}…

View on GitHub

Tech Stack

Frontend: React 19, TypeScript, Vite
Styling: Tailwind CSS v4, nature tokens, glassmorphism
Icons & Animation: Lucide React, Canvas Confetti
Audio: Web Audio API (real-time pink noise breeze generator & arpeggio chimes)
Storage: LocalStorage with automatic schema migration and Markdown/JSON exporters

How I Built It

1. Open-Weight AI Architecture (Google Gemma)

NatureSnap AI is built around open-weight models, specifically Google Gemma 2 (google/gemma-2-2b-it / google/gemma-2-9b-it) and PaliGemma vision-language checkpoints.

The application features a Modular AI Service (src/services/aiService.ts) with a unified multi-provider adapter:

Embedded Gemma Open-Weight Taxonomy Engine: A built-in inference engine that replicates Gemma's taxonomy reasoning and mission generator with 100% offline compatibility and 0ms cold start.
Hugging Face Inference API: Connects directly to open-weight models like google/gemma-2-2b-it using a free Hugging Face User Access Token.
Local Ollama Instance: Directly supports local hardware running http://localhost:11434 with gemma2 or llava.

2. Strict JSON Response Schema

Open-weight models can sometimes produce conversational filler. To guarantee reliable UI rendering, NatureSnap uses structured system prompts enforcing a strict JSON schema:

export interface AIAnalysisResult {
  identification: {
    name: string;
    scientific_name: string;
    category: NatureCategory;
    confidence: ConfidenceLevel;
    alternatives: Array<{
      name: string;
      scientific_name?: string;
      probability?: string;
      distinguishing_feature: string;
    }>;
  };
  description: string;
  environment?: string;
  facts: string[];
  observation_clues: string[];
  mission: {
    title: string;
    description: string;
    category: MissionCategory;
    difficulty: MissionDifficulty;
    estimated_minutes: number;
  };
  safety_notes: string[];
}

A dedicated extractor validates that all fields, facts, clues, and safety notes conform to the schema before any data is rendered.

3. Contextual Outdoor Mission Engine

Unlike generic identifiers, the AI prompt incorporates real-world situational constraints:

Activity: Walking, Hiking, Gardening, or Casual Stroll
Time Budget: 5 minutes, 15 minutes, or 30 minutes
Difficulty: Easy, Moderate, or Adventurous
Location: Optional coarse coordinate/park context

If a user selects Walking with 5 minutes on an English Ivy specimen, the AI generates a focused mission like:

"Spend 5 minutes inspecting the surface this vine is climbing. Find where the aerial rootlets anchor to the trunk or wall and count how many anchor points you can spot without pulling on it."

Why Does Open Innovation Matter?

Building NatureSnap AI with open innovation and open-weight models was a deliberate architectural choice, not an afterthought:

Freedom From Closed API Monopolies: Proprietary AI APIs can change pricing, alter terms of service, deprecate models overnight, or ban accounts without recourse. With open weights like Gemma, the application logic belongs entirely to the community.
True Offline & Edge Potential: The best places to explore nature are often remote trails, deep woods, and mountain valleys where cell reception is non-existent. Open-weight models (especially quantized 2B/9B variants) enable true on-device edge inference via WebGPU and local hardware, making nature exploration viable everywhere.
Privacy by Default: Your personal photos and exploration habits do not need to be harvested, retained, or fed into closed corporate advertising profiles. Images can be processed ephemerally on-device or routed to a private self-hosted endpoint.
Transparent Safety & Prompts: When identifying wild plants and fungi, safety is paramount. Open innovation allows naturalists, mycologists, and educators to inspect the exact prompts, review guardrails (e.g. strict warnings against foraging or handling unknown flora), and improve the model's accuracy.
Zero Barriers for Education: Schools, summer camps, and community nature reserves can deploy NatureSnap without worrying about per-token API bills or credit cards.

My Agent Session

This project was developed with pair programming support via Google DeepMind's Antigravity IDE and the DevRelay toolchain.

Prize Categories

Google Gemini: Build with the powered by Google's Gemini models for advanced AI capabilities (Gemini 3.8 flash High)
Hacktoberfest Open-Source AI Challenge — Week 1: “Touch Grass” (Primary Entry)

“The best part of NatureSnap happens after you put your phone down.”

LectureBuddy: An Open-Source AI That Makes Lecture Notes Easy to Understand

Huzaifa Bin Tariq — Sat, 03 Oct 2026 20:57:29 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

LectureBuddy — Turn Dense Lectures Into Crystal-Clear Notes

What I Built

I built LectureBuddy for my friend and study partner, Alex.

Alex is a brilliant student, but like many college students juggling coursework, jobs, and exams, they frequently get overwhelmed by dense, jargon-stuffed lecture slides and fast-moving professors. Half of Alex's study time wasn't spent actually learning—it was spent deciphering messy smartphone photos of handwritten notebook pages, scrolling through 60-page PDF slide decks, and trying to untangle complex academic jargon into concepts that made intuitive sense.

Alex needed a simple, distraction-free study buddy that could:

Take whatever lecture format they have—a PDF slide deck, a Word document (.docx), or a quick smartphone photo of handwritten notebook pages.
Strip away the intimidating academic fluff and explain the material in warm, beginner-friendly language ("Explain Like I'm 5") with vivid real-world analogies.
Automatically distill The Big Picture, structured high-yield key points, and important terms with flashcard memory hooks.
Generate an interactive comprehension quiz and provide an audio reader (Text-to-Speech) so Alex can listen to lecture breakdowns on the bus or while walking across campus.

That is LectureBuddy: a clean, minimal, distraction-free web app that runs completely in the browser, respects student privacy, and works out of the box with zero required subscription fees or complex setups.

Demo

GitHub Repository: https://github.com/huzaifa-devpk/LectureBuddy.git
Live Demo: https://lecturebuddy.netlify.app

Key Interactive Features Walkthrough

Multi-Format Dropzone: Seamlessly accepts .pdf, .docx, .png, .jpg, .jpeg, and .webp.
Handwritten Notes OCR Engine: Upload a photo of handwritten notebook notes; LectureBuddy enhances ink contrast via an HTML5 canvas and runs client-side OCR with a real-time progress bar.
1-Click Sample Lectures: Includes instant pre-loaded sample notes in Biology (Photosynthesis & Cellular Respiration), Computer Science (Big-O & Data Structures), and History (The Industrial Revolution) so anyone can test-drive the app in one click.
Tabbed Study Workspace:
- Simple Summary & Big Picture: Plain-English intuition, step-by-step breakdown with analogies, and "Why It Matters" in real life.
- Key Points: High-impact bulleted takeaways with clear priority.
- Important Terms & Glossary: Clean definition cards + an interactive 3D Flip Flashcards study mode with Next/Previous card navigation.
- Practice Quiz: Multiple-choice comprehension questions with instant feedback and explanations.
- Ask LectureBuddy (Q&A): Interactive student chat to ask follow-up questions in beginner-friendly terms.
- Text-to-Speech Narration: Built-in audio reader with play/pause controls for hands-free learning.
- Export & Sharing: One-click Markdown study guide export (.md), copy to clipboard, and print-ready stylesheet.
- Theme Toggle: Clean Slate Light mode and Obsidian Dark mode for late-night study sessions.

Code

huzaifa-devpk / LectureBuddy

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

LectureBuddy — Turn Dense Lectures Into Crystal-Clear Notes

What I Built

I built LectureBuddy for my friend and study partner, Alex.

Alex needed a simple, distraction-free study buddy that could:

Take whatever lecture format they have—a PDF slide deck, a Word document (.docx), or a quick smartphone photo of handwritten notebook pages.
Strip away the intimidating academic fluff and explain the material in warm, beginner-friendly language ("Explain…

View on GitHub

Repository URL: https://github.com/huzaifa-devpk/LectureBuddy.git

Project Structure

LectureBuddy/
├── index.html       # Clean, accessible semantic HTML5 interface
├── style.css        # Minimalist design system (Light & Dark theme)
└── script.js        # Client-side document parsers, OCR, & AI engine

How I Built It

I designed LectureBuddy as a 100% frontend-only, zero-server web application using semantic HTML5, vanilla CSS, and vanilla JavaScript. By eliminating heavy backend frameworks and server maintenance, the app is instantly portable, lightweight, and accessible to students anywhere—even without an active internet connection.

1. Client-Side Document & OCR Pipeline

PDF Extraction: Integrated PDF.js directly in the browser to extract text, page numbers, and structural hierarchies from raw binary ArrayBuffers.
Word Document Extraction: Used Mammoth.js to parse .docx files into clean plain text directly within client memory.
Handwriting OCR: Implemented Tesseract.js coupled with a custom HTML5 Canvas image preprocessor that boosts ink contrast and performs grayscale thresholding, making faint handwriting on lined notebook paper easily readable.

2. Open-Source AI Architecture

LectureBuddy is built around open-weight models and open-source NLP:

Built-in Smart NLP Engine (Default): Runs 100% offline in pure JavaScript using sentence scoring, term extraction heuristics, and analogy-generation templates. This guarantees that any student can use LectureBuddy immediately without needing an API key, credit card, or server.
Open-Weight Cloud Inference (Groq & Hugging Face): Students who want deep frontier-grade reasoning can connect their free API key to query open-weight powerhouses like Meta Llama 3.3 70B, Llama 3.2 3B, Qwen 2.5 7B, or Mistral 7B.
Local Ollama Integration: Privacy-conscious students running models locally on localhost:11434 can route requests directly to local open-source models with complete data sovereignty.

Why Does Open Innovation Matter?

Open innovation is crucial for education:

Equitable Access for Students: Closed, proprietary AI platforms are increasingly locked behind costly $20/month subscription walls. A student working part-time or studying in a developing nation shouldn't be priced out of learning tools. Open-source models and browser-native tools make high-quality personalized tutoring universally accessible.
Student Privacy & Data Sovereignty: Academic notes, research drafts, and student thoughts shouldn't have to be harvested to train closed commercial models. Open innovation makes client-side parsing and local open-weight inference possible—meaning Alex's personal notes never have to leave their own laptop.
No Vendor Lock-In: Because LectureBuddy is built on open standards and supports multiple open-weight providers (Groq, Hugging Face, Ollama, and local JS), it will never be disabled by a sudden API deprecation or closed-source pricing hike.

My Agent Session

This application was planned, architected, and built with pair-programming assistance from Google Antigravity Agent.

During the session, the agent:

Established the core study experience (document parsing, ELI5 summaries, flashcards, quiz generator).
Implemented client-side PDF.js, Mammoth.js, and canvas-contrast OCR pre-processing with Tesseract.js.
Refactored the architecture into an ultra-clean, dependency-free frontend application (index.html, style.css, script.js).
Validated multi-format inputs with real test documents.

Prize Categories

Build for a Friend
Most Impactful Open-Source Application
Best Use of Open-Weight AI Models

My Journey Through Google Cloud GenAI Academy APAC Edition Cohort 3 — 2026

Huzaifa Bin Tariq — Sun, 20 Sep 2026 16:41:07 +0000

My journey with the Google Cloud GenAI Academy APAC Edition Cohort 3, organized by Hack2Skill in collaboration with Google Cloud, was my first proper learning experience with Google Cloud and AI agents. Before this program, I had worked with generative AI and built AI-based projects, but this academy gave me an opportunity to understand how AI agents can connect models with tools, data, applications, and cloud infrastructure.

The academy was not just about watching videos or reading theory. It included hands-on workshops, codelabs, and quizzes, followed by an Ideathon Prototype Submission where we had to turn what we learned into a working project.

I received my Gen AI Master Certificate from the Google Cloud GenAI Academy APAC Edition Cohort 3.

The program was divided into three main tracks:

Track 1 — Build and Deploy a Customer-Facing AI Agent
Track 2 — Turn Business Data into Strategic Decisions
Track 3 — Automate Daily Operations with a Productivity Agent

Each track included workshops, hands-on codelabs, and quizzes. The biggest learning for me was seeing how an AI agent can move beyond a simple chatbot and actually work with data, tools, and cloud services.

Track 1 — Build and Deploy a Customer-Facing AI Agent

The first track introduced me to building an AI agent for customer-facing applications.

One of the hands-on codelabs focused on deploying a RAG AI Agent in Streamlit using Google ADK and Cloud Run.

The example was based on a coffee shop. The goal was to build an AI Barista agent that could answer customer questions and make recommendations based on a menu dataset.

The codelab introduced several important concepts:

Google Agent Development Kit (ADK) for building the AI agent
Gemini as the underlying AI model
Retrieval-Augmented Generation (RAG) to ground the agent's responses in external information
A menu dataset containing coffee items, tags, and allergens
Streamlit for creating the chat interface
Cloud Run for deploying the application

What I found interesting was that the agent was not simply generating answers from the model's general knowledge. It could retrieve information from the menu data and use that information to provide more relevant recommendations, including allergen-related information.

This was my first practical experience seeing how an AI agent, RAG, an application interface, and cloud deployment can work together as one system.

Track 2 — Turn Business Data into Strategic Decisions

The second track focused on using AI agents with business data.

The codelab introduced building and deploying AI agents with Gemini and the BigQuery MCP Server on Cloud Run.

This track helped me understand how an AI agent can interact with structured data instead of only responding to normal text prompts.

The technologies and concepts included:

Agent Development Kit (ADK)
Gemini
BigQuery
BigQuery MCP Server
Model Context Protocol (MCP)
Cloud Run

The idea of MCP was especially interesting to me. Instead of keeping an AI agent isolated, MCP provides a standardized way for AI applications and agents to connect with external tools and data sources.

With the BigQuery MCP Server, an AI agent can access and analyze structured business data stored in BigQuery.

This showed me another side of AI agents: they can act as an interface between users and complex data systems, helping turn raw data into useful information and decisions.

Track 3 — Automate Daily Operations with a Productivity Agent

The third track focused on using an AI agent to automate operational tasks.

The codelab demonstrated a personal agent running on a Cloud Run service, using a coffee shop manager scenario.

The agent could analyze business data and perform tasks through a chat interface.

One of the interesting parts was the use of Cloud Run sandboxes. The agent could dynamically write and execute Python code inside a secure, isolated environment to solve analytical problems.

For example, the coffee shop manager could have the agent analyze Point-of-Sale data together with a university graduation schedule. The agent could then identify possible operational bottlenecks, such as relationships between drink complexity and cashier staffing.

The agent could generate recommendations for:

Staffing
Inventory
Operational planning

It could also prepare operational TODOs, while requiring explicit permission before making changes.

This track helped me understand that productivity agents are not limited to answering questions. They can analyze information, execute code, and assist with real operational workflows.

From Learning to Building — The Ideathon

After completing the learning tracks, the academy moved from learning concepts to actually building a prototype.

The Ideathon Prototype Submission challenged us to bring an idea to life using Google AI and Google Cloud technologies.

The submission required a working prototype along with a social post explaining the solution, technical approach, and use of Google Cloud tools.

The evaluation criteria focused on four areas:

Authenticity — an original and genuinely built solution
Usability — an intuitive and accessible experience
Stability — a reliable working prototype
Security — appropriate practices for authentication, data protection, and cloud infrastructure

For my submission, I built Reflectora-AI.

Reflectora-AI — A Personal AI Journal

Reflectora-AI is a personal AI-powered journaling application designed to help users reflect on their thoughts and turn them into useful insights.

Instead of treating journaling as just storing text, I wanted to explore how generative AI could help users interact with their own journal entries in different ways.

The application includes different AI modes such as:

Reflect — explore thoughts and provide reflective responses
Summarize — turn longer journal entries into concise summaries
Brainstorm — generate ideas based on the user's thoughts
Action Plan — turn reflections into practical next steps
Ask Gemini — interact with the AI about the journal content

The project also focuses on user authentication and personal data management.

For the prototype, I worked with Google technologies including Google AI Studio, Gemini, and Google Cloud services, while exploring concepts around authenticated AI applications and cloud deployment.

The project github repository is available here.

I also created a project demonstration video showing the prototype and how it works.

What I Learned

The biggest takeaway from the academy was understanding that AI agents are more than chat interfaces.

Through the three tracks, I saw different ways an agent can:

Interact with customers and retrieve information.
Connect with structured business data.
Execute code and assist with operational workflows.
Work with tools and external systems.
Be deployed as real applications using cloud infrastructure.

The academy also gave me more confidence in exploring Google Cloud and agentic AI development.

Before the program, concepts such as ADK, MCP, RAG, Cloud Run, and AI agents were areas I was still exploring. After completing the hands-on tracks and building my own prototype, these technologies became much more practical and understandable.

I am now looking forward to continuing my journey with Google Cloud, Gemini, AI agents, and cloud-based application development and building more practical projects along the way.

How I Cleared AWS Cloud Quest: Cloud Practitioner and What I Learned

Huzaifa Bin Tariq — Wed, 16 Sep 2026 04:55:04 +0000

I recently completed AWS Cloud Quest: Cloud Practitioner, and honestly, it was one of the most enjoyable ways I have learned cloud computing so far.

What made it different for me was the gamified learning experience. Instead of only watching lectures and taking quizzes, I was solving challenges, building cloud solutions, completing assignments, and moving through a virtual environment.

It actually felt more like playing a game while learning cloud concepts.

What I Learned

During the quest, I completed hands-on challenges covering different areas of AWS, including:

Cloud Computing Essentials
Cloud First Steps
Computing Solutions
Networking Concepts
Cloud Economics
Databases in Practice
Connecting VPCs
First NoSQL Database
File Systems in the Cloud
Core Security Concepts
Auto-Healing and Scaling Applications
Highly Available Web Applications

One thing that really stood out to me was how many different parts are involved in building a reliable cloud application.

For example, creating an EC2 instance or an S3 bucket is only one part of the process. Security is also very important. You need to understand who can access your resources, what permissions they have, and how to protect your cloud environment.

Learning about IAM, networking, security, and best practices helped me understand that in the cloud, simply making something work is not enough. It also needs to be secure, reliable, and properly managed.

I also enjoyed learning about cloud economics. Before this, I mostly thought of cloud computing as using online servers and services. But the quest showed me that choosing the right resources and understanding how they are used can have a big impact on cost.

Things like avoiding unnecessary resources, choosing the right services, and scaling based on demand are important when working with cloud platforms.

The sections on VPCs, databases, file systems, auto-healing, scaling, and highly available applications also helped me connect individual AWS services with the bigger picture.

Instead of seeing each service separately, I started to understand how different AWS services can work together to build applications that are more reliable and scalable.

My Takeaway

Overall, AWS Cloud Quest gave me a much better understanding of the basics of cloud computing and AWS.

The biggest thing I liked was that I was not just reading about concepts. I was actually doing things and solving problems, which made the learning process much easier to remember.

If you are starting with AWS or cloud computing and want something more interactive than a traditional course, I would definitely recommend giving AWS Cloud Quest: Cloud Practitioner a try.

Here's my Credly badge.

I'm looking forward to building more projects with AWS and continuing my cloud learning journey.

Attending my first-ever tech event, an AWS event!

Huzaifa Bin Tariq — Mon, 07 Sep 2026 10:48:03 +0000

Huzaifa Bin Tariq

Sep 7

My First AWS Event — A New Start

#awscommunity #devops #cloudcomputing #pakistantech

2 min read

My First AWS Event — A New Start

Huzaifa Bin Tariq — Mon, 07 Sep 2026 10:38:54 +0000

Recently, I attended my first ever tech event, and honestly, it was a very different experience for me because it was my first AWS event.

Before this event, most of my focus was on web development and full-stack development. I was mostly thinking about HTML, CSS, JavaScript, frontend, backend and building websites. But AWS introduced me to a completely different side of technology.

During the event, I heard a lot of new terms like S3, EC2, CI/CD pipelines, Cloud, DevOps and many more. At first, some of these words were totally new for me, hehe. I knew about cloud and AWS, but I never really explored them deeply.

The interesting part was that I started understanding how a website or application is not only about writing code. There is also a whole world behind it — where applications are hosted, how servers work, how data is stored, how applications are deployed, and how developers can automate these things.

This really changed my mindset.

I started thinking beyond just “How do I build this website?” and more about “How does this application actually work in the real world?”

I also got introduced to DevOps and cloud technologies in a much better way. I realized that there is so much more to learn after becoming a web or full-stack developer.

Another thing I really enjoyed was meeting new people and listening to experienced speakers. Their talks and experiences gave me a better idea about the industry and the importance of continuously improving your skills.

One thing I learned from this experience is that skills matter, but learning how to use those skills in the right way matters even more. And one more lesson for me was about AI. AI can help us a lot, but blindly trusting AI is not the right way. We still need to understand things ourselves, verify information and build our own skills.

What I liked most about this event was not just learning about AWS. It made me more interested in attending tech events, meeting people, learning from others and exploring areas outside my usual comfort zone.

This was just my first AWS event, but I feel like it opened a new door for me — towards Cloud, AWS and DevOps.

A big thanks to AWS User Group Islamabad and everyone who made this event possible. And special thanks to the amazing speakers Zunaira Shafaq and Sharoon Amin Akhtar for sharing their knowledge and experiences.

Looking forward to learning more, building more and attending more events! Have you ever attended an AWS or cloud event that changed the way you think about technology? I'd love to hear about your experience. Here’s my LinkedIn post about the event if you’d like to check it out.