feat: finish

package-lock.json

@@ -7,10 +7,14 @@
 		"": {
 			"name": "spotracking",
 			"version": "0.0.1",
+			"dependencies": {
+				"pg": "^8.12.0"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^3.0.0",
 				"@sveltejs/kit": "^2.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
+				"@types/pg": "^8.11.8",
 				"svelte": "^4.2.7",
 				"svelte-check": "^4.0.0",
 				"typescript": "^5.0.0",
@@ -807,6 +811,90 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/node": {
+			"version": "22.5.4",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz",
+			"integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~6.19.2"
+			}
+		},
+		"node_modules/@types/pg": {
+			"version": "8.11.8",
+			"resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.11.8.tgz",
+			"integrity": "sha512-IqpCf8/569txXN/HoP5i1LjXfKZWL76Yr2R77xgeIICUbAYHeoaEZFhYHo2uDftecLWrTJUq63JvQu8q3lnDyA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/node": "*",
+				"pg-protocol": "*",
+				"pg-types": "^4.0.1"
+			}
+		},
+		"node_modules/@types/pg/node_modules/pg-types": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/pg-types/-/pg-types-4.0.2.tgz",
+			"integrity": "sha512-cRL3JpS3lKMGsKaWndugWQoLOCoP+Cic8oseVcbr0qhPzYD5DWXK+RZ9LY9wxRf7RQia4SCwQlXk0q6FCPrVng==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"pg-int8": "1.0.1",
+				"pg-numeric": "1.0.2",
+				"postgres-array": "~3.0.1",
+				"postgres-bytea": "~3.0.0",
+				"postgres-date": "~2.1.0",
+				"postgres-interval": "^3.0.0",
+				"postgres-range": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@types/pg/node_modules/postgres-array": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-3.0.2.tgz",
+			"integrity": "sha512-6faShkdFugNQCLwucjPcY5ARoW1SlbnrZjmGl0IrrqewpvxvhSLHimCVzqeuULCbG0fQv7Dtk1yDbG3xv7Veog==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@types/pg/node_modules/postgres-bytea": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-3.0.0.tgz",
+			"integrity": "sha512-CNd4jim9RFPkObHSjVHlVrxoVQXz7quwNFpz7RY1okNNme49+sVyiTvTRobiLV548Hx/hb1BG+iE7h9493WzFw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"obuf": "~1.1.2"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/@types/pg/node_modules/postgres-date": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-2.1.0.tgz",
+			"integrity": "sha512-K7Juri8gtgXVcDfZttFKVmhglp7epKb1K4pgrkLxehjqkrgPhfG6OO8LHLkfaqkbpjNRnra018XwAr1yQFWGcA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@types/pg/node_modules/postgres-interval": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-3.0.0.tgz",
+			"integrity": "sha512-BSNDnbyZCXSxgA+1f5UU2GmwhoI0aU5yMxRGO8CdFEcY2BQF9xm/7MqKnYoM1nJDk8nONNWDk9WeSmePFhQdlw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/acorn": {
 			"version": "8.12.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1284,6 +1372,13 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/obuf": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+			"integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/periscopic": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -1296,6 +1391,105 @@
 				"is-reference": "^3.0.0"
 			}
 		},
+		"node_modules/pg": {
+			"version": "8.12.0",
+			"resolved": "https://registry.npmjs.org/pg/-/pg-8.12.0.tgz",
+			"integrity": "sha512-A+LHUSnwnxrnL/tZ+OLfqR1SxLN3c/pgDztZ47Rpbsd4jUytsTtwQo/TLPRzPJMp/1pbhYVhH9cuSZLAajNfjQ==",
+			"license": "MIT",
+			"dependencies": {
+				"pg-connection-string": "^2.6.4",
+				"pg-pool": "^3.6.2",
+				"pg-protocol": "^1.6.1",
+				"pg-types": "^2.1.0",
+				"pgpass": "1.x"
+			},
+			"engines": {
+				"node": ">= 8.0.0"
+			},
+			"optionalDependencies": {
+				"pg-cloudflare": "^1.1.1"
+			},
+			"peerDependencies": {
+				"pg-native": ">=3.0.1"
+			},
+			"peerDependenciesMeta": {
+				"pg-native": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/pg-cloudflare": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.1.1.tgz",
+			"integrity": "sha512-xWPagP/4B6BgFO+EKz3JONXv3YDgvkbVrGw2mTo3D6tVDQRh1e7cqVGvyR3BE+eQgAvx1XhW/iEASj4/jCWl3Q==",
+			"license": "MIT",
+			"optional": true
+		},
+		"node_modules/pg-connection-string": {
+			"version": "2.6.4",
+			"resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.6.4.tgz",
+			"integrity": "sha512-v+Z7W/0EO707aNMaAEfiGnGL9sxxumwLl2fJvCQtMn9Fxsg+lPpPkdcyBSv/KFgpGdYkMfn+EI1Or2EHjpgLCA==",
+			"license": "MIT"
+		},
+		"node_modules/pg-int8": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+			"integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
+			"license": "ISC",
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/pg-numeric": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/pg-numeric/-/pg-numeric-1.0.2.tgz",
+			"integrity": "sha512-BM/Thnrw5jm2kKLE5uJkXqqExRUY/toLHda65XgFTBTFYZyopbKjBe29Ii3RbkvlsMoFwD+tHeGaCjjv0gHlyw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/pg-pool": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.6.2.tgz",
+			"integrity": "sha512-Htjbg8BlwXqSBQ9V8Vjtc+vzf/6fVUuak/3/XXKA9oxZprwW3IMDQTGHP+KDmVL7rtd+R1QjbnCFPuTHm3G4hg==",
+			"license": "MIT",
+			"peerDependencies": {
+				"pg": ">=8.0"
+			}
+		},
+		"node_modules/pg-protocol": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.6.1.tgz",
+			"integrity": "sha512-jPIlvgoD63hrEuihvIg+tJhoGjUsLPn6poJY9N5CnlPd91c2T18T/9zBtLxZSb1EhYxBRoZJtzScCaWlYLtktg==",
+			"license": "MIT"
+		},
+		"node_modules/pg-types": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+			"integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+			"license": "MIT",
+			"dependencies": {
+				"pg-int8": "1.0.1",
+				"postgres-array": "~2.0.0",
+				"postgres-bytea": "~1.0.0",
+				"postgres-date": "~1.0.4",
+				"postgres-interval": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/pgpass": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
+			"integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+			"license": "MIT",
+			"dependencies": {
+				"split2": "^4.1.0"
+			}
+		},
 		"node_modules/picocolors": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -1347,6 +1541,52 @@
 				"node": "^10 || ^12 || >=14"
 			}
 		},
+		"node_modules/postgres-array": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+			"integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/postgres-bytea": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz",
+			"integrity": "sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/postgres-date": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+			"integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/postgres-interval": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+			"integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+			"license": "MIT",
+			"dependencies": {
+				"xtend": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/postgres-range": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/postgres-range/-/postgres-range-1.1.4.tgz",
+			"integrity": "sha512-i/hbxIE9803Alj/6ytL7UHQxRvZkI9O4Sy+J3HGc4F4oo/2eQAjTSNJ0bfxyse3bH0nuVesCk+3IRLaMtG3H6w==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/readdirp": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1454,6 +1694,15 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/split2": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+			"integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+			"license": "ISC",
+			"engines": {
+				"node": ">= 10.x"
+			}
+		},
 		"node_modules/svelte": {
 			"version": "4.2.19",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
@@ -1565,6 +1814,13 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "6.19.8",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/vite": {
 			"version": "5.4.3",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
@@ -1639,6 +1895,15 @@
 					"optional": true
 				}
 			}
+		},
+		"node_modules/xtend": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+			"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.4"
+			}
 		}
 	}
 }

package.json

@@ -13,10 +13,14 @@
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/pg": "^8.11.8",
 		"svelte": "^4.2.7",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"pg": "^8.12.0"
+	}
 }

src/lib/server/database/db.ts

@@ -0,0 +1,22 @@
+import { env } from "$env/dynamic/private";
+
+import pg from "pg";
+const { Pool } = pg;
+
+export const pool = new Pool({
+    host: env.DB_HOST,
+    port: +env.DB_PORT!,
+    database: env.DB_NAME,
+    user: env.DB_USER,
+    password: env.DB_PASSWORD,
+});
+
+export async function query(text: string, params?: any[]) {
+  const client = await pool.connect();
+  try {
+    const res = await client.query(text, params);
+    return res.rows;
+  } finally {
+    client.release();
+  }
+}

src/routes/+page.server.ts

@@ -0,0 +1,8 @@
+import { query } from '$lib/server/database/db';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+	return {
+		users: await query("SELECT * FROM users;"),
+};
+};

src/routes/+page.svelte

@@ -1,2 +1,134 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+	import type { PageData } from "./$types";
+
+	export let data: PageData;
+</script>
+
+<div class="wrapper">
+	<div class="center">
+		<div class="wavy-rainbow-text">
+			<span style="--i:1">S</span>
+			<span style="--i:2">p</span>
+			<span style="--i:3">o</span>
+			<span style="--i:4">t</span>
+			<span style="--i:5">r</span>
+			<span style="--i:6">a</span>
+			<span style="--i:7">c</span>
+			<span style="--i:8">k</span>
+			<span style="--i:9">y</span>
+		</div>
+		<table>
+			<thead>
+				<tr>
+					<th>Name</th>
+					<th>Count</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each data.users as user}
+					<tr>
+						<td>{user.name}</td>
+						<td>{user.count}</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+</div>
+
+<style>
+	/* ----------- */
+	/* Wavy Header */
+	/* Yoinked doce*/
+	/* ----------- */
+
+	.wavy-rainbow-text {
+		display: flex;
+		justify-content: space-between;
+
+		padding-top: 1em;
+
+		font-size: 3.5em;
+		font-weight: 700;
+	}
+
+	.wavy-rainbow-text span {
+		display: inline-block;
+		position: relative;
+
+		color: white;
+
+		animation: wavy-rainbow-text 3.69s infinite;
+		animation-delay: calc(0.1s * var(--i));
+	}
+
+	@keyframes wavy-rainbow-text {
+		0% {
+			color: #ff0000;
+		}
+		20% {
+			color: #ff7f00;
+		}
+		40% {
+			color: #ffff00;
+		}
+		60% {
+			color: #00ff00;
+		}
+		80% {
+			color: #0000ff;
+		}
+		100% {
+			color: #9400d3;
+		}
+
+		0%,
+		40%,
+		100% {
+			transform: translateY(0);
+		}
+
+		20% {
+			transform: translateY(-20px);
+		}
+	}
+	.wrapper {
+		display: flex;
+		justify-content: center;
+	}
+	.center {
+		flex-direction: column;
+	}
+	table {
+		border-collapse: collapse;
+		margin: 25px 0;
+		font-size: 0.9em;
+		font-family: sans-serif;
+		min-width: 400px;
+		box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+	}
+	table thead tr {
+		background-color: #009879;
+		color: #ffffff;
+		text-align: left;
+	}
+	table th,
+	table td {
+		padding: 12px 15px;
+	}
+	table tbody tr {
+		border-bottom: 1px solid #dddddd;
+	}
+
+	table tbody tr:nth-of-type(even) {
+		background-color: #f3f3f3;
+	}
+
+	table tbody tr:last-of-type {
+		border-bottom: 2px solid #009879;
+	}
+	table tbody tr.active-row {
+		font-weight: bold;
+		color: #009879;
+	}
+</style>