- Published on
Dynamic Dashboard using vanilla js (Open-Source)
Some time ago, I created a dashboard that works as follows: You define a set of rows and columns, and inside each column, you can select and save a report that comes from the server. However, the server-side is your responsibility; this is purely on the client-side. (Watch the video for its functionality and output.)
You can use this system in your dashboards because it is not very useful on its own and can be a part of a management dashboard.
It is entirely written in JavaScript and utilizes Bootstrap in dashboards, where necessary keys and components are used from Bootstrap. Note that if you remove Bootstrap altogether, nothing special happens, and everything still works correctly.
For drag and drop functionality, the dragulajs library is used, which is lightweight and performs its task properly.
To fully test the system, make sure to run the server located in the _test folder. First, execute npm i inside the folder, and then run npm start.
An essential point is to execute the main files using live-server or serve.
Certainly, some parts in Script.js could be written much better and cleaner. However, considering the one-day opportunity I had, there wasn't much room for such work.
GitHub repository address: