This content originally appeared on DEV Community and was authored by Joseph Mukorivo
In April 2021 I had a task of creating an African citizenship index for the organisation I was working for. Data on this Index was collected from surveys that were conducted across multiple countries.
We needed a way to present this data on a dashboard online so I developed this Dashboard.
To develop this dashboard I used NextJS, styled-components, Strapi and Highcharts.
For the file structure and project layout I used the layout below but you can get more information about that from my article here How I structure my NextJS projects.
📦src
┣ 📂charts
┃ ┣ 📜index.js
┃ ┗ 📜sunburst.js
┣ 📂components
┃ ┣ 📂breadcrumb
┃ ┃ ┣ 📂styles
┃ ┃ ┃ ┗ 📜breadcrumb.js
┃ ┃ ┗ 📜index.js
┃ ┗ 📜index.js
┣ 📂containers
┃ ┣ 📜index.js
┃ ┗ 📜navbar.js
┣ 📂fixtures
┃ ┗ 📜data.json
┣ 📂lib
┃ ┗ 📜gtag.js
┣ 📂pages
┣ 📂public
┃ ┣ 📂fonts
┃ ┃ ┗ 📂Arial
┃ ┣ 📂icons
┃ ┣ 📂images
┃ ┃ ┣ 📂svg
┃ ┣ 📂videos
┃ ┣ 📜manifest.json
┃ ┣ 📜sitemap.xml
┃ ┗ 📜sw.js
┣ 📂scripts
┃ ┗ 📜generate-sitemap.js
┣ 📂styles
┣ 📂utils
┣ 📜.env
┗ 📜next.config.js
I used Google lighthouse to check the perfomance of the website and these were the results.
To get more react and JavaScript tips you can follow me on twitter.
This content originally appeared on DEV Community and was authored by Joseph Mukorivo
Joseph Mukorivo | Sciencx (2021-12-01T07:51:45+00:00) I developed an Interactive Dashboard with NextJS and HighChartsJS. Retrieved from https://www.scien.cx/2021/12/01/i-developed-an-interactive-dashboard-with-nextjs-and-highchartsjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.