app: Create basic app.

app/src/pages/404.js

@@ -0,0 +1,14 @@
+import React from "react"
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+const NotFoundPage = () => (
+  <Layout>
+    <SEO title="404: Not found" />
+    <h1>NOT FOUND</h1>
+    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+  </Layout>
+)
+
+export default NotFoundPage

app/src/pages/index.js

@@ -0,0 +1,39 @@
+import React from "react"
+import { Link } from "gatsby"
+
+import Layout from "../components/layout"
+import Image from "../components/image"
+import SEO from "../components/seo"
+import BookCard from "../components/bookcard"
+
+export default ({data}) => {
+  return (
+    <Layout>
+      <SEO title="Home" />
+      <div class="flex flex-wrap">
+      {data.allBooksJson.edges.map(function(x) {
+        return (
+          <BookCard book={x.node} />
+        )
+      })}
+      </div>
+    </Layout>
+  )
+}
+
+export const query = graphql`query MyQuery {
+  allBooksJson {
+    edges {
+      node {
+        id
+        title
+        url
+        rating
+        author
+        year
+        category
+      }
+    }
+  }
+}
+`

app/src/pages/page-2.js

@@ -0,0 +1,16 @@
+import React from "react"
+import { Link } from "gatsby"
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+const SecondPage = () => (
+  <Layout>
+    <SEO title="Page two" />
+    <h1>Hi from the second page</h1>
+    <p>Welcome to page 2</p>
+    <Link to="/">Go back to the homepage</Link>
+  </Layout>
+)
+
+export default SecondPage