init

app/entry.server.tsx

@@ -1,4 +1,3 @@
-import 'dotenv/config'
 import type { EntryContext } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import { renderToString } from "react-dom/server";

app/routes/index.tsx

@@ -19,9 +19,10 @@ export default function Index() {
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
       <h1>Welcome to Remix Heroku</h1>
+      <a href="/new">Add a new note</a>
       <p> Notes: </p>
       <ul>
-        {data.notes.map(({ id, name }) => ( <li key={name}>id: {id} name: {name}</li>))}
+        {data.notes.map(({ id, name, content }) => ( <li key={name}>id: {id} name: {name} content: {content}</li>))}
       </ul>
       
       

app/routes/new.tsx

@@ -0,0 +1,50 @@
+import type { ActionFunction } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
+
+import { db } from "~/utils/db.server";
+
+export const action: ActionFunction = async ({
+  request,
+}) => {
+  const form = await request.formData();
+  const name = form.get("name");
+  const content = form.get("content");
+  // we do this type check to be extra sure and to make TypeScript happy
+  if (
+    typeof name !== "string" ||
+    typeof content !== "string"
+  ) {
+    throw new Error(`Form not submitted correctly.`);
+  }
+
+  const fields = { name, content };
+
+  await db.note.create({ data: fields });
+  return redirect(`/`);
+};
+
+
+export default function NewNote() {
+    return (
+      <div>
+        <p>Add your own note</p>
+        <form method="post">
+          <div>
+            <label>
+              Name: <input type="text" name="name" />
+            </label>
+          </div>
+          <div>
+            <label>
+              Content: <textarea name="content" />
+            </label>
+          </div>
+          <div>
+            <button type="submit" className="button">
+              Add
+            </button>
+          </div>
+        </form>
+      </div>
+    );
+  }