This project was bootstrapped with Create React App.

https://cute-squirrel-26687b.netlify.app/Home/Clusters

git clone https://github.com/TA9IO/Namla

In the project directory, you can run: npm start

This is simple dashboard built with React.js.

• Fixed Header including the logo, the navigation menu to the different sections, and the alert notification

• Left navigation sidebar corresponding to this section (home), with the three subsections (clusters, edge and devices). Whenever the user clicks on one subsection, only the components in the main middle area change and the ones corresponding to this subsection are displayed. and the active route background will be changed for better UX

• the main section where all the job is done is done is the clusters section.

• it contains 3 main components

• All of the data is dummy data generated by a function for testing purposes only, but the same result could be achieved with a real API.

• For this component, I utilized the most popular charting library "Chart.js", a library created specifically for this usecase. But because I'm using React.js, I should use "react-chartjs-2," which provides React components for Chart.js.

chartjs: https://chartjs.org/docs/

react-chartjs-2 : https://react-chartjs-2.js.org/

you can also change the type of the graph to any Chart Type you like

• Same Thing, All of the data is dummy data generated by a function for testing purposes only, but the same result could be achieved with a real API. However, this is the data you see in the Graph, so it's the same object visualized in multiple ways (Chart , Table Log, and a Summeray)

• a more enjoyable routung experience ( replacing the routs instead of just pushing)
• the UI is not best
• I could have used more CSS variables, but because this was a simple example, I didn't.
• This Is the most crucial aspect (Make it responsive)