Speed Test Visualization

client/src/components/SpeedTest/SpeedChart.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import { Chart, registerables } from 'chart.js';
+
+Chart.register(...registerables);
+
+const SpeedChart = ({ downloadSpeed, uploadSpeed }) => {
+  const data = {
+    labels: ['Download Speed', 'Upload Speed'],
+    datasets: [
+      {
+        label: 'Speed (Mbps)',
+        data: [downloadSpeed, uploadSpeed],
+        backgroundColor: [
+          'rgba(75, 192, 192, 0.8)', 
+          'rgba(153, 102, 255, 0.8)',
+        ],
+        borderWidth: 2,
+        barThickness: 50,
+      },
+    ],
+  };
+
+  const options = {
+    scales: {
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: 'Speed (Mbps)',
+        },
+      },
+    },
+  };
+
+  return (
+    <div style={{ width: '100%', height: '400px' }}>
+      <h3 style={{ textAlign: 'center', color: '#333' }}>Internet Speed Test Results</h3> {/* Title */}
+      <Bar data={data} options={options} />
+    </div>
+  );
+};
+
+export default SpeedChart;

client/src/components/speedtest/SpeedTest.jsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { calculateDownloadSpeed, calculateUploadSpeed, calculateLatency } from '../../utils/speedTestUtils.js';
 import SpeedDisplay from './SpeedDisplay.jsx';
 import TestButton from './TestButton.jsx';
+import SpeedChart from './SpeedChart.jsx';
 
 const SpeedTest = () => {
   const [downloadSpeed, setDownloadSpeed] = useState(null);
@@ -47,6 +48,14 @@ const SpeedTest = () => {
         <SpeedDisplay label="Upload Speed" value={uploadSpeed} unit="Mbps" />
         <SpeedDisplay label="Latency" value={latency} unit="ms" />
       </div>
+
+      {downloadSpeed && (
+        <SpeedChart downloadSpeed={downloadSpeed} uploadSpeed={uploadSpeed} />
+      )}
+      {uploadSpeed && !downloadSpeed && (
+        <SpeedChart uploadSpeed={uploadSpeed} />
+      )}
+
     </div>
   );
 };

client/src/index.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+body{
+    font-family: sans-serif;
+}

client/src/utils/speedTestUtils.js

@@ -1,7 +1,9 @@
+const BACK_END_URL = import.meta.env.VITE_BACK_END_URL || 'http://localhost:3000';
+
 export const calculateDownloadSpeed = async () => {
   try {
     const startTime = Date.now();
-    const response = await fetch('http://localhost:3000/download');
+    const response = await fetch(`${BACK_END_URL}/download`);
     if (!response.ok) throw new Error('Network response was not ok');
     const blob = await response.blob();
     const endTime = Date.now();
@@ -20,7 +22,7 @@ export const calculateUploadSpeed = async () => {
     const data = new Uint8Array(30 * 1024 * 1024);
     const startTime = Date.now();
 
-    const response = await fetch('http://localhost:3000/upload', {
+    const response = await fetch(`${BACK_END_URL}/upload`, {
       method: 'POST',
       body: data,
       headers: {
@@ -44,7 +46,7 @@ export const calculateUploadSpeed = async () => {
 export const calculateLatency = async () => {
   try {
     const startTime = Date.now();
-    const response = await fetch('http://localhost:3000/download');
+    const response = await fetch(`${BACK_END_URL}/download`);
     if (!response.ok) throw new Error('Network response was not ok');
     const endTime = Date.now();
     return endTime - startTime;