QwithMax, A virtual queuing app to beat the pandemic

QwithMax, an android mobile application which lets you reserve a spot at shops and wait virtually in queues, and it keeps tracks of the visitors to help shops comply with local govt COVID guidelines.

Comment

Inspiration

The inspiration of developing the solution came from things that I experienced in my day to day life post-pandemic. The outbreak of COVID has changed the ways how we live our day to day life. People are hesitant to be in crowded places like they did pre-pandemic, and we are living by following the new norm can take it's fair share of toll on one's mental health. Going with our life by the new norm can be challenging some times, and that's where technology can play a major role to eliminate at least some of these challenges.

As most of the countries are now in the phase of eliminating the lockdown restrictions, to prevent citizens from getting exposed to virus, governments of most of the countries has put forward numerous guidelines to be followed. One of them is restriction of the number of people who can be present in a store at once. (restriction on occupancy in indoor places)

occupancy

On top of the customer occupancy restrictions, governments have directed the shop owners to keep a record of the visitors to help the health authority know who might have been potentially exposed to the corona virus. Usually the shop provisions a dedicated employee just for writing the visitor's name, address and time of visit which is a tedious task.

newsreport

QwithMax was developed to address these issues by helping the users stay in the queue virtually and safely from wherever they want and to help shops keep track of the visitors by automating the tedious task.

maxthemule

The solution is built with scope even beyond the pandemic. The same solution can be used to make more out of the the waiting time in long queues, by being virtually in the queue using QwithMax.

Source Code Repo

How to use

The solution revolves around two roles ,

  • The user who books their spot in the queue virtually
  • The shop who accepts user one by one from the queue. Also they are interested in generating the visitors report to comply with local government COVID norms.

homepage

NOTE : All the operations are explained using GIF loops of screen captured video. The GIFs will be in loop

ROLE : USER

QwithMax lets the customer book a spot in the queue and wait virtually without risking the exposure to virus by physically being at the queue.

Actions performed by a user in the application are

  • Booking a reservation in any shop
  • Cancelling a reservation

BOOKING A SPOT IN QUEUE

The process of booking a spot in the queue is as follows

  • The user will have to sign up to the system and then login using their credentials.

sign-up

  • After the login , user is navigated to the search page where they will search for shops with the local pincode/zipcode and book a slot in the shop of interest

bookingspot

Once the user finds the shop, click on the shop .

The details will contain information like shop name, address , contact number , number of doses of vaccination required etc... As the vaccinations are going on, there is a chance that in future shops might impose rules like, only people who are vaccinated with 1 dose or 2 doses can enter the shop.This requirement is shown in the details tab so that the users can select the shop which allows their entry according to their vaccination status.

Review Details and click on the button "Let Max Wait In Queue For You" to book spot in the queue. If the user choose to book the position, the user will be navigated to page where real time spot of the user in the queue will be shown.

The spot will be automatically updated in the UI in realtime. Once the turn is up for the user and the shops accepts the entry, the shopping session will be initiated. The real time data is fetched by polling the REST endpoint in fixed intervals to avoid manual reload by the user

The queue screen also contains an OTP(One Time Password) which is required at the entry time to confirm the identity of the user.

User can cancel their reservation at any time from the queue page using the "Cancel Reservation" button.

  • Once the shop accepts entry, shopping session is started and the UI will render shopping page automatically

entershop

whenever the user is done with shopping and leaving the shop they can click on "Shopping Completed" to end the shopping session.

Manage Active Reservations

This functionality is used to manage existing reservations.

Once the user is logged in, click on the "Get Active Reservations" button to see all active reservations.

Click on any entry to get current status of the reservation, or to cancel the reservation.

activereservations

To cancel a reservation, click on the appropriate entry, and click on the "Cancel Reservation" button

ROLE : SHOP

The shop will have to sign up to the system as the initial step and then login using the credentials.

The home page for shops contains two buttons to serve the two main functionalities , one to let the users waiting in the queue in one by one. two to generate the report of the visitors.

shophome

Accept User

Click on the "Get Next User In Queue" to retrieve the details of the next user who's turn is up. The shop will have to accept or reject the user

shop homepage

To accept the next user in queue, ask the user for their OTP. This OTP is enforced to confirm the identity of the user in the queue.

If the OTPs match when the shop clicks on "Let In" the user will enter the shop and shopping session for the user is started.

There can be cases when the user is not physically present when their turn comes up, in this scenario another button is provided "cancel 's reservation" to kick out the user from the queue.

The next user will be given the chance to enter queue after kicking the previous user.

Also in the scenario where the OTP of the user doesn't match , which implies the person in the queue who claims to be the user is not the actual user, their spot also can be cancelled with the same functionality.

Cancel user reservation

A shop can cancel a user's reservation once their turn comes up, due to reasons like

  • The user was not present at the shop once their turn came up
  • The user was not compliant with the vaccination requirement
  • any other reason

In these scenarios the shop is allowed to cancel the reservation, so that they can take in the next valid/eligible user

cancelUser

Click on "Get Next User In Queue"

Click on "Cancel 's Reservation

Generate Visitors Report

Whenever the shop wants to generate their visitors report for a certain time range , click on the "Generate Report" button.

report

There are input fields for from date, to date and email Id

The time range for which the report is wanted is specified using the from date and to date fields

If the email id columns is left blank a report is shown in the UI and if the user wants an excel file containing the report fill in the email Id to get report in any email inbox.

When the report is generated the shop can click on each entry to get more details about the entry

Mail that was sent to the inbox

mail

Attachment sent with the mail

attachment

Implementation

List of Technologies used

  • Mulesoft - Works as the brain of QwithMax
  • React-Native -React Native is an open-source UI software framework created by Facebook, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.
  • MySQL database from AWS RDS.
  • Simple Queuing Service from AWS.
  • Public third-party APIs
  • Outlook - To achieve SMTP capability.

High Level Design

The brain of the solution QwithMax is entirely built using mulesoft by following the API-first approach. The beauty of mulesoft is that all the backend systems that are being used in this project (SQS,SMTP, etc...) already has mule connectors readily available. Which helped me to focus on the actual use case rather than backend-system connectivity.

The process of queuing up in real world is the same logic adapted to implement FIFO messaging queues. And its not a surprise that in the heart of QwithMax, an AWS SQS FIFO queue is provisioned to mimic the real world queuing process. For every shops a separate FIFO queue is provisioned in amazon SQS and when a user wants to book a reservation in any shop, a message is published into the FIFO queue and when the shop is looking to accept the next user, it consumes the message from the FIFO queue. Along with this three other tables named user, shop and activity are kept in the MYSQL database to persist user, shop and visitor information. designDiagram

The users of QwtihMax interacts with the application using an android application which is build with react-native, a JavaScript library to build mobile applications.

The JavaScript code consumes the experience API endpoints which is enforced with policies as well as RAML based request validation. The experience API then in turn make calls to corresponding process API endpoints.

The business logic is implemented in the process layer. The process layer interacts with the external systems and orchestrates mule messgaes.

Since the connectors are readily available, I decided to build all the logical flows in the process layer, and to omit the system layer.

The experience API and process API are deployed in cloudhub shared load balancer on 1 worker with 0.1 vcore of memory. apps

eapi

The main functionalities work as depicted in the diagram below

arch

Accomplishments that we're proud of

To be able to pull of such a end-to-end product in a time of less than 1 month.

What's next for QwithMax, A virtual queuing app powered by mulesoft

If government provide the APIs to check someone's vaccination status, this can be integrated with the application to check vaccination status of individuals.

Share this project:

Updates