Goal
Gain an understanding of the Terrier framework and successfully integrate the TerrierWeb repo into Replit. Establish a working web app showing Terrier’s features and begin designing an athlete-focused dashboard using these features.
Workflow
First, I brainstormed some ideas. I explained my idea in great detail to ChatGPT, including that the Terrier interface and the use of smoke and AQI data were musts. Then I had ChatGPT create mockups of the dashboard, including an interactive map that displays the data. Once I got the mockup, I started exploring the TerrierWeb GitHub repo. After locating the repo, I imported TerrierWeb into Replit. Once fully loaded, I prompted Replit to use all the data Terrier provided for the interactive map. I instructed Replit on where to pull certain data if it was not available in Terrier. Once loaded, there were some improvements to toggles and the information displayed, but I am getting closer to my initial vision! Once loaded, I started working on each individual data set, how it is intended to be used, what it should look like, etc. Going one by one creates fewer glitches/issues vs trying to correct everything all at once.
Prompts Used
PROMPT 1: Something similar to “Here is the dashboard we are trying to achieve. I have imported the Terrier GitHub repo into Replit. I need a strong, detailed prompt to paste into Replit to achieve our end goal.” and then attached the mock image and reiterated the end goal of the dashboard in detail. (ChatGPT)
PROMPT 2: My prompts were basically whatever ChatGPT wanted me to do. After that first big prompt, it was just minor tweaks entered into Replit. I told Replit the end goal and that it will be used as a web app. The prompts included what data it needed to display and how it would be used. Placement and suggested colors were also things I told Replit to change. (Replit)
What Worked
Successfully importing TerrierWeb into Replit, had a running web app, verified that the Terrier map loads, identified available environmental layers, developed a clear dashboard design, and was able to successfully view animated radar of data sets.
What Didn’t Work
Some Terrier environmental layers were not displaying correctly on the map; environmental toggle buttons were not consistently linked to the visual map layers; legends were not updating correctly when switching between layers; and duplicate radar controls appeared in the interface.
Lessons Learned
Working on individual aspects of the interface is better than trying to correct everything at once with a single, large prompt. Getting to know which data sources are available through Terrier, so I can determine which external sources to use, is my next step. I had to learn what Terrier’s capabilities were before correcting existing functionalities. Not sure what “Visibility” toggle pulled from Terrier.
Images/Video
Image 1 (Click to enlarge)
Image 2 (Click to enlarge)
Image 3 (Click to enlarge)