Overview
Demo dashboard was built for a client from Netherlands, looking to present data of orders in 3 simple steps. Web application is tracking products & orders, in translation, sales. 3 steps are as following: New orders, orders in processing status and finished / completed orders. Each block contains information such as location order was requested from, bunch of seller data, general product data, buyers message to supplier and similar.
Seeded API is providing all of this data. Everything is being fetched directly through front-end's VueJS framework with majority of Vuex coming into the play. Vuex is used to store API data that is getting fetched. Also, simple loop function is making sure orders are being updated every 5 seconds.
Project is simple Single Page Application (SPA) built with VueJS 2.0. Combined with Vue router and Vuex, project remains lightweight, fast and responsive. JSNext is used for logic & SCSS is used as a pre-processor. Each block on dashboard is a standalone component (Vue's Single File Components come into the play here) rendered based on the number of elements in array. Tables inside of each blocks on step 1 & 2 are also rendered dynamically based on the number of elements in sub-arrays.
Stack
VueJS -
SFC, Vuex, Vue routerSASS/SCSS -
Mixins, Nesting, Variables, much more readable codeJSON -
Seeded data coming straight from JSON looped every 5 secondsFeatures
Dashboard View
Displaying view of 3 step process for tracking products & orders, in other words, sales.
Dashboard is updated every 5 seconds. Products are transitioning from one step to another until reaching final step and disappearing. This functionality is made possible with simple JavaScript "for loop" that calls API on every 5 seconds. Majority of styles is written using famous flexbox making sure UI is responsive and UX remains smooth. Mix of Single file components and SCSS keeps code clean and readable as much as possible. Block components & tables uses the same style code, keeping code DRY. Static HTML is minimal as everything gets rendered on go using JS logic & fetched API data.
Conclusion
Client's company is selling their own in-house products to buyers across Europe. Whole idea behind this design approach is making sure UI & UX looks professional, yet easy to understand and read through. As my job was to convert design (from Figma) to fully functional front-end, it was important to build everything pixel perfect. Project was a success and client's company continued their work with this exact dashboard. This dashboard project is still WIP & more functionalities and implementations are on the way.