NYORK Menu & Order App

A cross-platform mobile application prototype built using Ionic 8 + Angular 21 for N.Y.O.R.K. Café, a local café in Cabanatuan City.

This system was developed as part of the IT-IPT02 - Mobile Application System Development for Cabanatuan City Businesses course project.

---

Project Overview

The NYORK Menu & Order App provides café customers with a smooth and efficient digital experience.

It allows them to browse the menu, manage their cart, compute total bills with taxes and discounts, and track loyalty points. All data is mocked and persisted via localStorage (no live database).

---

Key Features

Home Dashboard

• Featured products showcase
• Category-based exploration
• Trending products (top-rated items)
• Loyalty points progress bar
• Quick access to cart

Menu & Products

• Full menu listing with category filters
• Product search functionality
• Product ratings and reviews display
• Product variations (sizes, flavors)
• Add-ons support (extra shots, toppings)
• "Starting at" price indicators for variable products

Cart & Checkout (Multi-Step Flow)

1. Order Type - Select dine-in or take-out
2. Menu - Browse and add items during checkout
3. Cart - Review, edit, or remove items
4. Payment - Apply vouchers, select payment method (GCash/Cash)
5. Confirmation - Order summary and completion

Payment & Discounts

• Tax calculation (12%)
• Service charge calculation (5%)
• Voucher system (percentage and fixed discounts)
• Multiple payment methods

Loyalty Program

• Points tracking and accumulation
• Cups loyalty system (collect 10 cups for rewards)
• Redeemable rewards catalog
• Task/mission system for earning bonus points
• Progress tracking toward next reward tier

User Profile

• User registration and login
• Profile editing
• Order history with details
• Account management

Additional Pages

• About Nyork Cafe (location, contact, offerings)
• Help Center
• Terms & Conditions

---

Technology Stack

Layer	Technology
Framework	Ionic 8 + Angular 21
Language	TypeScript, HTML, SCSS
State	RxJS BehaviorSubject
Persistence	localStorage (mock database)
Linting	Biome + Ultracite
Formatting	Prettier + Biome
Testing	Karma + Jasmine

---

Project Structure

src/
 app/
    models/         # TypeScript interfaces
    pages/          # Feature pages
       home/       # Dashboard
       menu/       # Product listing
       checkout/   # Multi-step checkout flow
       loyalty/    # Loyalty program
       profile/    # User profile & orders
       login/      # Authentication
       register/   # User registration
       ...
    services/       # Business logic & state
 assets/
    mock-data/      # JSON mock database files
 theme/              # Global styles

---

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

1. Clone the repository:

git clone https://github.com/cedricangulo/nyork-cafe.git
cd nyork-cafe

2. Install dependencies:

pnpm install

3. Run the development server:

pnpm start

4. Open in browser: Navigate to http://localhost:4200

Available Scripts

Command	Description
pnpm start	Start development server
pnpm build	Build for production
pnpm test	Run unit tests
pnpm lint	Check code with Biome
pnpm lint:fix	Fix linting issues
pnpm format	Format code

---

Demo Account

The app auto-seeds a demo user on first launch:

• Email: demo@nyorkcafe.test
• Password: demo123

---

About N.Y.O.R.K. Café

N.Y.O.R.K serves a wide variety of hot and cold coffee, ice blended favorites, and signature frappes. Also, we have a delicious line-up of pastries, tasty goodies and food (pasta, sandwiches, rice meals, appetizers and salads) perfect with your coffee.

Location: M. De Leon corner General Tinio Extension, Cabanatuan City
Contact: 0923 625 6163
Email: nyork.cabanatuan@gmail.com
Services: Dine In, Take Out