d-School Afrika Dashboard

This React web application serves as a dashboard to visualize water and electricity consumption data by retrieving information from an API. It provides insights into energy consumption, solar generation, cost savings, and total water usage in the d-School Afrika building.

Table of Contents

• Link to Demonstration Video
• Introduction
• Features
• Getting Started
• Technologies Used
• Setup and Usage
• License

Demonstration Video

Click the link below to view a short demonstration of the application https://drive.google.com/file/d/14FJtLuxaLA0Xym9OZVcBa6hLPLGiKgnI/view?usp=drive_link

Introduction

The d-School Afrika building, an architectural marvel in Cape Town since 2015, boasts innovative design and a 6-star rating ambition.

This project aims to visualize the building's energy consumption through an interactive dashboard. The dashboard showcases key sustainability metrics in a clear and engaging manner, offering real-time updates and enhancing the building's green initiative. It will be accessible both within the building on a large monitor and online via a website, providing a comprehensive view of sustainability metrics.

Features

• Overview: Provides an overview of the sustainability features of the building.
• Solar Generation: Displays data related to solar energy generation and usage.
• Energy Consumption: Visualizes the energy consumption patterns of the building.
• Cost Savings: Demonstrates the cost savings achieved through sustainable practices.
• Total Water Usage: Displays the total water consumption within the building.
• Slideshow Mode: Allows dynamic content presentation through a slideshow.
• Admin View: Provides an administrative interface allowing authorized users to login, customize displayed content, and adjust slideshow intervals.
• Informative Displays: Includes informative displays to educate users on the sustainable technologies used within the building.
• Fun Facts Display: Incorporates engaging fun facts related to sustainability and the building's eco-friendly initiatives.
• Light and Dark Display Modes: Integrates selectable light and dark display modes to accommodate varying user preferences and lighting conditions.

Getting Started

Prerequisites

Node.js, python and npm installed.

Installation

Clone the repository. Install dependencies using npm install. Start the development server using npm start.

Default Login Details

(To login as admin and use additional features)

• Username: Wanda
• Password: 1234

Technologies Used

• Flask
• Python
• ReactJS
• MUI (Material-UI)
• ApexCharts
• React Router
• Axios (for API requests)

Setup and Usage

After installation, start the development server. Open the application in your browser. Navigate through the dashboard sections using the provided sidebar.

License

This project is licensed under the MIT License.