client init

client/src/routes/home/index.tsx

@@ -0,0 +1,11 @@
+import { h } from 'preact';
+import style from './style.less';
+
+const Home = () => (
+	<div class={style.home}>
+		<h1>Home</h1>
+		<p>This is the Home component.</p>
+	</div>
+);
+
+export default Home;

client/src/routes/home/style.less

@@ -0,0 +1,5 @@
+.home {
+	padding: 56px 20px;
+	min-height: 100%;
+	width: 100%;
+}

client/src/routes/profile/index.tsx

@@ -0,0 +1,36 @@
+import { h } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import style from './style.less';
+
+interface Props {
+    user: string;
+}
+
+// Note: `user` comes from the URL, courtesy of our router
+const Profile = ({ user }: Props) => {
+    const [time, setTime] = useState<number>(Date.now());
+    const [count, setCount] = useState<number>(0);
+
+
+    useEffect(() => {
+		let timer = setInterval(() => setTime(Date.now()), 1000);
+		return () => clearInterval(timer);
+	}, []);
+
+    return (
+		<div class={style.profile}>
+			<h1>Profile: {user}</h1>
+			<p>This is the user profile for a user named { user }.</p>
+
+			<div>Current time: {new Date(time).toLocaleString()}</div>
+
+			<p>
+				<button onClick={() => setCount((count) => count + 1)}>Click Me</button>
+				{' '}
+				Clicked {count} times.
+			</p>
+		</div>
+	);
+};
+
+export default Profile;

client/src/routes/profile/style.less

@@ -0,0 +1,5 @@
+.profile {
+	padding: 56px 20px;
+	min-height: 100%;
+	width: 100%;
+}