The original Report Mule project suffered from a confusing UI and slow server side rendering. The goal of the redesign was to create a modern user friendly interface that is scalable and easy to expand upon with continuous integration.
I rebuilt the entirety of the Report Mule front end from scratch using VueJS. With over 20 route views and over 50 unique components, this full scale web application has allowed me to understand not only the inner workings of the VueJS framework; but the structure, hierarchy, and reuseability required to create complex web applications.
The application utilizies Vuex for state management, allowing persistent data between routes and minimizing API calls.
Report Mule Old (left) and New (right) - Slide to Compare
Interactive
A key component of the redesign was to create a fluid experience for users when adding articles to their report. The flow is smooth and clearly indicates to users when and what action is occuring. A queuing system also allows real time updates as articles are being processed, allowing users to edit and review articles while processing is occuring.
Projects contain different pages such as Reports, Categories, Keywords and Outputs. By pre-fetching data and using nested routes with transitions, navigating between pages is seamless and intuitive.
Global state management for fetched data and caching visited pages also allows fast re-rendering and route switching.