A React and Electron back-office app for processing thousands of mail items daily, with barcode scanner and industrial printer integration.
Product UI/UX design, migration and development, QA and maintenance
React JS, NodeJS, Electron, MongoDB, AWS
VirtualPostMail, a US-based virtual mailbox and registered agent service operating since 2009
Our long term client, VirtualPostMail, a boutique virtual mailbox and address service, needed to migrate the UI of their internal mail processing app called Alice, used by their service team to process thousands of mail items daily, from an outdated implementation in Angular to a modern React framework. In brief, Alice is the app used by the VirtualPostMail staff behind the scenes to process all the requests from the many thousands of end users of the public app that we also worked on, to scan, OCR, trash or route the mail items.
An additional challenge was presented by the fact that this app is only formally a web app, but in fact it is more of a desktop workflow automation app, integrated with external hardware, and has extensive requirements for its stability and performance. Alice connects with a barcode scanner to associate barcode numbers with the actual PDF files and with heavy duty industrial printers. Through the process, various metadata is entered, and the quality of the scanned images is checked. If quality is not satisfying, documents are sent for reprocessing.
Alice is the back-office counterpart to the VirtualPostMail public app, which TMS Outsource also built and continues to develop. The two systems work together: when Alice staff mark a document as ready, it is automatically delivered to the end user's account in the public app and sent to their email address.
Migrating a hardware-integrated desktop app without disrupting daily operations.
The initial idea was to develop the new client application as a web application, running on a separate web server, and for it to coexist with the old AngularJS application. Once a new module was ready in the new client application, we would replace it in the old one, so both applications had to work in parallel, appearing as the same app to the end user.
The AngularJS application depended on the API and had to be modified to be able to be hosted separately on Netlify. This step required a lot of work and a lot of thorough testing to ensure that everything was processed without any errors.
Alice connects directly with barcode scanners to associate physical mail items with digital files, and with heavy duty industrial printers for processing output. Capabilities rarely required in web application development, and they demand native operating system access that a browser alone cannot provide.
The existing React application was integrated with the new Electron app, which resulted in the desired product. The client app has two layers: a presentational layer using React for smooth user experience, and background services where NodeJS code executes native OS features like reading and writing files from disk and image processing.
We started to work on this project in February 2019. We worked daily with the management team and staff to ensure that we were building and optimizing the application to make their day to day work pleasant and efficient. The application consists of the backend and the client part.
The existing backend application was written in NodeJS, and it uses a Mongo database. It needed to support new functionalities, like Google authentication, and to improve existing features, such as the whole scanning process. The client application is built in JavaScript using the React framework and then wrapped to a native desktop application using the Electron framework.
The client app has two layers. One is presentational, where the user interface is implemented using the React framework for smooth user experience, and the other is the background services where NodeJS code is executed. Those services use native operating system features, like reading and writing files from the disk, but also image processing, and more.
Alice connects directly with barcode scanners to associate physical mail items with digital files, and with heavy duty industrial printers for processing output. These capabilities require native operating system access that a browser alone cannot provide, which is why Electron was chosen as the wrapper layer.
Our project management team split the work into phases so that we could focus on every step of the project, but still keep the whole picture in mind. After the successful migration of the app, both the back-end and front-end, we focused on the new features that needed to be added, like Google authentication, and on fine-tuning existing features while making the most out of the information collected through user testing. Alice became a tailor-made application for the company staff that makes their daily routine much more comfortable.
After finalizing the migration, we set out to continuously improve the user experience by redoing the existing and adding new features. The ultimate goal is to cover the entire mail processing process in a single place, adding UX enhancements in parallel.
What shipped, and what came next.
Alice was migrated from AngularJS to React and Electron successfully, running as a native desktop application on the VirtualPostMail processing team's machines. The migration allowed the old and new applications to run in parallel, with new modules replacing old ones incrementally, minimizing disruption to daily operations.
The platform now handles thousands of mail items processed daily, connecting automatically with barcode scanners, industrial printers, and the public-facing VirtualPostMail app that delivers scanned documents to end users. Since the initial migration in 2019, TMS Outsource has continued improving Alice's features and UX as part of the ongoing VirtualPostMail partnership.
React presentational UI plus NodeJS background services for native OS access
Barcode scanner and industrial printer integration alongside web and database layers
Continuous feature development and UX improvement since the initial migration
Welcome to the backstage. Got any questions? Drop us a line, we are there for you.
Tell us about your product idea or your team's capacity gap. We'll outline the right approach for your situation.
Request a Free ConsultationBusiness planning SaaS platform built from scratch with VueJS, PHP, and payment integration.
