feat: frontend layout skeleton

frontend/src/pages/Home.tsx

@@ -0,0 +1,23 @@
+import ReactMarkdown from "react-markdown";
+
+// this is a temporary home page, which is why the markdown content is embedded
+const md = `This will (one day) be a site to create pronoun cards for yourself,
+similarly to [Pronouny](https://pronouny.xyz/) and [Pronouns.page](https://en.pronouns.page/).
+
+You'll be able to create multiple profiles that are linked together,
+useful for plurality ([what?](https://morethanone.info/)) and kin, or even just for fun!
+
+For now though, there's just this landing page <3  
+(And no, the "Log in" button doesn't do anything either.)
+
+Check out the (work in progress) source code on [GitLab](https://gitlab.com/1f320/pronouns)!`;
+
+function Home() {
+  return (
+    <div className="prose prose-slate dark:prose-invert">
+      <ReactMarkdown>{md}</ReactMarkdown>
+    </div>
+  );
+}
+
+export default Home;

frontend/src/pages/User.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { ArrowClockwise } from "react-bootstrap-icons";
+import { selectorFamily, useRecoilValue } from "recoil";
+import axios from "axios";
+import type { APIError, User } from "../lib/types";
+
+const userPageState = selectorFamily({
+  key: "userPageState",
+  get: (username: string) => async () => {
+    const res = await axios.get(`/api/v1/users/${username}`);
+    if (res.status !== 200) {
+      throw res.data as APIError;
+    }
+
+    return res.data as User;
+  },
+});
+
+function UserPage() {
+  const params = useParams();
+
+  const [user, setUser] = useState<User>(null);
+
+  useEffect(() => {
+    axios.get(`/api/v1/users/${params.username}`).then((res) => {
+      if (res.status !== 200) throw res.data as APIError;
+
+      setUser(res.data as User);
+    });
+  }, []);
+
+  if (user == null) {
+    return (
+      <>
+        <ArrowClockwise />
+        <span>Loading...</span>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <h1 className="text-xl font-bold">
+        {user.username} ({user.id})
+      </h1>
+    </>
+  );
+}
+
+export default UserPage;