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

[Boxuan-Matty-Lin]

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.)

[github-actions]

This GitHub issue outlines the development of version 0.1 of the KopiShop app, which will serve as the Minimum Viable Product (MVP). The goal is to create a basic, navigable app shell with three main features: a bottom toolbar with tabs for key sections, a branded Welcome page with a call-to-action (CTA) button, and a functional Kopi Maker screen for users to generate custom Kopi drink names. The toolbar will be implemented with Expo Router and styled using NativeWind, while the Welcome page will provide branding and navigation to the Kopi Maker. The Kopi Maker will allow users to customize their beverage using four options (milk, sugar, strength, temperature) and preview the generated drink name in real time. This parent issue serves as an epic for the three sub-tasks (Bottom toolbar, Welcome page, and Kopi Maker screen) and specifies acceptance criteria like successful app navigation and state management using Zustand. Features such as order management, backend integration

[Boxuan-Matty-Lin]