MVP v0.1 – App shell with toolbar, Welcome page & Kopi Maker #2

Summary

MVP v0.1 is the first usable version of KopiShop.

Goal: have a basic, navigable app shell with:

• A bottom toolbar (tabs) for main sections
• A branded Welcome (Home) screen
• A functional Kopi Maker screen that can generate a Kopi name based on user options

This issue acts as the parent (epic) for the 0.1.x tasks:

• 0.1.1 – Bottom toolbar
• 0.1.2 – Welcome page
• 0.1.3 – Kopi Maker

Scope (v0.1)

0.1.1 – Bottom toolbar (Tabs)

• Set up Expo Router tabs under (tabs)/_layout.tsx
• Define 3–4 tab entries (e.g. Home, Order / Kopi, Orders, Me)
• Use @expo/vector-icons for tab icons
• Apply basic theming with NativeWind (colors, height, active/inactive styles)

0.1.2 – Welcome page (Home)

• Implement app/(tabs)/index.tsx as the Welcome screen
• Show KopiShop branding (title, short description, “learn to order Kopi like a local”)
• Add a primary CTA button: “Start Kopi Maker”
• When the CTA is pressed, navigate to the Kopi Maker screen

0.1.3 – Kopi Maker screen

• Implement a dedicated screen for building a Kopi order
  • Define KopiOptions types (milk, sugar, strength, temperature)
  • Implement a buildKopiName(options) helper to generate a Kopi string (e.g. kopi c siu dai peng)
  • Manage state with Zustand (e.g. useKopiBuilderStore)
• UI:
  • Show current Kopi name in a preview section
  • Four option groups (milk / sugar / strength / temperature) with selectable chips/buttons
  • Each change updates the Kopi name in real time
• (Optional, for later versions): cup animation and “Add to cart” integration

Out of scope (future versions)

These are not required for v0.1, but will be handled in later versions (e.g. v0.2+):

• Real order/cart management
• Order history list
• User profile persistence
• Supabase / backend integration
• Detailed cup/stir animations
• Australian coffee mode (Flat white, Magic, etc.)

Acceptance Criteria

• The app runs on iOS simulator via pnpm start & i without runtime errors.
• A bottom toolbar is visible and can switch between at least:
  • Home
  • Orders (placeholder)
  • Me (placeholder)
• Home screen:
  • Shows KopiShop branding and description
  • Has a CTA button that navigates to the Kopi Maker screen
• Kopi Maker screen:
  • Allows selecting milk, sugar, strength, and temperature
  • Displays a generated Kopi name that updates when options change
• CI workflow passes (lint + typecheck) on main and pull requests.

Tasks

• 0.1.1 – Bottom toolbar (Tabs)
• 0.1.2 – Welcome page (Home)
• 0.1.3 – Kopi Maker screen

(Each of the above should be created as a separate issue and linked back to this parent issue.)