CSS
CSS Structure

If any modification needs to be done, most of the style or css is in style.css. In this the main colors are used as css variable so its easier to change the main colors.
Pages and Routing
Pages and Routing Structure

In the pages folder there are all pages where the components are mounted. The components can be easily dismounted or mounted from here.
This template is built using pages folder routing system of Next JS. Any .js file that does not have '_' at inital will act as page. the index.js file will be '/' by default main page and any js file will be /theName url of the template. No additonal router needs to installed in this.
Re-usable Functional Components
Components Structure

In the component folder there are all componets used to mount in the digiboard pages. The components can be editted easily as most of them are re-usable components.
Context API
DigiContext

In the context folder the DigiContext.js in located. In it most of the state management of digiboard is done to avoid extra prop drilling and ease of state management. From this file any required state can be modifed easily as all of the state management code blocks are well documented.
Dummy Data
Data Structure

In this Data.js there are dummy data fetched from mockaroo. The user can fetch data from rest api using async method where the data is fetched instead of fetching data locally.