Progressive Web Application Development For Remote Orders Making in Swiss Restaurants

Progressive Web Application Development For Remote Orders Making in Swiss Restaurants

Information
Region:
Bern, Switzerland
Industry:
Travel
Type:
Web Application
Engagement model:
Time and Material
Duration:
Several Months
Staff:
A Team of Three People: a Senior Developer, a QA Specialist, and a Designer
ID:
532
Technologies used
Firebase
SCSS
StencilJS
Ionic
PWA
.Net
TypeScript

Client

A Swiss company was interested in creating a web app for restaurants. They thought that they could create a valuable service, enhancing the dining experience for both customers and restaurant owners.

Project Description

The Swiss company aimed to get a trace of itself in the restaurant industry by introducing a comprehensive web app. Recognizing the potential to enhance the dining experience, the project's primary goal was to create a user-friendly app that benefited both customers and restaurant owners.

The web application uses the backend services of the TouchWaiter foodstuffs self-ordering platform.
As typical for a web application, internet connectivity must be given for using it. Navigation through categories and products as far as adding products to a basket shall be possible without connectivity to the internet.

The envisioned app would streamline processes such as ordering, payment, and notification systems, ultimately providing a more efficient and enjoyable dining experience.

Challenges

Elinext was challenged with the following tasks:

  • Create an app for an e-commerce company that has no prior experience with PWA
  • Implementing a robust two-factor authentication system for user accounts.
  • Integrating secure and efficient payment systems that align with the preferences of the Swiss market.
  • Developing a reliable QR code scanning module for accessing specific offers and enabling a streamlined checkout process within the venue.
  • Creating a system for users to efficiently manage and access their order history within the app.

Process

After studying the design from the client, we found that the ionic framework would be a great fit for the UI component. It goes great in combination with StensilJS it creates a perfect set of tools for the job.

This was the first time we used StensilJS, so we expected some potential difficulties related to that, but our worries were in vain as we managed to utilize this framework effectively.

Throughout the process of development, we moved from using Mantis to Gitlab, and it helped us to manage tasks more efficiently.

Weekly meetings help the Elinext developer get a deeper understanding of the requirements and faster resolve problems if they occur. We used GitLab CI/CD for the streamlining of the operations.

Solution

There were six modules of an app in development

Module 1: Login/Registration

This module allows you to sign up to the server and enter the system. Two-factor authentication is implemented.

Module 2: Menu

The restaurant menu with detailed descriptions and images for each dish is displayed in this module. This assists customers in making informed choices.

Module 3: Order and Payment

Enable customers to place orders directly through the app, minimizing wait times. Integration of secure and efficient payment systems (most popular in Switzerland) was made, which enhances the overall dining experience. Also, order history is available.

Module 4: Scan the QR code

With the help of this module, one could scan the QR codes within the venue, i.e. for the specific offer, or as a checkout option.

Module 5: Notification

This module was executed for the end users to be able to receive notifications about the readiness of their meals for pick-up (for takeaway orders). There are also options for notifications about updated offer data and updates on the status of ordered products.

Module 6: Webload

This module allows users to top-up money to their virtual accounts. It supports two modes: a private mode, and a public/guest mode for the ordered products. One could also track the transaction history thanks to this module.

Results

The customer remained very satisfied with the application we delivered and went straight to market with it. As far as we know, it operates in numerous venues across Western Europe.

Nothing says better about positive feedback than the willingness to do new projects together. We have three new ones with this customer!

One of them is an e-commerce website scheduled for the release next year. It’s already in its design phase.

As for the app itself, it corresponds to all the initial requirements given to us by our customer, and each phase of the development has met its deadline without delays and within the budget.

Do you want the same project?
Got A Project Idea? Lets Discuss It With Us
Contact Us


    Insert math as
    Block
    Inline
    Additional settings
    Formula color
    Text color
    #333333
    Type math using LaTeX
    Preview
    \({}\)
    Nothing to preview
    Insert