- Member 1: Ammar Haziq Bin Zainal | 2217763
- Member 2: Iryan Syauqi Bin Azhar | 2213601
- Member 3: Arina Batrisyia Sobhan Binti Mohd Razali | 2217572
ChikiBite – Food Ordering Mobile Application
ChikiBite is a mobile application developed to provide users with a convenient and efficient way to order food and beverages directly from the ChikiBite restaurant. The application simplifies the entire food ordering process, allowing users to browse menus, customize their orders and make secure payments directly through the app. Users can choose between delivery and pickup options, ensuring flexibility based on their preferences. In addition, ChikiBite includes real-time order tracking, allowing users to monitor the status of their orders from preparation to delivery. The app also rewards users with points for each purchase, which can be redeemed for free items, encouraging frequent use and engagement.
The objective of the ChikiBite is to design and develop a user-friendly and efficient food ordering platform that simplifies the process of operation at the ChikiBite restaurant. Thus, the application objectives are:
- To provide customers with a convenient and efficient way to browse the restaurant’s menu, customize their orders and choose between delivery or pickup options based on their preferences.
- To enable secure online payment and real-time order tracking, ensuring that customers can complete transactions smoothly and monitor their order status from preparation to delivery or pickup.
- To design a user-friendly, intuitive and responsive mobile interface that improves the dining experience while demonstrating effective use of Flutter for mobile app development.
The primary target users of the ChikiBite Mobile App are:
- Customers – Individuals who want a convenient and efficient way to order food from ChikiBite, whether for pickup or delivery.
Demographics:
- Young adults, university students and working professionals
- Smartphone users aged approximately 16–55
Behaviors and Preferences:
- Prefer ordering food online rather than in-store
- Value time especially during busy schedules
- Expect clear menus, easy customization and fast checkout
- Prefer real-time order updates to reduce uncertainty
ChikiBite will be developed as a mobile application using Flutter, targeting both Android and iOS platforms. This platform selected because the target users are active smartphone users who commonly use Android and iOS devices for food ordering. Furtheremore, Flutter enables cross-platform development, allowing a single codebase to support both platforms efficiently. Flutter provides a rich set of widgets and strong performance, enabling a responsive and modern user interface.
- Description: This module allows users to securely create an account using email and password. It ensures that personal information and order history are protected while enabling a personalized experience. The authentication system is designed to be simple and reliable.
- Interactions: Sign up, log in, log out and reset password.
- UI Components: Text fields, buttons, authentication forms, profile icons.
- Description: The home page acts as the central hub for accessing the restaurant’s offerings. It displays food categories, popular items, and recommended dishes in a visually appealing layout. This design allows users to navigate the menu efficiently and discover options quickly.
- Interactions: Browse categories, tap items to view details.
- UI Components: Category cards, horizontal scroll lists, banners, navigation menu.
- Description: This module enables users to explore the restaurant’s full menu with detailed information including images, descriptions, and prices. Users can also customize their orders according to preferences, such as selecting spice level or add-ons. The interface ensures clarity and ease of selection for a personalized experience.
- Interactions: Select items, customize options, view details.
- UI Components: Menu cards, images, description text, price labels, dropdowns, checkboxes, add-to-cart buttons.
- Description: The cart and checkout module allows users to manage their selected items and review order details before finalizing the purchase. It provides a clear overview of quantities, total price, and delivery or pickup options. This feature is designed to make the checkout process smooth and error-free.
- Interactions: Add/remove items, adjust quantity, select delivery or pickup, proceed to checkout.
- UI Components: Cart list, increment/decrement buttons, summary panel, checkout button, radio buttons for delivery options.
- Description: Users can review the order summary and complete payment securely through this module. All confirmed orders are saved in the user’s order history for future reference. This ensures reliability and transparency in the transaction process.
- Interactions: Confirm orders, make payment, view order history.
- UI Components: Order summary cards, payment forms, confirmation dialogs, receipt screens.
- Description: This module provides real-time updates on the status of orders, from Pending to Completed. It allows users to monitor progress, reducing uncertainty and enhancing satisfaction. Notifications keep users informed at every stage of the order.
- Interactions: Monitor order status, receive notifications.
- UI Components: Status timeline, progress indicators, notification banners.
- Description: After paying for their orders, users will receive points based on the amount spent, which can be redeemed for free items. For example, if a user spends RM10, they receive 10 points. This feature encourages frequent usage and engagement by providing tangible rewards. The process is designed to be simple and motivating.
- Interactions: View current reward points balance, Redeem points, Track points earned, Receive notifications
- UI Components: Points balance display (badge or panel), Redeem button or link, List of redeemable items with required points, Progress bar for points toward next reward, Notifications/alerts for points earned or redemption success
UI Components & Interactions:
- Buttons: Add to cart, checkout, login/register
- Lists/Grids: Menu items, categories
- Forms: Login, address input, payment
- Feedback: Toast messages, Loading indicators
- Splash Screen:
- Home Screen:
- Menu Screen:
- Cart & Checkout Screen:
- Reward Points Screen:
- Profile Screen:
Firestore Collections:
Flowchart
Sequence Diagram
- Flutter. (2024). Flutter documentation. Flutter Developer Documentation. https://docs.flutter.dev/
- Firebase. (2019). Cloud Firestore documentation. Firebase. https://firebase.google.com/docs/firestore
- Dribbble. (n.d.). Flutter UI design inspirations. https://dribbble.com/tags/flutter
- Dart. (n.d.). Provider: State management for Flutter. Pub.dev. https://pub.dev/packages/provider