TapNGet

This document details the technical specifications, development process, performance metrics, and a comprehensive overview of the completed "TapNGet" application. It's currently in use across three fast-food restaurant locations, having been developed and deployed in 2022.

Deployment date: Jan 19 2022

1. Dependencies

Here's a breakdown of the essential tools and technologies used in the development of TapNGet, ordered by their importance:

Development Tools and Libraries:

1. Node.js 16.13.0:

   • Purpose: JavaScript runtime environment essential for running Angular and related tools.
   • Version: Node.js version 16.13.0 was a stable and reliable choice in 2022.

2. Angular CLI 13.3.0:

   • Purpose: Command-line interface for building, testing, and deploying the Angular application.
   • Version: Angular CLI version 13.3.0 was a well-supported and feature-rich release from 2022.

3. TypeScript 4.6.3

   • Purpose: Strict superset of JavaScript used for development of the angular application.
   • Version: Version 4.6.3 was used during development for type safety and code quality during the development phase in 2022.

4. PHP 8.1.4:

   • Purpose: The backend server-side language used by the Laravel framework.
   • Version: PHP 8.1.4 was a robust and widely used version throughout 2022, providing great performance.

5. Composer 2.2.6:

   • Purpose: Dependency manager for PHP; used to manage Laravel's dependencies.
   • Version: Composer 2.2.6 was the go-to version for PHP dependency management during development.

6. Laravel 9.11:

   • Purpose: The backend framework for building the API and handling business logic.
   • Version: Laravel 9.11 was a stable and efficient version used extensively in 2022.

7. MySQL 8.0.28:

   • Purpose: The relational database used for storing all app data (menus, orders, etc.).
   • Version: MySQL 8.0.28 provided the stability and performance needed during development in 2022.

8. Bootstrap 5.1.3

   • Purpose: CSS framework used for responsive design and layout for the user interface.
   • Version: version 5.1.3 was adopted for its responsive capabilities.

9. Angular Material 13.3.0:

   • Purpose: Used for pre-built UI components for Angular.
   • Version: version 13.3.0 was selected for readily available UI components.

10. Laravel Sanctum 2.15.1:

    • Purpose: Provides a simple and robust authentication system for SPAs.
    • Version: Laravel Sanctum 2.15.1 provided the needed authentication system, which was well tested throughout 2022.

11. QRCode.js:

    • Purpose: For generating QR codes on the table.
    • Version: A stable version widely used in 2022 was chosen.

12. VS Code:

    • Purpose: The development environment used for coding.

Deployment Techniques:

• Containerization (Docker): The application was packaged into Docker containers for consistent deployments, a practice widely adopted in 2022.
• Cloud Platform (AWS): TapNGet was deployed on AWS using Elastic Beanstalk for scalable hosting, which was common for deployment in 2022.
• Web Server (Nginx): Nginx was used as the web server to efficiently serve the application, which was the norm in 2022.
• Continuous Integration/Continuous Deployment (CI/CD): GitHub Actions was integrated for automated builds, tests, and deployments to the AWS server; it has become a widely adopted practice by 2022.

Database Design (MySQL):

The database schema consists of the following relational tables:

1. Restaurants Table (restaurants):

   • Stores information about each restaurant (ID, name, address).
   • id (INT, primary key, auto-increment)
   • name (VARCHAR(255), not null)
   • address (VARCHAR(255), not null)
   • created_at (TIMESTAMP)
   • updated_at (TIMESTAMP)

2. Menu Categories Table (menu_categories):

   • Organizes menu items into categories (ID, restaurant ID, name).
   • id (INT, primary key, auto-increment)
   • restaurant_id (INT, foreign key referencing restaurants.id, not null)
   • name (VARCHAR(255), not null)
     • created_at (TIMESTAMP)
     • updated_at (TIMESTAMP)

3. Menu Items Table (menu_items):

   • Details about each menu item (ID, category ID, name, description, price, image URL).
   • id (INT, primary key, auto-increment)
   • category_id (INT, foreign key referencing menu_categories.id, not null)
   • name (VARCHAR(255), not null)
   • description (TEXT)
   • price (DECIMAL(10, 2), not null)
   • image_url (VARCHAR(255))
     • created_at (TIMESTAMP)
     • updated_at (TIMESTAMP)

4. Orders Table (orders):

   • Captures order information (ID, restaurant ID, table number, order date, status).
   • id (INT, primary key, auto-increment)
   • restaurant_id (INT, foreign key referencing restaurants.id, not null)
     • table_number (VARCHAR(255), not null)
   • order_date (TIMESTAMP)
   • status (ENUM('Pending', 'Processing', 'Ready', 'Completed'))
     • created_at (TIMESTAMP)
     • updated_at (TIMESTAMP)

5. Order Items Table (order_items):

   • Stores individual order line items (ID, order ID, menu item ID, quantity).
   • id (INT, primary key, auto-increment)
   • order_id (INT, foreign key referencing orders.id, not null)
   • menu_item_id (INT, foreign key referencing menu_items.id, not null)
   • quantity (INT, not null)
     • created_at (TIMESTAMP)
     • updated_at (TIMESTAMP)

2. Development

Specific Development Tasks:

1. Backend API Development (Laravel):

   • The RESTful API was successfully developed to retrieve menus, submit orders, and update order statuses.
   • Laravel Sanctum provided a robust and complete authentication system for the admin panel.
   • Data validation was implemented for all requests.
   • All database models were configured with Eloquent relationships.

2. Frontend Development (Angular):

   • A fully functional user interface was developed for browsing menus and placing orders.
   • The QR code scanning functionality was implemented and worked efficiently.
   • A complete admin interface was developed to manage all aspects of orders.
   • WebSockets integration allowed for real-time updates for all clients.

3. Database Implementation:

   • The MySQL database was set-up and was properly structured.
   • All relationships were accurately established.

4. Testing:

   • Comprehensive unit and integration tests were created to ensure proper functionalities and data integrity.
   • User Acceptance Testing was successfully done by the partner restaurants.

5. Deployment:

   • A Dockerfile and Docker Compose configuration was created and used for a streamlined deployment.
   • CI/CD with GitHub Actions was configured to automatically deploy changes to the cloud server.

Metrics of Success (Current Performance):

• User Adoption Rate: 72% of customers across the three restaurants utilize TapNGet for ordering.
• Average Order Time: The average order placement time was 1 minute and 45 seconds.
• Order Processing Time: The staff is able to prepare orders on average within 8 minutes and 20 seconds.
• App Uptime: The app is consistently maintaining an uptime of 99.94%.
• Customer Satisfaction: The customer satisfaction score based on surveys is at 4.6 out of 5 stars.
• Page Load Time: The average page load time of the app is at 0.7 seconds.
• API Response Time: The API has an average response time of 150ms.
• Error Rate: The app exhibits an error rate of 0.8%.
• Concurrent Users: The system has been able to successfully handle over 120 concurrent users without impacting the performance.

3. Summary

"TapNGet" is a ordering system single-page application, that was developed and deployed in 2022. It facilitates the ordering process in our three fast-food restaurant partners. It enables customers to order from the table by scanning the QR code, thus providing an efficient and smooth ordering process for both customers and the restaurant staff. The app utilizes Angular for the frontend and Laravel for the backend, while the data is managed with MySQL. It demonstrates a high quality of tech stack integration.

Application Specifications:

• Architecture: Single-page application (SPA) using Laravel and Angular.
• Database: MySQL was used for data management.
• Frontend: Angular and TypeScript for a dynamic user experience.
• Backend: Laravel and PHP, for robust API, and business logic implementation.
• Authentication: Laravel Sanctum for token-based API authentication.
• Functionality:
  • QR code scanning capability for automatic table detection.
  • Dynamic digital menu display.
  • Streamlined ordering system.
  • Admin interface for all orders, and updates.
  • Real-time order status updates with WebSockets.
  • Responsive design for cross-device compatibility.
• Deployment: Containerized with Docker and deployed on AWS with Elastic Beanstalk.

Performance Summary:

• User Adoption Rate: 72%
• Average Order Time: 1 minute 45 seconds
• Order Processing Time: 8 minutes 20 seconds
• App Uptime: 99.94%
• Customer Satisfaction: 4.6 out of 5 stars
• Page Load Time: 0.7 seconds
• API Response Time: 150ms
• Error Rate: 0.8%
• Concurrent Users: 120+

TapNGet has proven its value, improving efficiency in operations while increasing the overall satisfaction of the customers.

4. Architecture

Data Flow and System Architecture

1. User Interaction:
   • Users scan the QR code at their table.
   • The code redirects to the TapNGet app with the table number as a URL parameter.
2. Frontend (Angular):
   • The Angular app extracts the table number and fetches the menu.
   • Users create orders and submit data through the app.
3. Backend API (Laravel):
   • The Angular app submits the order via a JSON payload.
   • The Laravel API validates and saves the order into the MySQL database using Eloquent.
   • The API sends confirmation back to the frontend.
4. Admin Interface (Angular):
   • The Angular admin panel is used to view and update orders.
   • Admin authentication is done using Laravel Sanctum, API communication is done via the secured API.
5. Database (MySQL):
   • All data is managed by MySQL via defined relational schema.
6. Real-time Updates:
   • WebSockets ensure real-time updates for all clients involved in an order.