Skip to content

Field-Day-2022/desktop-data-manager

Repository files navigation

Field Day LogoField Day: Desktop Data Manager

Welcome to the Field Day: Desktop Data Manager (DDM) repository! This project is a desktop web application designed for managing wildlife data collected in the field.

Device Mockup

Quickstart for Users

To quickly get started with the Field Day: Desktop Data Manager application, follow these steps:

  1. Visit the Firebase hosting page to access the application.
  2. Note that an ASU email address ending with @asu.edu is required to log in and use the application.

The application can be installed as a PWA (Progressive Web App) on your device for easy access. To install the application as a PWA, follow these steps:

  1. Open the application in your browser.
  2. Click on the install icon in the address bar to install the application.
  3. That's it! You can now access the application from your device like any other app.

Project Overview

DDM is an essential tool for viewing, managing, and exporting wildlife data collected by researchers using the Field Day mobile app. The application is optimized for use on larger screens, such as laptops, desktop computers, and tablets (width > 1200px).

Development Stack

React TailwindCSS Firebase Google Cloud Vite JavaScript

Key Features

  • Data Management: Efficiently view, search, edit, and sort collected data in a table view.
  • Dynamic Data Loading: Data is loaded dynamically from the database based on user activity to optimize performance and reduce costs.
  • Google Authentication: Enhanced authentication security with 2-factor Google authentication.
  • Data Export: Export data to CSV format for further analysis.
  • Answer Sets Management: Manage answer sets, which are templates for data input specifying permissible data types for given fields.

Development Guide

Prerequisites

Installation

  1. Clone the repository:

    git clone https://github.com/Field-Day-2022/field-day-2022-webUI.git
    cd field-day-2022-webUI
  2. Install dependencies:

    npm install
  3. Set up Firebase: // TODO: Add instructions for setting up Firebase

  4. Start the development server:

    npm run dev
  5. Open the application in your browser at http://localhost:3000.

  6. You're all set! 🎉

Test Deployments

Test deployments are automatically created on PR into main and dev branches using the workflow: firebase-hosting-pull-request.yml. The URLs for the test deployment are provided in the PR checks.

In order to use Google Auth and access the test deployment, you will need to add it as an authorized domain in the Firebase Console. The domain is the URL provided in the PR checks. Removing the domain from the authorized domains when no longer needed is recommended.

Sponsor

Professor Heather Bateman - Professor and Researcher of Biology

Contributors

2022

Isaiah Lathem Jack Norman Dennis Grassl
Ian Skelskey Zachary Jacobson