Visualisation Dashboard

This project was built in 5 days as an assignment by an organization (name kept anonymous).

Table of Contents

• Backend
• Frontend
• Screenshots
• Folder Structure

Backend

The backend of this project utilizes Mongoose and Express.js. It incorporates classified JSON data provided by the organization. Mongoose models were created to structure the data, which was then uploaded to a MongoDB database. Various RESTful API endpoints were developed to retrieve data from the backend.

Frontend

The frontend of this project was built using React.js. Notably, all the styling is implemented using pure CSS, with no external libraries used. The dashboard is fully responsive and features the following types of graphs: Bar, Line, Pie, and Scatter plot. These graphs were created using D3.js and SVG. Data is passed between components using the Context API.

Screenshots

Overview

Bar Graph

Line Graph

Pie Chart

Scatter Plot

Folder Structure

The project is well-organized, following MVC (Model-View-Controller) norms. Here is the folder structure:

├── backend
│ ├── app.js
│ ├── controllers
│ │ ├── articleControllers.js
│ │ ├── countryControllers.js
│ │ ├── pestleControllers.js
│ │ ├── sectorControllers.js
│ │ ├── sourceControllers.js
│ │ └── topicControllers.js
│ ├── package.json
│ ├── routes
│ │ ├── articleRoutes.js
│ │ ├── countryRoutes.js
│ │ ├── pestleRoutes.js
│ │ ├── sectorRoutes.js
│ │ ├── sourceRoutes.js
│ │ └── topicRoutes.js
│ ├── schemas
│ │ ├── articleSchema.js
│ │ ├── countrySchema.js
│ │ ├── pestleSchema.js
│ │ ├── reportSchema.js
│ │ ├── sectorSchema.js
│ │ ├── sourceSchema.js
│ │ └── topicSchema.js
│ └── utils
│ ├── data.js
│ └── dataUploadHandler.js
├── demonstration.webm
├── frontend
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ └── src
│ ├── App.js
│ ├── App.module.css
│ ├── components
│ │ ├── GraphCardContainer
│ │ │ ├── GraphCard
│ │ │ │ ├── Graph
│ │ │ │ │ ├── BarGraph.js
│ │ │ │ │ ├── LineGraph.js
│ │ │ │ │ ├── PieGraph.js
│ │ │ │ │ └── ScatterPlotChart.js
│ │ │ │ ├── GraphCard.js
│ │ │ │ └── GraphCard.module.css
│ │ │ └── GraphCardContainer.js
│ │ ├── Header
│ │ │ ├── Header.js
│ │ │ └── Header.module.css
│ │ ├── Overview
│ │ │ ├── OverviewCard.js
│ │ │ ├── OverviewCard.module.css
│ │ │ ├── Overview.js
│ │ │ └── Overview.module.css
│ │ └── UI
│ │ └── LoadingCard
│ │ ├── LoadingCard.js
│ │ └── LoadingCard.module.css
│ ├── context
│ │ ├── app-context.js
│ │ └── AppContextProvider.js
│ ├── index.css
│ └── index.js
└── README.md