Build a real Hardware POS mobile app in one afternoon.

I want to build HardwarePOS Mobile — an Expo / React Native point-of-sale app for
a small hardware shop in Uganda. The shop owner uses it on a phone or tablet to
ring up sales of items like nails, paint, plumbing fittings, electrical supplies,
and hand tools. Single user (the shop owner / cashier) — no team features, no
customer-facing storefront, no online ordering. Strictly in-shop POS that works
even on a slow connection.

Platforms: iOS + Android (Expo Web optional for testing).

Core flows:

1. POS Sale (the main screen): search products by name or SKU, tap to add to
   cart, adjust quantities with steppers, see live total. Pick payment method
   (Cash / Mobile Money via DGateway / Card via Stripe). For mobile money,
   the customer's phone number is captured and an STK push prompt is sent;
   the cashier sees a "Check your customer's phone" screen until payment
   completes. Complete sale, then offer a printable / shareable receipt.

2. Inventory: list products with name, SKU, category, price (UGX), and stock
   quantity. Add new products, edit price/stock, delete. Low-stock alerts when
   stock falls below a configurable threshold per product.

3. Sales history: list of past sales with date, total, payment method, items
   count, customer (if captured). Filter by date range and payment method. View
   a single sale's full line items.

4. Dashboard: today's sales total + transaction count, top 5 products this week,
   low-stock alert count, weekly revenue chart (last 7 days).

Seed the database with these categories on first run: Tools, Hardware, Paint,
Plumbing, Electrical, Other.

Auth: email + password via Better Auth. Single user role for now.

Payments:
- DGateway (mobile money — UGX) for the Ugandan market — required.
- Stripe (cards / Apple Pay / Google Pay) for tourists / card customers — optional.

No image uploads — text-only products (name + SKU + category is enough).
Currency: UGX with comma-separated formatting and no decimals (25,000 not 25,000.00).

Dark mode only (faster to ship; the cashier works in dim shop light anyway).
Push notifications: Yes (low-stock alerts at end of day).
Deep linking: No (single-user, no shared content).
Offline support: reads work offline (TanStack Query persister); writes need
connectivity (sales can't be recorded without confirming payment).

Aesthetic: clean dashboard like Linear / Vercel — bold large numbers so the
cashier can read totals at a glance. Brand color: indigo (#6366F1).

Deployment: EAS Build production for both iOS + Android, EAS Submit to App
Store + Google Play, EAS Update for OTA JS-only patches, EAS Hosting for the
Expo API Routes backend.

mkdir hardware-pos-mobile && cd hardware-pos-mobile

# Move the 4 generated files (project-description, project-phases,
# design-style-guide, prompt) from Claude into this folder.

git clone https://github.com/MUKE-coder/vibekit-native.git /tmp/vibekit-native

cp /tmp/vibekit-native/master_prompt.md ./master_prompt.md
cp /tmp/vibekit-native/vibekit-native-components.md ./vibekit-native-components.md
cp /tmp/vibekit-native/pre-deploy-review.md ./pre-deploy-review.md

hardware-pos-mobile/
├── master_prompt.md                # framework — coding rules
├── vibekit-native-components.md    # framework — component registry
├── pre-deploy-review.md            # framework — pre-submission audit prompt
├── project-description.md          # generated by Claude
├── project-phases.md               # generated by Claude
├── design-style-guide.md           # generated by Claude
├── prompt.md                       # generated by Claude — paste this next
│
# ONE of these from Step 3 (depending on your agent):
├── .claude/skills/vibekit-native/SKILL.md   # Claude Code
├── .cursor/rules/vibekit-native.mdc         # Cursor
├── AGENTS.md                                # Codex CLI / universal
├── .clinerules                              # Cline
├── .windsurfrules                           # Windsurf
├── GEMINI.md                                # Gemini CLI
└── # No Expo scaffold yet — Phase 1 creates it

# Database (Neon — paste the pooled connection string)
DATABASE_URL=postgresql://user:pass@host-pooler.neon.tech/db?sslmode=require

# Better Auth (server-side)
BETTER_AUTH_SECRET=<run: openssl rand -base64 32>
BETTER_AUTH_URL=http://localhost:8081

# Mobile app config (safe to bundle — prefix EXPO_PUBLIC_)
EXPO_PUBLIC_API_URL=http://localhost:8081
EXPO_PUBLIC_APP_SCHEME=hardwarepos

# DGateway (server-side ONLY — never EXPO_PUBLIC_)
DGATEWAY_API_KEY=dgw_test_...
DGATEWAY_API_URL=https://dgatewayapi.desispay.com
DGATEWAY_WEBHOOK_SECRET=whsec_...
APP_URL=http://localhost:8081

# Sentry (DSN is safe to bundle)
EXPO_PUBLIC_SENTRY_DSN=https://...@sentry.io/...

# Migrate the database
pnpm prisma migrate dev --name init

# Start Expo
pnpm expo start

# Then press 'i' to launch iOS simulator, or 'a' for Android emulator,
# or scan the QR with Expo Go on your physical phone.

# Foundation primitives
npx vibekit-native install ui

# Shared layouts (screen-header, search-bar, filter-sheet, filter-sort-bar)
npx vibekit-native install shared

# Commerce (product-card, cart-item, price-display, order-card,
#   order-summary, checkout-form, wishlist-button, review-card,
#   order-timeline, product-header)
npx vibekit-native install commerce

# Bottom tabs + drawer
npx vibekit-native install nav

# Stat cards + chart-line / chart-bar / chart-pie + dashboard shell + data-table
npx vibekit-native install dashboard

# Payments (DGateway mobile money + Stripe)
npx vibekit-native install payments

export async function POST(request: Request) {
  const session = await auth.api.getSession({ headers: request.headers });
  if (!session) return Response.json({ error: 'Unauthorized' }, { status: 401 });

  const parsed = CreateSaleSchema.safeParse(await request.json());
  if (!parsed.success) return Response.json({ error: 'Invalid input' }, { status: 400 });

  const { items, paymentMethod, customerName, customerPhone, total } = parsed.data;

  // Single transaction: check stock + decrement + create sale, all-or-nothing
  const sale = await prisma.$transaction(async (tx) => {
    for (const item of items) {
      const product = await tx.product.findUnique({ where: { id: item.productId } });
      if (!product) throw new Error('Product not found');
      if (product.stock < item.quantity) throw new Error(`Insufficient stock for ${product.name}`);
    }

    // Decrement in one shot
    await Promise.all(
      items.map((item) =>
        tx.product.update({
          where: { id: item.productId },
          data: { stock: { decrement: item.quantity } },
        }),
      ),
    );

    return tx.sale.create({
      data: {
        userId: session.user.id,
        total,
        paymentMethod,
        customerName,
        customerPhone,
        items: { create: items.map((i) => ({ productId: i.productId, quantity: i.quantity, unitPrice: i.unitPrice })) },
      },
      include: { items: true },
    });
  });

  return Response.json({ data: sale }, { status: 201 });
}

import crypto from 'node:crypto';
import { prisma } from '@/src/lib/prisma';

export async function POST(request: Request) {
  const rawBody = await request.text();
  const signature = request.headers.get('X-DGateway-Signature') ?? '';

  const expected = crypto
    .createHmac('sha256', process.env.DGATEWAY_WEBHOOK_SECRET!)
    .update(rawBody)
    .digest('hex');

  if (
    !signature ||
    !crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))
  ) {
    return new Response('Invalid signature', { status: 401 });
  }

  const event = JSON.parse(rawBody);

  // Dedupe — DGateway retries up to 3 times
  const existing = await prisma.paymentEvent.findUnique({
    where: { reference: event.reference },
  });
  if (existing) return new Response(null, { status: 200 });

  await prisma.$transaction([
    prisma.paymentEvent.create({
      data: {
        reference: event.reference,
        status: event.status,
        provider: event.provider,
        providerRef: event.provider_ref,
        payload: event,
      },
    }),
    prisma.sale.updateMany({
      where: { paymentReference: event.reference },
      data: { paymentStatus: event.status },
    }),
  ]);

  return new Response(null, { status: 200 });
}

# Switch DATABASE_URL to the production Neon URL temporarily
export DATABASE_URL="postgresql://..."

pnpm prisma migrate deploy
pnpm prisma db seed

eas secret:create --scope project --name DATABASE_URL --value "postgresql://..." --type string
eas secret:create --scope project --name BETTER_AUTH_SECRET --value "$(openssl rand -base64 32)" --type string
eas secret:create --scope project --name DGATEWAY_API_KEY --value "dgw_live_..." --type string
eas secret:create --scope project --name DGATEWAY_WEBHOOK_SECRET --value "whsec_..." --type string
# ... and any others

eas deploy --prod

# Copy the returned URL (e.g., https://hardware-pos-mobile.expo.app)
# Update app.json:
#   "extra": { "apiUrl": "https://hardware-pos-mobile.expo.app" }

eas build --profile production --platform all

# Takes 20-30 minutes. EAS handles signing for both stores.
# When done you'll get .ipa (iOS) + .aab (Android) downloadable from the EAS dashboard.

eas submit --profile production --platform ios
eas submit --profile production --platform android

# iOS goes to TestFlight Internal Testing first.
# Android goes to Play Console Internal Testing.
# Walk through both with 3+ humans before promoting to production.

# Fixed a typo? Renamed a button?
eas update --branch production --message "Fix checkout button label"

# Users get the patch on next app open. No 24-72hr review wait.
# (Native changes — new permissions, new deps — still require a rebuild + resubmit.)