Designing a Restaurant Ordering System with WeChat Mini Program — MVP Strategy in Practice

A hands-on account of designing an ordering system for a restaurant using WeChat Mini Program (微信小程序). From tech stack selection to MVP scoping to the gotchas along the way — the real story.

Background

The client is a Chinese restaurant operated by a Japanese LLC. They already had an ERP backend (inventory and sales management) with product data and stock available via API. The goal: layer a WeChat Mini Program on top so Chinese customers can order from their phones.

Tech Stack: Taro + React + TypeScript

We evaluated three frameworks for Mini Program development:

Option	Pros	Cons
WeChat Native (WXML/WXSS)	Official docs, no abstraction overhead	Proprietary syntax, low reusability
uni-app (Vue-based)	Multi-platform support	Vue-dependent, China-centric ecosystem
Taro (React-based)	React/TypeScript support, type safety	Slightly complex build config

Why we chose Taro:

• The team was already familiar with React/TypeScript
• Same codebase can output an H5 (web) version in the future
• Type definitions catch API integration bugs early

Scoping the MVP Was the Most Important Work

The initial requirements were ambitious: ordering + payment + delivery management. But the most time-consuming part turned out to be cutting scope.

Phase 1 (MVP): Browse + Order Only

• Product listing (by category)
• Cart
• Order submission (store confirms receipt)
• Payment is offline (pay at counter / existing methods)

Phase 2: WeChat Pay Integration

Phase 3: Delivery Management + Points System

Why WeChat Pay got cut — it was a genuine blocker:

Setting up WeChat Pay (微信支付) requires a mainland China bank account. Japanese companies can apply as "overseas merchants" (境外商户), but the approval process is slow and requires confirming the company's banking status first.

Technically it's implementable right away, but the business paperwork is the bottleneck. Putting it in Phase 1 would stall the entire project. Without online payment, the "browse menu → place order → pay at counter" flow still works. So we shipped that first.

shop.techsfree.com — Building the API Endpoint

The Mini Program needs a public endpoint to reach the ERP API. The existing ERP backend runs on the internal network (192.168.x.x:8520), so we set up Nginx as a reverse proxy.

server {
    listen 443 ssl;
    server_name shop.techsfree.com;

    # Let's Encrypt
    ssl_certificate /etc/letsencrypt/live/shop.techsfree.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/shop.techsfree.com/privkey.pem;

    location /api/ {
        proxy_pass http://127.0.0.1:8520/api/;
        # CORS headers for Mini Program
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    }
}

SSL certificate via Let's Encrypt (certbot). The Mini Program only allows HTTPS — this is non-negotiable.

Gotcha: NAT Hairpin on LAN

During development, accessing shop.techsfree.com from inside the LAN timed out. The router didn't support NAT hairpin (NAT loopback). Workaround: use the internal IP directly during development. Not an issue in production since the Mini Program accesses from outside — but it's an annoying surprise during testing.

AppSecret Verification — Confirm access_token Works First

The first thing to do in any Mini Program project: verify you can get an access_token with your AppID and AppSecret.

curl "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=YOUR_APPID&secret=YOUR_SECRET"

If this works, your WeChat API connection is solid. If it fails, you likely have the wrong AppID type (Official Account vs Mini Program) or an IP whitelist misconfiguration. Do this smoke test in the first 5 minutes.

Design Document Structure

The final design document covered:

1. Project overview and goals
2. Technical architecture (Taro + ERP API + WeChat API)
3. Page structure (5 screens: Home / Category / Product Detail / Cart / Order Confirmation)
4. API design (wrapper layer over existing ERP API)
5. Phase breakdown and milestones
6. Risks and blockers (WeChat Pay approval, service category changes)

Key Takeaways

• MVP is 90% about what you cut, not what you add. Dropping payment from Phase 1 was the decision that kept the project moving.
• Build business process lead times into your technical design. WeChat Pay approval can take weeks to months. Use that time to nail the UI and user flow.
• Smoke test in the first 5 minutes. access_token retrieval, SSL certificate, API connectivity. Confirm the foundation works before designing anything.

---

Tags: WeChat MiniProgram MVP Taro React Nginx SSL RestaurantTech BuildLog