Importing form

.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+	env: {
+		browser: true,
+		es6: true,
+		node: true
+	},
+	extends: [
+		'eslint:recommended',
+		'plugin:react/recommended'
+	],
+	settings: {
+		react: {
+			pragma: 'React',
+			version: '^16.8.6'
+		}
+	},
+	globals: {
+		Atomics: 'readonly',
+		SharedArrayBuffer: 'readonly'
+	},
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true
+		},
+		ecmaVersion: 2018,
+		sourceType: 'module'
+	},
+	plugins: [
+		'react',
+		'react-hooks'
+	],
+	rules: {
+		'no-console': 'off',
+		'react/prop-types': 0,
+		'no-unused-vars': 'off',
+		'no-undef': 'off',
+		'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+		'react-hooks/exhaustive-deps': 'warn' // Checks effect dependencies
+	}
+}

gatsby-config.js

@@ -1,9 +1,19 @@
+var proxy = require("http-proxy-middleware")
+
 module.exports = {
   siteMetadata: {
     title: `Gatsby Default Starter`,
     description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
     author: `@gatsbyjs`,
   },
+  developMiddleware: app => {
+    app.use(
+      "/api/",
+      proxy({
+        target: "http://localhost:3000"
+      })
+    )
+  },
   plugins: [
     `gatsby-plugin-react-helmet`,
     {

src/components/form.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react"
+
+const Form = () => {
+  const [title, setTitle] = useState('')
+  const [excerpt, setExcerpt] = useState('')
+	const [author, setAuthor] = useState('')
+
+  const handleSubmit = async e => {
+    e.preventDefault()
+
+    try {
+      let payload = {
+        poem: title,
+        excerpt: excerpt,
+				author: author
+      }
+
+      const response = await fetch('/api/save-poem/', {
+        method: "POST",
+        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: "omit", // include, *same-origin, omit
+        headers: { "Content-Type": "application/json" },
+        redirect: "follow", // manual, *folslow, error
+        referrer: "client", // no-referrer, *client
+        body: JSON.stringify(payload),
+      })
+
+      const answer = await response.json()
+
+      if (answer.success) {
+        alert(answer.message)
+      }
+      else {
+        alert(answer.errors[0].msg)
+      }
+    }
+    catch (err) {
+      alert('Error connecting to backend:', err)
+    }
+  }
+
+  const handleTitleChange = e => {
+    setTitle(e.currentTarget.value)
+  }
+
+  const handleExcerptChange = e => {
+    setExcerpt(e.currentTarget.value)
+  }
+
+	const handleAuthorChange = e => {
+    setAuthor(e.currentTarget.value)
+  }
+
+  return (
+    <div className='backend'>
+      <form onSubmit={handleSubmit} >
+        <input placeholder='Poem title' onChange={handleTitleChange} />
+        <input placeholder='Excerpt' onChange={handleExcerptChange} />
+				<input placeholder='Poem author' onChange={handleAuthorChange} />
+
+        <button type='submit'>Send</button>
+      </form>
+    </div>
+  )
+}
+
+export default Form

src/pages/index.js

@@ -4,6 +4,7 @@ import { Link } from "gatsby"
 import Layout from "../components/layout"
 import Image from "../components/image"
 import SEO from "../components/seo"
+import Form from "../components/form"
 
 const IndexPage = () => (
   <Layout>
@@ -14,6 +15,7 @@ const IndexPage = () => (
     <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
       <Image />
     </div>
+    <Form />
     <Link to="/page-2/">Go to page 2</Link>
   </Layout>
 )