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.
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.