Green Data Collector (GDC)

Friday, 02 May 2025

ⓕ 𝕏 in

Overview

A web application for collecting various types of environmental data to calculate the carbon footprint.

Role/Responsibilities

Assigned to design the frontend of the web application to enable accurate data collection and recording, and to develop the backend for fast and accurate data processing, ensuring compatibility with the frontend. Key features developed include:

Login System
Permission Management
Add/Delete/Edit Data
Graph Display
CF Value Calculation
Export Data as CSV File
Responsive Display across all screens
Automatic System for adding initial data each year
Log recording for Add/Delete/Edit Data
Responsive web design

Problems/Challenges

The method of collecting various environmental data categories (e.g., electricity usage, water usage) primarily using Excel files presented issues such as file redundancy, data inaccuracy, and outdated information. Therefore, an analysis was conducted on the feasibility of using the developed system to store data and resolve these problems, providing real-time data for management decision-making.

Design Concept

The system design focused on developing it as a web application because having a Back office section to input data via a browser screen is easier and more convenient. The selection of programming languages and tools was analyzed and planned to be suitable for development and also potentially usable for developing a Hybrid App later. Another important factor was choosing languages and tools that would facilitate finding a team for continuous system development support.

Technologies/Tools

Frontend: Vue.js (Nuxt) - A popular, easy-to-use, and efficient Framework.
Backend: Node.js (Express) - A popular, easy-to-use, and efficient Framework for backend operations.
Database: PosgreSQL - Suitable for storing large amounts of data and offers good performance.
Styling: Bootstrap - Used for designing the UI/Responsive layout of the web application.
DevOps: Docker - Used for deploying the API system, and Kong API for Reverse proxying Frontend and Backend.

Features

Ability to Add/Delete/Edit data in various categories.
System to filter and display monthly lists that have not yet been recorded.
Data search functionality.
Log recording for Add/Delete/Edit operations.
Dashboard for real-time data processing and display:
- Comparison of Emission values with the previous year.
- Display of CF value (selectable year).
Graphs for processing and displaying usage data in various categories.
Export CF values for the selected year in CSV format.
Data Analytics from recordings.

Outcome

After continuous usage and data recording, data verification has confirmed accuracy and completeness, resolving previous issues. Data entry has become easier and more convenient, accessible anytime and anywhere. Management can view real-time data calculation graphs for presentations and decision-making.