WordPress to Webflow Website Migration and Developed an Invoice Auditing System Using Backendless

This WordPress to Webflow migration was done for a USA-based supply chain management and auditing organization. The organization provides a complete supply chain management solution to e-commerce brands. First, it wanted a system that automatically audits invoices from third-party logistics (3PL) fulfillment centers. Second, it wanted a platform where 3PLs list themselves, so brands can select one by its services and target area. To centralize all of these functions, it wanted to migrate its website from WordPress to Webflow with Backendless.

The Zehntech team met these requirements with a platform that uses Webflow as the frontend and Backendless as the backend. The platform audits invoices automatically and provides a marketplace for 3PLs. It also lets brands select the right 3PL for their needs. In addition, we migrated the organization’s website from WordPress to Webflow, which made it more scalable. See our web development services.

First, we analysed the client’s challenges and vision. Then our team of experts came up with the following technical solutions.

We migrated their website from WordPress to Webflow, a no-code platform that allows for intuitive design. However, as a no-code platform, Webflow has some limits on customization. So we connected the website to a CDN (content delivery network). We uploaded custom files there and built the customization with jQuery and JavaScript. Then we showed the result on the Webflow frontend.

The Webflow customizations included a slider for the number of units and visual dashboards with donut graphs, bar charts, and line charts. They also included dynamic tables to display the data and a checkbox dropdown for multiple field selection for 3PLs.

2. 3PL registration and contract management

We developed a marketplace where 3PLs register themselves as a listing on the website and manage their contracts. They have two options for creating a contract. They can enter all the details manually, or they can upload a previously created contract. We also added a third-party tool called sensible.so. It extracts the details from an uploaded contract and adds them to the system. To create a contract, the associated brand must be available in the system. If the brand is not available, 3PLs cannot log in or access their dashboard or brand page.

3. Solved Error of the Latest Webflow Version

The latest version of Webflow has disabled the password input type. Therefore, we created a custom input field to solve this issue.

The system we built estimates the cost of 3PL services for a brand’s next contracts from the inputs. To use it, brands first select their current 3PL provider from a list of all available providers. Then they select a contract from a drop-down menu of all the contracts they have with that provider. Next, they select a rate card from the related rate cards drop-down menu. Finally, they select the specific services and date range they need from another drop-down menu. After that, the system calculates the cost and shows it on the frontend for the brands.

The Match Me function lets brands search for 3PL providers that they already work with or want to work with. To make the search easier, we integrated Google Maps, so brands can search by geographical location. Brands can also add their reviews for 3PL companies.

To audit invoices, brands upload their invoices to the backend. Then they select an invoice to audit and submit the request. The system sends the request to the audit team, and one of the team members can accept it. After that, the auditor reviews the invoice. If the auditor needs more information or any details are missing, they can contact the brand.

7. After providing all the necessary details, the brand can track the status of the invoice audit request on its dashboard. Once the audit is complete, the brand can see the invoice audit report on the dashboard, which is hosted on Webflow.

8. We developed a dashboard and auditing interface for auditors using Backendless. The auditor can see the files uploaded by the client, as well as the list and details of the clients. The auditor can download the files, sort them in the default format, and convert them to CSV format. Then the auditor uploads the CSV file to the dashboard. Backendless converts the file to a database. After that, it audits the data against the contract that the client selected and the logic that we set.

9. When an auditor uploads a file, the system converts the data into different dashboards. After the audit is complete, the system creates a dashboard with an invoice audit report that includes all of the findings. Then the auditor can enable the option to share this dashboard with the client on the Webflow website. There are two types of dashboards. One holds the formatted version of the invoice that the client uploaded. The other holds the audited report.

10. We created a database in Backendless and designed the data structure to meet the client’s requirements. Backendless manages all of the database operations that the frontend uses.

11. To manage the data communication between Webflow and Backendless, we developed APIs with Cloud Code, a Backendless feature. Cloud Code is a serverless computing platform. It lets us deploy and run code in the Backendless cloud.

The new platform has helped the client automate the invoice auditing process, which has saved them time and money. It also provides a marketplace for 3PLs, which makes it easier for brands to find the right 3PL for their needs. Finally, it improves the scalability of their website, which lets them handle more traffic.