AD4GD Graphical User Interface

About

The AD4GD (All Data for Green Deal) Graphical User Interface component contains two separated web-based applications: The Splashboard (Pilot 1) and the BioConnect Tool (Pilot 2). The Splashboard provides users with a flexible interface for data visualization of the lakes from Berlin. The BioConnect Tool offers a user-friendly interface for the BioConnect platform, which monitors the habitat connectivity for the Catalonia region in Spain.

Visit our project Splashboard
Visit our project BioConnect Tool

Figure 1: The Splashboard

Figure 2: The BioConnect Tool

Getting Started

User Access

To use the application:

1. Visit https://ad4gd.fit.fraunhofer.de
2. Create an account or log in with existing credentials (You can just log in without email verification)
3. Access the application you want to use (Splashboard or BioConnect Tool)

Development Setup

Environment Setup

1. Copy .env.example to .env
2. Fill in your Parse Server credentials in .env:

PARSE_PUBLIC_SERVER_URL=your_parse_server_url
PARSE_APP_ID=your_app_id
PARSE_MASTER_KEY=your_master_key

Prerequisites

You will need:

• Node.js (^18)
• npm (>=7)
• pnpm (^8)

Verify your installation:

node --version
npm --version
npm i -g pnpm

Installation

Install dependencies:

pnpm i

Development Server

Start the development server (port 8080):

pnpm start

Production Build

Create a production build:

pnpm run build

The build output will be in the ./dist folder. When deploying:

• Copy the contents of ./dist to your web server
• Configure the server to redirect 404s to index.html for client-side routing