<aside> 📌 Last updated: August 23, 2022 For questions: eshin@codeforuv.org

</aside>

1. High Level Overview

At a high-level the app does several key things:

1. Determines a user’s location
   • This is performed by first using their IP address and the Abstract geolocation API to get a their approximate location
   • Then, if permissions are granted, trying to refine their location using their web-browser geolocation capabilities and the MapQuest API
2. Tests their ping, download, and upload speed
   • This works by timing their response (ping) and how quickly they can retrieve and send a largish file (default 100mb) to our server (download + upload)
3. Writes this data to a database (and reads it if they are a return user)
   • Finally using a combination of their IP address and a randomly generated id, we save their data (and optional survey responses) to our database and also to their web-browser’s local storage with the same IP + id identifier. This allows us to check for this value and quickly retrieve their last test results, if a user returns to the app later.
4. Provides users with an optional survey and stores their responses alongside their speed test data
5. Visualizes speed tests (database records) on a state map using geolocation data

2. Technical Details

2.1 Libraries (tech stack)

Our app is built using Sveltekit and hosted on Heroku. We use a cloud database service called MongoDB Atlas and MongooseJS as our ORM. For styling we using TailwindCSS and DaisyUI. All speed testing logic is handled by our custom wrapper around the nodejs implementation of the open-source Libre SpeedTest module. The results map utilizes Leaflet to render the map and its data points

2.2 Project Layout and App Structure

src/
	lib/                        <- Speedtest module, svelte stores, db schema, data classes/models, helper funcs 
		components/               <- UI Components (e.g. Map, SpeedTest) and JS logic
	routes/                     <- Pages and end-points
		about/
		api/                      <- internal and public db operations
		privacy/
		results/
		test/                     <- end-points required by speedtest module
	hooks.js                    <- server "middle-ware"
  +page.js/svelte             <- home page of the app
	

2.3 Speed test step-by-step

The SpeedTest.svelte component, makes heavy use of the RuralTest custom JS class, which itself wraps the open-source libre speedtest.js module. For more info on the that module see this wiki.

1. User navigates to a page that renders SpeedTest.svelte component (homepage by default)
2. This component initializes a new RuralTest instance that sets up the testing interface
3. After mounting to the DOM, this instance runs .checkLocalForPrevTest() to see if there’s a previous test result stored in browser localStorage. If so, it draws it to the page.