Student Details

---

Name: Khanyisa Shikwambana

Student Number: ST10476385

Course: Higher Certificate in Mobile and Application Development

Module: Mobile App Scripting

Institution: IIE Rosebank College

Date of Submission: 2025-11-10

Lecturer: WELCOME ZARANYIKA

YouTube Link https://youtu.be/D6zB3dQMptE

GitHub Link: https://github.com/ST10476385/MAST5112_POE_.git

---

---

Project Title

Luxury Dining Menu Application

---

Project Summary

The Luxury Dining Menu Application is a fine dining digital menu designed using React Native with Expo. It allows restaurant managers to manage their dishes by adding, editing, filtering, and removing menu items in a structured and user-friendly interface.

The application aims to demonstrate practical understanding of state management, component-based architecture, TypeScript usage, and UI navigation in React Native. It includes features such as dynamic item listing, average price calculation, filtering by course type, and data organization through multiple screens.

This project fulfills all the rubric requirements provided, showcasing both technical accuracy and professional design practices.

• Platform: React Native (Expo)
• Language: TypeScript (strict)
• Key features implemented: menu data entry (dish name, description, course, price), predefined courses, home screen menu list, total item count, average price per course (PoE), separate Manage screen to add/remove items, filter screen to filter by course, splash screen (5s)

---

App Preview

🧩 Component Enhancement

This section outlines all major component enhancements and refactoring implemented during the final phase of the project. Each improvement was made to optimize performance, improve user experience, and align with professional mobile development standards.

1. Splash Screen Enhancement

• Added a five-second splash screen featuring a blurred luxury restaurant background and the title “Christoffel — Private Chef”.
• Improved user experience by providing a polished introduction that reflects the brand’s fine-dining aesthetic.
• Integrated automatic navigation to the HomeScreen once loading is complete.

2. Home Screen Enhancements

• Redesigned layout to display a clear menu summary section, including total items and average prices by course.
• Added dynamic data binding, ensuring real-time updates when items are added or removed.
• Implemented category summaries (Starters, Mains, Desserts, Appetizers, Sides, Beverages) with responsive text and spacing for better readability.
• Enhanced overall visual design with padding, font consistency, and spacing improvements.

3. Manage Menu Screen Enhancements

• Refactored input fields for better clarity: Dish Name, Description, Course, and Price.
• Integrated a dropdown component for selecting predefined course types.
• Added real-time validation for form fields to prevent blank or invalid submissions.
• Improved button design — the “Add Item” button now uses a vibrant orange color to draw focus and enhance usability.
• Introduced remove functionality for each item with confirmation feedback for better user control.

4. Filter Menu Screen Enhancements

• Added a filter navigation bar with clickable category buttons (All, Starters, Mains, Desserts, Appetizers, Sides, Beverages).
• Implemented dynamic filtering to display only items belonging to the selected category.
• Enhanced list rendering to ensure smooth scrolling and category transitions.
• Optimized layout responsiveness for both web and mobile views.

5. Data Management and State Handling

• Improved state management within App.tsx to handle dynamic updates across all screens.
• Structured data arrays with TypeScript interfaces from /types/menu.ts for strong typing and improved maintainability.
• Enhanced performance by minimizing unnecessary re-renders when updating or filtering menu items.

6. Component Reusability and Code Refactoring

• Extracted reusable UI components such as MenuCard to ensure consistent design across screens.
• Cleaned up redundant code and improved readability by separating logic into smaller, modular functions.
• Ensured all components adhere to React Native best practices and TypeScript type safety.

7. Visual and User Experience Improvements

• Introduced cohesive color palette consistent with luxury dining themes.
• Used spacing, border-radius, and typography enhancements to maintain aesthetic harmony.
• Optimized layout for various screen sizes through responsive styling adjustments.
• Added consistent feedback messages for actions like adding or removing menu items.

---

✨ Summary

The component enhancements collectively improved the app’s functionality, maintainability, and overall presentation. These refinements resulted in a smoother, more professional user experience while meeting both academic requirements and industry standards for mobile app development.

Splash Screen

Minimal luxury theme: gold and black palette. Placeholder for Splah:

Home Screen

Displays the complete menu and shows total menu items and average price by course. Placeholder for screenshot:

Add Menu Item Screen

Separate screen for adding and removing dishes dynamically. Placeholder for screenshot:

Filter by Course Screen

Allows guests to filter dishes by course (e.g., starters, mains, desserts). Placeholder for screenshot:

Features Implemented

Part 2 Features

• Add Menu Items — Input fields for dish name, description, course, and price.
• Predefined Courses — Dropdown list includes Starters, Mains, Desserts, Sides, Beverages, Appetizers.
• Dynamic Menu Display — Home screen lists all dishes added.
• Total Item Counter — Displays how many dishes are currently available.
• Array-Based Storage — Data stored in an array; no hardcoding.
• Luxury Styling — Gold and cream color scheme, fine dining layout.
• Video Demonstration — Walkthrough uploaded to YouTube (unlisted).

Final PoE (Part 3) Features

• Separate Add Menu Screen — Chef can add or delete dishes on a dedicated page.
• Average Price Calculation — Automatically shows average dish prices per course.
• Array Data Persistence — Menu updates dynamically within app state.
• Remove Functionality — Chef can delete dishes from the Add Menu screen.
• Filter by Course (Guest View) — Guests can view specific categories only.

---

Project Files

File/Folder Name	Description
App.tsx	Root file handling navigation and application state. Stores the array of menu items and manages data flow between screens.
/screens/HomeScreen.tsx	Displays all dishes, total item count, and average price per course.
/screens/ManageMenuScreen.tsx	Allows adding new dishes and removing existing ones. Contains form inputs for dish details.
/screens/FilterMenuScreen.tsx	Filters menu items based on selected course categories.
/types/menu.ts	Contains TypeScript definitions for the MenuItem type and predefined course lists.
/components/	Holds reusable UI components (e.g., buttons, cards).
package.json	Lists dependencies and versions used in the project.
README.md	Project documentation (this file).

---

Project files of interest:

• App.tsx — app entry point; contains splash screen (5s) and sets up bottom tab navigation.
• screens/HomeScreen.tsx — shows menu list, total count, and average price per course.
• screens/ManageMenuScreen.tsx — form to add menu items and remove items (moved off home page for final PoE).
• screens/FilterMenuScreen.tsx — filtering UI to show items by course.
• data/initialMenu.ts — seed menu items (used to pre-populate the menu on first load).
• types/menu.ts — TypeScript types (MenuItem, Course enums, etc.).
• assets/ — static images: splash.png, background.jpeg, icons.
• metro.config.ts, babel.config.ts, tsconfig.json — configuration converted and tightened for TypeScript.

---

How the App Meets Specific Marking Rubric Items (Evidence Checklist)

This section provides evidence for each rubric item and describes where it is implemented in the project. Each point below corresponds with a requirement from the marking criteria.

---

✅ 1. Working Software that Compiles and Runs

Explanation: The app was built using Expo CLI and successfully compiles and runs on both Android and iOS emulators. It loads instantly when launched via Expo Go and demonstrates stable functionality.

**Vid