![The Order Management application is a custom solution desktop application that allows a
specific E-Commerce business to manage their orders. The application is built with
Tauri + React and interacts with a REST API.
The backend is written in TypeScript with NestJS and uses a PostgreSQL database.
The application is hosted on Digital Ocean. Order Management is primarily used by
the staff in the warehouse to manage incoming and outgoing orders. The application
can be installed on Windows or MacOS and has access to the local file system for
import and export of CSV files to interface with legacy label systems from UPS, DHL
and FedEx. The system generates combined PDFs including custom generated packing lists.
The packing lists contain QR codes that trigger a fulfillment in Shopify and warn the
staff about orders that have been changed or cancelled in the mean time.
\
\
Below you can photos of the application on MacOS in the Browser. Additionally you can see the responses given to a user when a QR code is scanned.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Flogo.png&w=3840&q=100)
The Order Management application is a custom solution desktop application that allows a
specific E-Commerce business to manage their orders. The application is built with
Tauri + React and interacts with a REST API.
The backend is written in TypeScript with NestJS and uses a PostgreSQL database.
The application is hosted on Digital Ocean. Order Management is primarily used by
the staff in the warehouse to manage incoming and outgoing orders. The application
can be installed on Windows or MacOS and has access to the local file system for
import and export of CSV files to interface with legacy label systems from UPS, DHL
and FedEx. The system generates combined PDFs including custom generated packing lists.
The packing lists contain QR codes that trigger a fulfillment in Shopify and warn the
staff about orders that have been changed or cancelled in the mean time.
Below you can photos of the application on MacOS in the Browser. Additionally you can see the responses given to a user when a QR code is scanned.
![On start up the system syncs with the backend and fetches all orders from multiple Shopify
stores and the stock count that is tracked by an external provider across different stores.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fdesktop-1.png&w=3840&q=100)
On start up the system syncs with the backend and fetches all orders from multiple Shopify stores and the stock count that is tracked by an external provider across different stores.
![The system shows all orders across multiple shops in a single view. The current state is
conveniently displayed in timeline for each order. The available states are *Fulfillable*,
*Exported*, *Labeled* or *Fulfilled*. Each corresponds to a different stage in the fulfillment process.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fdesktop-2.png&w=3840&q=100)
The system shows all orders across multiple shops in a single view. The current state is conveniently displayed in timeline for each order. The available states are Fulfillable, Exported, Labeled or Fulfilled. Each corresponds to a different stage in the fulfillment process.
![It is possible to filfill orders only partially depending on the stock count.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fdesktop-3.png&w=3840&q=100)
It is possible to filfill orders only partially depending on the stock count.
![A large selection of filters allows for optimal fulfillment of orders.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fdesktop-4.png&w=3840&q=100)
A large selection of filters allows for optimal fulfillment of orders.
![A large amount of customers is from the US. Filters make sure that the staff
can fulfill those orders in one go.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fdesktop-5.png&w=3840&q=100)
A large amount of customers is from the US. Filters make sure that the staff can fulfill those orders in one go.
![In order to keep the walking routes in the warehouse to a minimum orders can
be filtered by product type and order amount.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fdesktop-6.png&w=3840&q=100)
In order to keep the walking routes in the warehouse to a minimum orders can be filtered by product type and order amount.
![Orders that have errors are flagged. The errors cause problems in the dedicated systems of UPS, DHL and FedEx.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fdesktop-7.png&w=3840&q=100)
Orders that have errors are flagged. The errors cause problems in the dedicated systems of UPS, DHL and FedEx.
![Orders are exported to a propietary CSV format for each carrier. The CSV files are then imported into the
legacy systems of UPS, DHL and FedEx to generate labels.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fdesktop-8.png&w=3840&q=100)
Orders are exported to a propietary CSV format for each carrier. The CSV files are then imported into the legacy systems of UPS, DHL and FedEx to generate labels.
![In the last processing step the labels are combined with the packing lists. One large PDF is generated
by the system. The screen shows the state of the programm if no labels can be matched with the content
of the CSV file. The complete workflow can only be performed on the Windows PCs in the warehouse, to
which I do not have access to.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fdesktop-10.png&w=3840&q=100)
In the last processing step the labels are combined with the packing lists. One large PDF is generated by the system. The screen shows the state of the programm if no labels can be matched with the content of the CSV file. The complete workflow can only be performed on the Windows PCs in the warehouse, to which I do not have access to.
![All exported line items can be tracked in a large table. The table is used to track the status of line items and
calculate the status of the entire order.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fdesktop-9.png&w=3840&q=100)
All exported line items can be tracked in a large table. The table is used to track the status of line items and calculate the status of the entire order.
![The PDF contains a QR code that fulfills the order in Shopify. The QR code is scanned by the staff as soon as they
made sure that there is enough stock so that the order can be fulfilled.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fexport-1.png&w=3840&q=100)
The PDF contains a QR code that fulfills the order in Shopify. The QR code is scanned by the staff as soon as they made sure that there is enough stock so that the order can be fulfilled.
![In addition to the desktop application a web application is available. The web application is used by the support staff
to track the status of orders. The WebApp has reduced functionality. It is not possible to export orders or generate labels.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fweb-3.png&w=3840&q=100)
In addition to the desktop application a web application is available. The web application is used by the support staff to track the status of orders. The WebApp has reduced functionality. It is not possible to export orders or generate labels.
![The web version uses OAuth2 to authenticate users. The users are redirected to the company Google Workspace login page.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fweb-1.png&w=3840&q=100)
The web version uses OAuth2 to authenticate users. The users are redirected to the company Google Workspace login page.
![Additionally a separate mobile app is supplied. It is used to quickly scan QR codes and fulfill orders.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fmobile-app.png&w=3840&q=100)
Additionally a separate mobile app is supplied. It is used to quickly scan QR codes and fulfill orders.
![The mobile app is written with Apple Shortcuts.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fmobile-code.png&w=3840&q=100)
The mobile app is written with Apple Shortcuts.
![There are different responses to the QR code scan. The response is based on
the current state of the order. In the ideal case a "success" is returned.
The screen additionally shows the products that should have been fulfilled.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fmobile-success.png&w=3840&q=100)
There are different responses to the QR code scan. The response is based on the current state of the order. In the ideal case a "success" is returned. The screen additionally shows the products that should have been fulfilled.
![If the order has already been fulfilled a "warning" is returned.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fmobile-empty.png&w=3840&q=100)
If the order has already been fulfilled a "warning" is returned.
![If the order has changed or has been cancelled a "error" is returned.](/_next/image?url=%2Fcontent%2Fprojects%2Forder-management%2Fmobile-block.png&w=3840&q=100)
If the order has changed or has been cancelled a "error" is returned.