This page has been created based on the following objectives:
- recreate the screen in VueJS
- deploy this page to any free hosting service of your choice
- feel free to use any packages or libraries to help you create this page easier (ie. charts)
- use dummy data to reproduce the charts and metrics as show in the screen
- feel free to make adjustments as needed while building this out with the goal of making the page look as good as possible
- making this page mobile friendly is a plus but not required
Nuxt.js enables developers to build Server Side Rendered applications in which a Node.js server will deliver HTML to the client based on your Vue components (rather than running JavaScript on the client side). This will allow for better SEO than traditional SPAs built using Vue. Another great advantage of Nuxt is the ability to create a Statically Generated website for your application. This enables users to publish their application without the need for a server (such as GitHub Pages).
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages. It is an open-source project licensed under MIT and is free to use in commercial applications.
Note: Donut chart couldn't be responsive, it's been designed as an adaptive chart.
Go here and check all packages that have been used for this page.
follow these commands to run the page:
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generate