directory structure, some basics for front end

client/src/App.tsx

@@ -1,30 +1,26 @@
-import { useState } from 'react';
-import './App.scss'
+import { Page, Panel } from './components/ui';
+import './sass/App.scss'
 
 function App() {
-  const [value, setValue] = useState("Waiting for stuff...");
-
-  const getThings = async () => {
-    const data = await fetch('http://localhost:8080/hello');
-    const json = await data.json();
-    setValue(json.message);
-  }
 
   return (
-    <div className="App">
-      <h1>RECIPE MANAGER</h1>
-      <h2>Simple Recipe Management and Sharing for the Home</h2>
-      <p>Keep all your most-used recipes handy in your own personal collection.</p>
+    <Page extraStyles='App'>
+      <Panel>
+        <h1>RECIPE MANAGER</h1>
+        <h2>Simple Recipe Management and Sharing for the Home</h2>
+        <p>Keep all your most-used recipes handy in your own personal collection.</p>
+      </Panel>
 
-      <h2>Share Your Recipe Collection</h2>
-      <p>Share your personal collection with your friends and family, and subscribe to their collections.</p>
+      <Panel>
+        <h2>Share Your Recipe Collection</h2>
+        <p>Share your personal collection with your friends and family, and subscribe to their collections.</p>
+      </Panel>
 
-      <h2>Build Shopping Lists Directly from Your Recipes</h2>
-      <p>Lay out your meal plan for the week, and let Recipin automatically generate your grocery list, ingredient by ingredient.</p>
-
-      <p>{value}</p>
-      <button onClick={getThings}>Do some stuff!</button>
-    </div>
+      <Panel>
+        <h2>Build Shopping Lists Directly from Your Recipes</h2>
+        <p>Lay out your meal plan for the week, and let Recipin automatically generate your grocery list, ingredient by ingredient.</p>
+      </Panel>
+    </Page>
   )
 }
 

client/src/components/ui/Page.tsx

@@ -0,0 +1,11 @@
+import { PageComponent } from "../../util/types"
+
+const Page: PageComponent = ({ extraStyles, children }) => {
+    return (
+        <main className={`page ${extraStyles || null}`}>
+            { children || null }
+        </main>
+    )
+}
+
+export default Page;

client/src/components/ui/Panel.tsx

@@ -0,0 +1,11 @@
+import { PanelComponent } from "../../util/types";
+
+const Panel: PanelComponent = ({ children, extraStyles }) => {
+    return (
+        <div className={`panel ${extraStyles || ''}`}>
+            { children || null }
+        </div>
+    )
+}
+
+export default Panel;

client/src/components/ui/index.ts

@@ -0,0 +1,7 @@
+import Page from "./Page";
+import Panel from "./Panel";
+
+export {
+    Page,
+    Panel
+}

client/src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.scss'
+import './sass/index.scss'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

client/src/util/types.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from "react";
+
+interface PortalBase {
+    children?: ReactNode
+    extraStyles?: string
+}
+
+export type PageComponent = FC<PortalBase>
+export type PanelComponent = FC<PortalBase>