firebase typescript react

The WebTrace Dashboard is a web-based tool for managing and analyzing user interaction data during remote usability testing. It enables testers to add, delete, and review Projects, Task Suites, and Tasks.

Test participants can engage in tests through WebTrace Tracker, where the interaction data collected during tests is stored in Firebase. repetitive interaction data, such as scrolls or long text inputs, are abstracted into more readable datasets. The WebTrace Dashboard offers these abstracted datasets, enhancing the efficiency of interaction data analysis for testers.

An example version of the WebTrace Dashboard has been deployed using Vercel. You can access and explore the examples referenced in Dashboard Features through the following link: https://webtrace-dashboard.vercel.app/

• Clone the project repository by running the following command:

  git clone https://github.com/SIT-Lab/WebTrace-Dashboard.git

• Create a .env file in the root directory of the project and add the Firebase SDK details as follows:

  REACT_APP_FIREBASE_API_KEY=Your_Firebase_API_Key
  REACT_APP_FIREBASE_AUTH_DOMAIN=Your_Firebase_Auth_Domain
  REACT_APP_FIREBASE_PROJECT_ID=Your_Firebase_Project_ID
  REACT_APP_FIREBASE_STORAGE_BUCKET=Your_Firebase_Storage_Bucket
  REACT_APP_FIREBASE_MESSAGING_SENDER_ID=Your_Firebase_Messaging_Sender_ID
  REACT_APP_FIREBASE_APP_ID=Your_Firebase_App_ID
  REACT_APP_FIREBASE_MEASUREMENT_ID=Your_Firebase_Measurement_ID

• Install the necessary dependencies by running:

  npm install

• Start the application by running the following command:

  npm start

• Open your browser and go to: http://localhost:3000
• From here, you can run the WebTrace Dashboard.

image1

Displays the complete list of projects.

• By clicking on a desired project, you can view the Task Suites included within that project.

The 'Add Project' button lets you add a new project.

• When you click the Add Project button, a modal window like the one above will appear.
• Enter the Project Title and click the Add Project button to add a new project.

image3

Displays the list of Task Suites included in the project selected from A. Project List

• By clicking on the desired Task Suite from the list, you can view the Tasks included in that Task Suite.
• The image above is an example where Task Suite 2 has been selected.

Displays the list of Tasks included in the selected Task Suite.

• By clicking the dropdown button for the desired Task in the list, you can view the detailed information of that Task

The 'Add Task Suite' button lets you add a new Task Suite to the selected Project.

• When you click the Add Task Button, a modal window like the one above will appear.
• Enter the Task Title and click the Add Task button to add a new Task to the current Task Suite.

The 'Add Task' button lets you add a new Task to the selected Task Suite.

• When you click the Add Task Button, a modal window like the one above will appear.
• Enter the Task title and click the Add Task button to add a new Task.

image6

By clicking the dropdown button for a specific Task, information about the participants who engaged in that Task, along with the result data for that Task, will be displayed in each row.

By entering the Session Code into the WebTrace Tracker Test participants can engage in the corresponding Task.

By clicking the Log button located on the right side of each row, a Log Table modal can be opened.

image7

In the Log Table modal, you can view the detailed interaction data that has been collected.

• You can select the fields to be displayed in the log table.
• You can turn on/off the abstraction feature.
• You can download a CSV file of the interaction data.

image8

For continuous interactions, such as mouse scrolls or keyboard inputs, abstraction is applied.

• If you want to view the data that is grouped into the abstracted dataset, click on the corresponding row.
• Example: Click on dataset corresponding to ID 2 to view the data that is grouped into that dataset.

This project is licensed under the Apache License 2.0. For more details, please refer to the LICENSE file.

This project includes third-party libraries that are licensed under the Apache License 2.0. For more details, please refer to the NOTICE file.

 Copyright [2024] [Division of Computer Science and Engineering,
 Jeonbuk National University SIT Lab]
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.