KNIGHT
Work / Case Study / Food Tech

KnightCraving

How a 10-second habit became a product idea — and what I learned building it.

Status
Mostly Done
Category
Food Tech · Price Comparison
Stack
React · JS · API Integration
Timeline
4–6 Weeks

People aren't lazy. The experience is broken.

Order food in India today and you're doing mental math. Zomato or Swiggy? Same restaurant, different prices, different coupons, different delivery fees. The user has to open two apps, compare totals, factor in wallet credits — all before they've even decided what to eat.

This isn't a rare edge case. Every delivery order triggers this friction. It's a 30–60 second tax on a decision that should take 5 seconds.

"Why am I doing price research just to order biryani?"

— A real thing I said to myself that turned into this product
The Friction

Switch between two apps, apply coupons mentally, estimate delivery fees, compare total prices — for every single order.

The Actual Need

See the final price side-by-side. One glance. No math. Pick the cheaper option and order. Done.

Three approaches. One chosen.

Before writing a line of code, I mapped three structurally different approaches. Each had a different product surface, technical risk profile, and growth ceiling. Here's how I evaluated them:

A
Approach A
Browser Extension

Inject a comparison widget inside Zomato/Swiggy pages. Minimal UI, contextual, zero context switch.

Dropped — API walls
B
Approach B
Standalone Web App

Dedicated search interface that pulls prices from both platforms and shows a side-by-side breakdown. Platform-independent.

✓ Chosen — Most Viable
C
Approach C
WhatsApp Bot

Send "pizza near me" to a bot, get a comparison back. Low friction, familiar channel.

Dropped — High ops cost
Key Insight

The browser extension was elegant but brittle — Zomato and Swiggy actively resist scraping. The bot was delightful but required backend infrastructure and real-time data that wasn't realistic at this stage. A standalone web app was the smallest viable surface to prove the core value.

How it actually got built.

01
Week 1 · Discovery
Validating the friction was real

Talked to 7 people who order food regularly. Asked them: how often do you compare platforms before ordering? 6 of 7 said "always" or "sometimes". None had a good solution. That was enough signal.

Early Assumption
"If users could see both prices in one view, they'd choose the cheaper option 80%+ of the time."
02
Week 2 · Architecture
Solving the data problem first

The hardest part wasn't UI — it was data. Neither Zomato nor Swiggy offers a public price API. I explored official APIs (restricted), unofficial scrapers (fragile), and mock data with real UX flows (viable for MVP). Started with mock data, built real UI on top, planned real integration as V2.

Architecture Decision
React frontend → Abstracted data layer → Swap mock for real API later. This kept the UI decoupled from data source, so the product could be shown and validated without being blocked on API access.
03
Week 3 · Build
The core comparison interface

Built the search, comparison table, and price breakdown components. Focused on scanability — users should be able to make the decision in under 3 seconds of looking at the screen. Color-coded delta, sorted by total cost, platform logos for instant recognition.

04
Week 4–5 · Refinement
What feedback broke and what it built

Showed it to 5 people. Biggest feedback: "I want to see the discount applied, not just the base price." That forced me to rethink the data model — I needed to track promo codes, platform discounts, and delivery fees separately before surfacing a final number. Rebuilt the calculation logic around this.

Lesson
The UI wasn't the hard part. The data model was. A comparison product lives or dies by the accuracy and transparency of how it calculates the final number.
05
Week 6 · Where It Is Now
Done enough to prove the point

The product works as a functional proof of concept. The comparison flow is complete, the UI is clean, and the data architecture is ready to connect to a real API. It's not launched — but it's built with the intent to launch.

Why each piece was chosen.

Every tech decision was made around one constraint: this needs to be easy to swap out when real data arrives.

React + Component Architecture

The comparison card, price breakdown, and search input are all independent components. Swapping the data source doesn't touch the UI layer. This was intentional from day one.

Abstracted Data Layer

A single fetchPrices() function is the only thing that knows about the data source. The rest of the app is unaware whether it's talking to a mock or a live API.

No Backend (Yet)

Running entirely client-side. When real API keys are needed, a lightweight Node proxy will be added — but the frontend won't change. Zero premature infrastructure.

Dynamic Data Model

Each price entry stores base price, delivery fee, platform discount, coupon, and final total separately. This lets the UI show transparency — not just the bottom line.

React JavaScript (ES6+) CSS Modules Fetch API Custom Hooks Node.js (planned) REST API (planned)

What I actually learned.

7+
Users Interviewed
3
Approaches Explored
Core Pivots
<3s
Target Decision Time
Biggest Learning

The comparison itself isn't the product. The trust in the comparison number is the product. If users doubt the accuracy of the price shown, they'll still open both apps. Transparency in how you calculate the total is what makes the product worth using.

What worked. What I'd change.

What Worked

Starting with user interviews before touching code. It prevented me from building features nobody asked for.

Abstracting the data layer early. It kept the frontend clean and made pivoting the data source painless.

Mapping multiple approaches before picking one. I avoided two dead-end paths that would've wasted weeks.

Designing for the 3-second decision. Every layout choice was measured against that benchmark.

What I'd Change

Spent too long on polish before testing with real users. Should have shown a rough prototype at Week 1, not Week 4.

Underestimated how much the data model would drive UI decisions. Should have defined the data shape before designing components.

No defined success metric from the start. "Users should choose faster" is too vague — should have been "users make a decision in under 3 seconds on first visit."

The roadmap I'd actually build.

V2 Roadmap
If I were to take this further

The MVP proves the concept. Here's what I'd prioritize to make it a product people actually use daily:

01

Real API Integration — Connect a price aggregation layer (or unofficial scraper with rate limiting) to replace mock data with live platform prices.

02

Coupon Database — Automatically surface the best active coupon per platform per user cohort. This is the feature that turns "useful" into "indispensable."

03

Mobile-First PWA — The use case is almost always mobile (person is hungry, phone in hand). A PWA with offline-capable search history makes this a real habit.

04

Order History + Savings Tracker — Show users how much they've saved by choosing the cheaper platform. Retention through value visibility.