DevLog 8-3

Pacis Nkubito: DEVLOG 8-3

Developing Final Project Prototype

This week I worked on implementing the core functionality of my final project, speedrace. I created a simple web interface with React.js and created two unstyled pages: Internet Speed Comparison and Speed Test.

View Prototype Live demo of speedrace on Vercel

1. Identify the functionality that proves your concept is feasible. IOW, what aspect(s)of your project must work to make this possible?

   • Internet speed race visualization: I used anime.js to animate two progress bars at speeds proportional to each country’s real average broadband speed.

   • Live internet speed test: I created a speed test page that fetches and tries to download 100MB payloads from a free Cloudflare API (speed.cloudflare.com) and computes download/upload throughput in Mbps in real time.

2. Post a visual to describe your prototype. This could be a flowchart, UI design, or any other graphic or video to help describe functional prototype.

3. Describe the concept of “separation of concerns” in your own words using your own project as an example. For example, what is your strategy to keep your prototype work focused and free from non-essential code?

   Separation of concerns means keeping each part of your code responsible for exactly one thing, so changes to one area do not accidentally break another. In my project, every page is responsible for one core function: the home page is responsible for visualizing the speed test race, and the speed test page is responsible for running the speed test for the current user and displaying the results.

   Every page has helper functions that are only responsible for one thing. For example, the measureDownload function is only responsible for measuring the download speed. This makes it easier to conduct unit tests and be able to isolate a problem when an issue arises.

   During the prototype development, I only focused on the core functionality and didn’t focus much on the design and styling. I added functionality that would be enough to prove and test my concept before I spend more time designing and polishing the project.

4. What did you struggle with to finish the proof of concept?

   Biggest Challenge

   The biggest struggle was the speed test implementation. There was a lot of Math involved and I had to spend a lot of time learning how other similar platforms implement it. I also tried doing the speed test without using an external API but that didn’t work, and I had to switch to using the Cloudflare API which was a bit of a learning curve.

5. List the most helpful website, tutorial, etc. you used to complete your prototype?

   • Cloudflare Speed Test
   • Cloudflare Speed Test GitHub
   • How to Detect Network Speed Using JavaScript

6. What is the 1st most important feature you will implement (once the prototype is done)? I will integrate Ookla Speedtest Global Index API to get the most up-to-date and accurate speed data for every country.

7. What is the 2nd most important feature you will implement (after the above)? I will also add Leaflet.js to create an interactive world map where users can click on a country to do an internet speed test comparison.

8. What is the 3rd most important feature you will implement (after the above)? I will add a race animation engine to make the speed race gamified and visually engaging. I will also add user interactions to make the experience more fun and engaging.