
eTEU
2020Software Development
Challenge
The "Old" portal is becoming slow and hard to update. The transition faces three main problems:
- The "Hybrid" Mess: Using two different technologies (React/Next.js and Vue) can be like trying to fit a square peg in a round hole if not managed correctly.
- Zero Downtime: Shipping doesn't sleep. The portal must be updated while thousands of active "Electronic Bills of Lading" (digital shipping titles) are being processed.
- Speed vs. Security: Shipping documents are legally sensitive. The new portal needs to be lightning-fast without compromising the blockchain security that protects the documents.
Approach
We weren't deleting everything and starting over. We are building the new version piece by piece.
Step 1: The Modern Foundation (Next.js)
We used Next.js as the "outer shell" of the portal. It acts as the front door, making sure the site loads instantly and handles user logins securely.
Step 2: The Interactive Tools (Vue.js)
The specific tools where users actually type and edit shipping documents are built in Vue.js. Vue is famous for being "lightweight," making the complex forms and drag-and-drop features feel smooth and responsive.
Step 3: The "Bridge" Strategy
Instead of switching everything at once, we use a Micro-Frontend strategy.
- We keep the old parts running in the background.
- We plug in the new Next.js/Vue pages one at a time.
- The user sees a single, unified experience, but under the hood, we are quietly swapping out the engine.