feat: static ecommerce site using gatsby

gatsby-config.js

@@ -32,5 +32,12 @@ module.exports = {
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,
+    `gatsby-transformer-json`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `./src/data/`,
+      },
+    },
   ],
 };

package.json

@@ -11,7 +11,8 @@
     "gatsby-plugin-offline": "^3.1.5",
     "gatsby-plugin-react-helmet": "^3.2.5",
     "gatsby-plugin-sharp": "^2.5.7",
-    "gatsby-source-filesystem": "^2.2.5",
+    "gatsby-source-filesystem": "^2.3.1",
+    "gatsby-transformer-json": "^2.4.1",
     "gatsby-transformer-sharp": "^2.4.7",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",

src/components/product.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Product = ({ product }) => {
+  return (
+    <li key={product.name}>
+      <h3>{product.name}</h3>
+      <p>{product.brand}</p>
+      <div>
+        <strong>${product.price}</strong>
+      </div>
+    </li>
+  );
+};
+
+export default Product;

src/components/products.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Product from "./product";
+
+const Products = ({ products }) => {
+  return (
+    <ul>
+      {products.map(({ node: product }) => (
+        <Product product={product} key={product.name} />
+      ))}
+    </ul>
+  );
+};
+
+export default Products;

src/data/products.json

@@ -0,0 +1,172 @@
+[
+  {
+    "categories": ["new arrivals"],
+    "name": "Timber Gray Sofa",
+    "price": "1000",
+    "description": "Stay a while. The Timber charme chocolat sofa is set atop an oak trim and flaunts fluffy leather back and seat cushions. Over time, this brown leather sofa’s full-aniline upholstery will develop a worn-in vintage look. Snuggle up with your cutie (animal or human) and dive into a bowl of popcorn. This sofa is really hard to leave. Natural color variations, wrinkles and creases are part of the unique characteristics of this leather. It will develop a relaxed vintage look with regular use.",
+    "brand": "Jason Bourne",
+    "currentInventory": 4
+  },
+  {
+    "categories": ["sofas", "living room"],
+    "name": "Carmel Brown Sofa",
+    "price": "1000",
+    "description": "Stay a while. The Timber charme chocolat sofa is set atop an oak trim and flaunts fluffy leather back and seat cushions. Over time, this brown leather sofa’s full-aniline upholstery will develop a worn-in vintage look. Snuggle up with your cutie (animal or human) and dive into a bowl of popcorn. This sofa is really hard to leave. Natural color variations, wrinkles and creases are part of the unique characteristics of this leather. It will develop a relaxed vintage look with regular use.",
+    "brand": "Jason Bourne",
+    "currentInventory": 2
+  },
+  {
+    "categories": ["new arrivals", "sofas"],
+    "name": "Mod Leather Sofa",
+    "price": "800",
+    "description": "Easy to love. The Sven in birch ivory looks cozy and refined, like a sweater that a fancy lady wears on a coastal vacation. This ivory loveseat has a tufted bench seat, loose back pillows and bolsters, solid walnut legs, and is ready to make your apartment the adult oasis you dream of. Nestle it with plants, an ottoman, an accent chair, or 8 dogs. Your call.",
+    "brand": "Jason Bourne",
+    "currentInventory": 8
+  },
+  {
+    "categories": ["new arrivals", "sofas"],
+    "name": "Thetis Gray Love Seat",
+    "price": "900",
+    "description": "You know your dad’s incredible vintage bomber jacket? The Nirvana dakota tan leather sofa is that jacket, but in couch form. With super-plush down-filled cushions, a corner-blocked wooden frame, and a leather patina that only gets better with age, the Nirvana will have you looking cool and feeling peaceful every time you take a seat. Looks pretty great with a sheepskin throw, if we may say so. With use, this leather will become softer and more wrinkled and the cushions will take on a lived-in look, like your favorite leather jacket.",
+    "brand": "Jason Bourne",
+    "currentInventory": 10
+  },
+  {
+    "categories": ["on sale", "sofas"],
+    "name": "Sven Tan Matte",
+    "price": "1200",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 7
+  },
+  {
+    "categories": ["on sale", "sofas"],
+    "name": "Otis Malt Sofa",
+    "price": "500",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 13
+  },
+  {
+    "categories": ["on sale", "sofas"],
+    "name": "Ceni Brown 3 Seater",
+    "price": "650",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 9
+  },
+  {
+    "categories": ["sofas", "living room"],
+    "name": "Jameson Jack Lounger",
+    "price": "1230",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 24
+  },
+
+  {
+    "categories": ["sofas"],
+    "name": "Galaxy Blue Sofa",
+    "price": "800",
+    "description": "Easy to love. The Sven in birch ivory looks cozy and refined, like a sweater that a fancy lady wears on a coastal vacation. This ivory loveseat has a tufted bench seat, loose back pillows and bolsters, solid walnut legs, and is ready to make your apartment the adult oasis you dream of. Nestle it with plants, an ottoman, an accent chair, or 8 dogs. Your call.",
+    "brand": "Jason Bourne",
+    "currentInventory": 43
+  },
+  {
+    "categories": ["new arrivals", "sofas"],
+    "name": "Markus Green Love Seat",
+    "price": "900",
+    "description": "You know your dad’s incredible vintage bomber jacket? The Nirvana dakota tan leather sofa is that jacket, but in couch form. With super-plush down-filled cushions, a corner-blocked wooden frame, and a leather patina that only gets better with age, the Nirvana will have you looking cool and feeling peaceful every time you take a seat. Looks pretty great with a sheepskin throw, if we may say so. With use, this leather will become softer and more wrinkled and the cushions will take on a lived-in look, like your favorite leather jacket.",
+    "brand": "Jason Bourne",
+    "currentInventory": 2
+  },
+  {
+    "categories": ["on sale", "sofas"],
+    "name": "Dabit Matte Black",
+    "price": "1200",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "currentInventory": 14
+  },
+
+  {
+    "categories": ["on sale", "chairs"],
+    "name": "Embrace Blue",
+    "price": "300",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 12
+  },
+  {
+    "categories": ["on sale", "chairs"],
+    "name": "Nord Lounger",
+    "price": "825",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 13
+  },
+  {
+    "categories": ["on sale", "chairs"],
+    "name": "Ceni Matte Oranve",
+    "price": "720",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 33
+  },
+  {
+    "categories": ["on sale", "chairs"],
+    "name": "Abisko Green Recliner",
+    "price": "2000",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 23
+  },
+  {
+    "categories": ["on sale", "chairs"],
+    "name": "Denim on Denim Single",
+    "price": "1100",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 13
+  },
+  {
+    "categories": ["on sale", "chairs"],
+    "name": "Levo Tan Lounge Chair",
+    "price": "600",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 15
+  },
+
+  {
+    "categories": ["on sale", "chairs"],
+    "name": "Anime Tint Recliner",
+    "price": "775",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 44
+  },
+  {
+    "categories": ["on sale", "chairs"],
+    "name": "Josh Jones Red Chair",
+    "price": "1200",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 17
+  },
+  {
+    "categories": ["on sale", "chairs"],
+    "name": "Black Sand Lounge",
+    "price": "1600",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 28
+  },
+  {
+    "categories": ["on sale", "chairs"],
+    "name": "Mint Beige Workchair",
+    "price": "550",
+    "description": "You don’t have to go outside to be rugged. The Cigar rawhide sofa features a sturdy corner-blocked wooden frame and raw seams for that Malboro-person look. This brown leather sofa is cozy in a cottage, cabin, or a condo. And the leather (the leather!) becomes more beautiful with use: subtle character markings such as insect bites, healed scars, and grain variation reflects a real vintage. Saddle up and pass the remote.",
+    "brand": "Jason Bourne",
+    "currentInventory": 31
+  }
+]

src/pages/index.js

@@ -1,27 +1,34 @@
 import React from "react";
-import { Link } from "gatsby";
+import { graphql } from "gatsby";
 import Layout from "../components/layout";
-import Image from "../components/image";
 import SEO from "../components/seo";
+import Products from "../components/products";
+
+const IndexPage = ({ data }) => {
+  const products = data.allProductsJson.edges;
 
-const IndexPage = () => {
   return (
     <Layout>
       <SEO title="Home" />
-      <h1>Hi people</h1>
-      <p>Welcome to your new Gatsby site.</p>
-      <p>Now go build something great.</p>
-      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-        <Image />
-      </div>
-      <div>
-        <Link to="/about">Go to about (through browser)</Link>
-      </div>
-      <div>
-        <a href="/about">About (reload the page)</a>
-      </div>
+      <Products products={products} />
     </Layout>
   );
 };
 
 export default IndexPage;
+
+export const pageQuery = graphql`
+  query HomePageQuery {
+    allProductsJson {
+      edges {
+        node {
+          brand
+          id
+          name
+          categories
+          price
+        }
+      }
+    }
+  }
+`;