add a basic landing page

projects/backend/src/controller/app.controller.ts

@@ -1,5 +1,6 @@
 import { Controller, Get } from "elysia-decorators";
 import { getAppVersion } from "../common/app-utils";
+import { AppService } from "../service/app.service";
 
 @Controller()
 export default class AppController {
@@ -10,4 +11,9 @@ export default class AppController {
       version: getAppVersion(),
     };
   }
+
+  @Get("/statistics")
+  public async getStatistics() {
+    return await AppService.getAppStatistics();
+  }
 }

projects/backend/src/service/app.service.ts

@@ -0,0 +1,15 @@
+import { PlayerModel } from "../model/player";
+import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
+
+export class AppService {
+  /**
+   * Gets the app statistics.
+   */
+  public static async getAppStatistics(): Promise<AppStatistics> {
+    const trackedPlayers = await PlayerModel.countDocuments();
+
+    return {
+      trackedPlayers,
+    };
+  }
+}

projects/common/src/types/backend/app-statistics.ts

@@ -0,0 +1,6 @@
+export type AppStatistics = {
+  /**
+   * The total amount of players being tracked.
+   */
+  trackedPlayers: number;
+};

projects/website/package.json

@@ -39,6 +39,7 @@
     "node-cache": "^5.1.2",
     "react": "19.0.0-rc-3edc000d-20240926",
     "react-chartjs-2": "^5.2.0",
+    "react-countup": "^6.5.3",
     "react-dom": "19.0.0-rc-3edc000d-20240926",
     "react-hook-form": "^7.53.0",
     "tailwind-merge": "^2.5.2",

projects/website/src/app/(pages)/page.tsx

@@ -1,3 +1,32 @@
-export default function HomePage() {
-  return <main>hi</main>;
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import ky from "ky";
+import { config } from "../../../config";
+import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
+import Statistic from "@/components/home/statistic";
+
+export default async function HomePage() {
+  const statistics = await ky.get(config.siteApi + "/statistics").json<AppStatistics>();
+
+  return (
+    <main className="flex flex-col items-center w-full gap-6 text-center">
+      <div className="flex items-center flex-col">
+        <p className="font-semibold text-2xl">ScoreSaber Reloaded</p>
+        <p className="text-center">Welcome to the ScoreSaber Reloaded website.</p>
+      </div>
+
+      <div className="flex items-center flex-col">
+        <p>ScoreSaber Reloaded is a website that allows you to track your ScoreSaber data over time.</p>
+      </div>
+
+      <div className="flex items-center flex-col">
+        <p className="font-semibold">Site Statistics</p>
+        <Statistic title="Total Tracked Players" value={statistics.trackedPlayers} />
+      </div>
+
+      <Link href="/search">
+        <Button className="w-fit">Get started</Button>
+      </Link>
+    </main>
+  );
 }

projects/website/src/components/home/statistic.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import CountUp from "react-countup";
+
+type Statistic = {
+  title: string;
+  value: number;
+};
+
+export default function Statistic({ title, value }: Statistic) {
+  return (
+    <p className="text-center">
+      {title}: <CountUp end={value} duration={0.75} />
+    </p>
+  );
+}