{"id":28153,"date":"2022-04-19T17:10:26","date_gmt":"2022-04-19T17:10:26","guid":{"rendered":"http:\/\/build-an-inventory-tracker"},"modified":"2022-04-19T17:10:26","modified_gmt":"2022-04-19T17:10:26","slug":"build-an-inventory-tracker","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/","title":{"rendered":"Build an Inventory Tracker"},"content":{"rendered":"

This will use Next.js to let users upload images of their items and do immediate updates as an admin.<\/p>\n

Initial setup<\/h2>\n

There are a couple of things you need to have in place before we start working on the Next app. First, we\u2019ll be using Cloudinary to host the product images. So if you don\u2019t have a free account, you can go make one here<\/a>. We\u2019ll also be using a PostgreSQL database to hold all of the product data, so if you don\u2019t have a local instance, you can download it for free here<\/a>.<\/p>\n

Create a new Next app<\/h2>\n

Now we can dive straight into the app and start by generating a new Next project. Run the following command in your terminal:<\/p>\n

$ yarn create next-app --typescript\n<\/code><\/span><\/pre>\n
This will create a new Next project and it will prompt you for a name. I\u2019ve called this project inventory-tracker<\/code>, but feel free to call it anything you like. We\u2019re going to use Next\u2019s built-in API routes<\/a> to handle our database operations since it\u2019s basic CRUD operations. Since we\u2019re talking about the database, let\u2019s go ahead and set up Prisma<\/a> to handle those operations with our local Postgres instance.<\/p>\n
Prisma set up<\/h3>\n
Let\u2019s start by adding the prisma<\/code> package to the project with the following command:<\/p>\n
$ yarn add prisma @prisma\/client\n<\/code><\/span><\/pre>\n
Now we can use the Prisma CLI to make the config files we need to connect our project to Postgres. Run the following command to set up Prisma:<\/p>\n
$ npx prisma init\n<\/code><\/span><\/pre>\n
This generates a .env<\/code> file at the root of your project and a new prisma<\/code> directory that has the schema.prisma<\/code> file that connects the whole app to Postgres. This is also where we will define the database schema. But first, open the .env<\/code> file and update the connection string with your local Postgres username, password, and database name.<\/p>\n
Defining the database schema<\/h3>\n
Now open the schema.prisma<\/code> file because we can add the models for the table we\u2019ll use here. Below the datasource<\/code> where we define the connection to the database, add the following code:<\/p>\n
\/\/ schema.prisma<\/span>\n...\nmodel Product {\n  id       String<\/span> @id @default<\/span>(uuid())\n  name     String<\/span>\n  sku      String<\/span> @default<\/span>(uuid())\n  image    String<\/span>\n  quantity Int\n  storeId  String<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This defines the columns of the Product<\/code> table that will help us keep all the items in multiple stores available. Now that we have the database defined, we can run a migration to make these changes in the database.<\/p>\n
Migrating changes to the database<\/h3>\n
We\u2019ll run another command to handle the migration using Prisma. In your terminal, run this:<\/p>\n
$ npx prisma migrate dev --name init\n<\/code><\/span><\/pre>\n
This will create the Product<\/code> table in your database with all the fields we have defined. Now we can move on to the API route for this app. We\u2019ll write all of the CRUD logic for it in a new file.<\/p>\n
Adding a Next API route<\/h2>\n
Go to the pages > api<\/code> directory and add a new file called inventory.ts<\/code>. This is where we\u2019ll make the calls to our database using Prisma. Open this file and add the follow code:<\/p>\n
\/\/ inventory.ts<\/span>\nimport<\/span> type { NextApiRequest, NextApiResponse } from<\/span> \"next\"<\/span>;\nimport<\/span> { PrismaClient } from<\/span> \"@prisma\/client\"<\/span>;\n\ninterface Product {\n  id<\/span>: string;\n  name: string;\n  sku: string;\n  image: string;\n  quantity: number;\n  storeId: string;\n}\n\nconst<\/span> prisma = new<\/span> PrismaClient();\n\nexport<\/span> default<\/span> async<\/span> function<\/span> handler<\/span>(\n  req: NextApiRequest,\n  res: NextApiResponse<Product[] | Product | null>\n<\/span>) <\/span>{\n  switch<\/span> (req.query.type) {\n    case<\/span> \"products\"<\/span>:\n      getAllProducts(req, res);\n      break<\/span>;\n    case<\/span> \"product\"<\/span>:\n      getProduct(req, res);\n      break<\/span>;\n    case<\/span> \"create\"<\/span>:\n      createProduct(req, res);\n      break<\/span>;\n    case<\/span> \"update\"<\/span>:\n      updateProduct(req, res);\n      break<\/span>;\n    case<\/span> \"delete\"<\/span>:\n      deleteProduct(req, res);\n      break<\/span>;\n    default<\/span>:\n      res.status(200<\/span>).json([]);\n  }\n}\n\nasync<\/span> function<\/span> getAllProducts<\/span>(\n  req: NextApiRequest,\n  res: NextApiResponse<Product[]>\n<\/span>) <\/span>{\n  const<\/span> allProducts = await<\/span> prisma.product.findMany();\n\n  res.status(200<\/span>).json(allProducts || []);\n}\n\nasync<\/span> function<\/span> getProduct<\/span>(\n  req: NextApiRequest,\n  res: NextApiResponse<Product | null>\n<\/span>) <\/span>{\n  const<\/span> product = await<\/span> prisma.product.findUnique({\n    where<\/span>: {\n      id<\/span>: req.body.id,\n    },\n  });\n\n  res.status(200<\/span>).json(product);\n}\n\nasync<\/span> function<\/span> createProduct<\/span>(\n  req: NextApiRequest,\n  res: NextApiResponse<Product>\n<\/span>) <\/span>{\n  const<\/span> newProduct = await<\/span> prisma.product.create({\n    data<\/span>: {\n      name<\/span>: req.body.product.name,\n      sku<\/span>: req.body.product.sku,\n      image<\/span>: req.body.product.image,\n      quantity<\/span>: req.body.product.quantity,\n      storeId<\/span>: req.body.product.storeId,\n    },\n  });\n\n  res.status(200<\/span>).json(newProduct);\n}\n\nasync<\/span> function<\/span> updateProduct<\/span>(\n  req: NextApiRequest,\n  res: NextApiResponse<Product>\n<\/span>) <\/span>{\n  const<\/span> updatedProduct = await<\/span> prisma.product.update({\n    where<\/span>: { id<\/span>: req.body.modifiedProduct.id },\n    data<\/span>: {\n      name<\/span>: req.body.modifiedProduct.name,\n      sku<\/span>: req.body.modifiedProduct.sku,\n      image<\/span>: req.body.modifiedProduct.image,\n      quantity<\/span>: req.body.modifiedProduct.quantity,\n      storeId<\/span>: req.body.modifiedProduct.storeId,\n    },\n  });\n\n  res.status(200<\/span>).json(updatedProduct);\n}\n\nasync<\/span> function<\/span> deleteProduct<\/span>(\n  req: NextApiRequest,\n  res: NextApiResponse<Product>\n<\/span>) <\/span>{\n  const<\/span> deleteProduct = await<\/span> prisma.product.delete({\n    where<\/span>: { id<\/span>: req.body.productId },\n  });\n\n  res.status(200<\/span>).json(deleteProduct);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
There\u2019s quite a bit going on here so we\u2019ll walk through it. We import some package and then define the Product<\/code> type to appease TypeScript requirements. Then we instantiate a new Prisma client to connect to our database. After that is the handler<\/code> function. This will take the request and call a different function based on the referer value. Finally, we have the getProducts<\/code>, getProduct<\/code>, createProduct<\/code>, updateProduct<\/code>, and deleteProduct<\/code> methods.<\/p>\n
These make all of the database queries that get sent to our Postgres instance. Each of these methods returns a product-typed response to the requester. So if you want to do some testing in Postman before you work with the front-end. Once you feel like your endpoints are good to go, we can switch over to the front-end.<\/p>\n
Setting up Tailwind CSS<\/a><\/h2>\n
We\u2019re going to use Tailwind CSS to handle our styles so let\u2019s install that package with the following command:<\/p>\n
$ yarn add tailwindcss postcss autoprefixer @heroicons\/react axios\n<\/code><\/span><\/pre>\n
Then run the following command to initialize Tailwind in the project:<\/p>\n
$ npx tailwindcss init -p\n<\/code><\/span><\/pre>\n
This will add a new file to the root of your directory called tailwind.config.js<\/code> and it handles all of the settings you choose for Tailwind. Open this file and update the content<\/code> line to match this:<\/p>\n
\/\/ tailwind.config.js<\/span>\n...\ncontent: [\n    \".\/pages\/**\/*.{js,ts,jsx,tsx}\"<\/span>,\n    \".\/components\/**\/*.{js,ts,jsx,tsx}\"<\/span>,\n  ],\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This makes it so Tailwind knows which files to style. Now go to styles > globals.css<\/code> and delete all of the styles. We\u2019re going to add these Tailwind directives to this stylesheet so we can use the classes throughout the front-end:<\/p>\n
@tailwind<\/span> base;\n@tailwind<\/span> components;\n@tailwind<\/span> utilities;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Let\u2019s update one more config file so that we\u2019re able to get our images from Cloudinary. This will let Next access the source for any images. Open the next.config.ts<\/code> file at the root of the project and make the following update:<\/p>\n
\/\/ next.config.ts<\/span>\nconst<\/span> nextConfig = {\n  reactStrictMode<\/span>: true<\/span>,\n  images<\/span>: {\n    domains<\/span>: ['res.cloudinary.com'<\/span>]\n  },\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now that Tailwind is ready to go, let\u2019s create the main view for the products.<\/p>\n
Displaying, editing, adding, and deleting products<\/h2>\n
In the pages<\/code> directory, open the index.tsx<\/code> file and delete all of the existing code. This page will be the product table that lists everything in the inventory and there will be buttons that allow us to create new products or interact with existing ones. Let\u2019s start by adding a few imports and a type dedinition at the top of the file:<\/p>\n
\/\/ index.tsx<\/span>\nimport<\/span> { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> axios from<\/span> \"axios\"<\/span>;\nimport<\/span> Image from<\/span> \"next\/image\"<\/span>;\nimport<\/span> {\n  PlusCircleIcon,\n  PencilAltIcon,\n  TrashIcon,\n} from<\/span> \"@heroicons\/react\/solid\"<\/span>;\nimport<\/span> Modal from<\/span> \"..\/components\/Modal\"<\/span>;\n\ninterface Product {\n  id<\/span>: string;\n  name: string;\n  sku: string;\n  image: string;\n  quantity: number;\n  storeId: string;\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019ll make the Modal<\/code> component a little later, so for now we\u2019ll add the request to get the product information from the back-end using our API route. We\u2019ll use the getServerSideProps<\/code> method because we want this page to update every time a user visits it so they can get the most recent information. Add the following code to the bottom of the file:<\/p>\n
\/\/ index.tsx<\/span>\n...\nexport async<\/span> function<\/span> getServerSideProps<\/span>(<\/span>) <\/span>{\n  const<\/span> productsRes = await<\/span> fetch('http:\/\/localhost:3000\/api\/inventory?type=products'<\/span>)\n\n  const<\/span> products = await<\/span> productsRes.json()\n\n  return<\/span> {\n    props<\/span>: {\n      products\n    },\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we can focus on what gets rendered on the page. In between the Product<\/code> type definition and the server-side request for all the products, add the following code:<\/p>\n
\/\/ index.tsx<\/span>\n...\nexport default<\/span> function<\/span> Products<\/span>({ products }<\/span>) <\/span>{\n  const<\/span> [newModal, setNewModal] = useState<boolean>(false<\/span>);\n  const<\/span> [editModal, setEditModal] = useState<boolean>(false<\/span>);\n  const<\/span> [index, setIndex] = useState<number>(0<\/span>);\n\n  const<\/span> deleteProduct = async<\/span> (productId: string) => {\n    await<\/span> axios.delete(\"\/api\/inventory?type=delete\"<\/span>, { data<\/span>: { productId } });\n  };\n\n  return<\/span> (\n    <div<\/span>><\/span>\n      <div<\/span> className<\/span>=\"flex gap-2\"<\/span> onClick<\/span>={()<\/span> =><\/span> setNewModal(true)}>\n        <div<\/span> className<\/span>=\"flex gap-2 bg-gray-700 hover:bg-gray-300 text-white font-bold py-2 px-4 rounded-full m-6\"<\/span>><\/span>\n          <PlusCircleIcon<\/span> className<\/span>=\"h-6 w-6 text-green-500\"<\/span> \/><\/span>\n          Add a product\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span> className<\/span>=\"flex flex-col gap-2\"<\/span>><\/span>\n        {products.length > 0 ? (\n          products.map((product: Product, index: number) => (\n            <div<\/span> key<\/span>={product.id}<\/span> className<\/span>=\"flex gap-6 border-b-2 w-full\"<\/span>><\/span>\n              <Image<\/span>\n                src<\/span>={product.image}<\/span>\n                alt<\/span>={product.name}<\/span>\n                width<\/span>=\"100\"<\/span>\n                height<\/span>=\"100\"<\/span>\n              \/><\/span>\n              <div<\/span>><\/span>{product.name}<\/div<\/span>><\/span>\n              <div<\/span>><\/span>{product.quantity}<\/div<\/span>><\/span>\n              <div<\/span>><\/span>{product.storeId}<\/div<\/span>><\/span>\n              <PencilAltIcon<\/span>\n                className<\/span>=\"h-6 w-6 text-indigo-500\"<\/span>\n                onClick<\/span>={()<\/span> =><\/span> {\n                  setIndex(index);\n                  setEditModal(true);\n                }}\n              \/>\n              <TrashIcon<\/span>\n                className<\/span>=\"h-6 w-6 text-red-400\"<\/span>\n                onClick<\/span>={()<\/span> =><\/span> deleteProduct(product.id)}\n              \/>\n            <\/div<\/span>><\/span>\n          ))\n        ) : (\n          <div<\/span>><\/span>Add some new products<\/div<\/span>><\/span>\n        )}\n      <\/div<\/span>><\/span>\n      {newModal && <Modal<\/span> product<\/span>={{}}<\/span> onCancel<\/span>={()<\/span> =><\/span> setNewModal(false)} \/>}\n      {editModal && (\n        <Modal<\/span> product<\/span>={products[index]}<\/span> onCancel<\/span>={()<\/span> =><\/span> setEditModal(false)} \/>\n      )}\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
There\u2019s a lot happening in this component. First, we define a few states we\u2019ll need to toggle whether a modal needs to be displayed or not and the index of the product that will get sent to the modal if necessary.<\/p>\n
Then we have the function that will delete a product record if we need to. It makes a request to the back-end and sends the product id so the correct record is removed.<\/p>\n
Finally, we\u2019re rendering a button to add new products and then displaying the default message or the product data as rows on the page and each row has product information and a couple of buttons that either display an edit modal or trigger a delete action for that product.<\/p>\n
If you run the app with yarn dev<\/code> now, you should see something like this.<\/p>\n
\"page<\/p>\n
We have all of the CRUD functionality in place so all that\u2019s left is adding that Modal<\/code> component we referenced earlier.<\/p>\n
Product modal component<\/h2>\n
Now we\u2019ll need to add a new folder to the root of the project called components<\/code> and then add a new file called Modal.tsx<\/code>. This component will have a lot of Tailwind styling on it, a few props passed from the index.tsx<\/code> file and a couple of functions. Add the following code to this file and we can go over what\u2019s happening.<\/p>\n
\/\/ Modal.tsx<\/span>\nimport<\/span> axios from<\/span> \"axios\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> Modal<\/span>({ product, onCancel }<\/span>) <\/span>{\n  const<\/span> addProduct = async<\/span> (e) => {\n    e.preventDefault();\n\n    const<\/span> product = {\n      name<\/span>: e.target.name.value,\n      sku<\/span>: e.target.sku.value,\n      image<\/span>: e.target.image.value,\n      quantity<\/span>: Number<\/span>(e.target.quantity.value),\n      storeId<\/span>: e.target.storeId.value,\n    };\n\n    await<\/span> axios.post(\"\/api\/inventory?type=create\"<\/span>, { product });\n\n    onCancel();\n  };\n\n  const<\/span> updateProduct = async<\/span> (e) => {\n    e.preventDefault();\n\n    const<\/span> modifiedProduct = {\n      id<\/span>: product.id,\n      name<\/span>: e.target.name.value,\n      sku<\/span>: e.target.sku.value,\n      image<\/span>: e.target.image.value,\n      quantity<\/span>: Number<\/span>(e.target.quantity.value),\n      storeId<\/span>: e.target.storeId.value,\n    };\n\n    await<\/span> axios.patch(\"\/api\/inventory?type=update\"<\/span>, { modifiedProduct });\n\n    onCancel();\n  };\n\n  return<\/span> (\n    <div<\/span>\n      className<\/span>=\"fixed z-10 inset-0 overflow-y-auto\"<\/span>\n      aria-labelledby<\/span>=\"modal-title\"<\/span>\n      role<\/span>=\"dialog\"<\/span>\n      aria-modal<\/span>=\"true\"<\/span>\n    ><\/span>\n      <div<\/span> className<\/span>=\"flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0\"<\/span>><\/span>\n        <div<\/span>\n          className<\/span>=\"fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity\"<\/span>\n          aria-hidden<\/span>=\"true\"<\/span>\n        ><\/span><\/div<\/span>><\/span>\n        <span<\/span>\n          className<\/span>=\"hidden sm:inline-block sm:align-middle sm:h-screen\"<\/span>\n          aria-hidden<\/span>=\"true\"<\/span>\n        ><\/span>\n          &#8203;<\/span>\n        <\/span<\/span>><\/span>\n        <div<\/span> className<\/span>=\"relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4\"<\/span>><\/span>\n            <div<\/span> className<\/span>=\"sm:flex sm:items-start\"<\/span>><\/span>\n              <div<\/span> className<\/span>=\"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left\"<\/span>><\/span>\n                <h3<\/span>\n                  className<\/span>=\"text-lg leading-6 font-medium text-gray-900\"<\/span>\n                  id<\/span>=\"modal-title\"<\/span>\n                ><\/span>\n                  Add a new product\n                <\/h3<\/span>><\/span>\n                <div<\/span> className<\/span>=\"mt-2\"<\/span>><\/span>\n                  <form<\/span>\n                    className<\/span>=\"w-full max-w-sm\"<\/span>\n                    onSubmit<\/span>={product<\/span> ? updateProduct<\/span> :<\/span> addProduct<\/span>}\n                  ><\/span>\n                    <div<\/span> className<\/span>=\"md:flex md:items-center mb-6\"<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-1\/3\"<\/span>><\/span>\n                        <label<\/span>\n                          className<\/span>=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\"<\/span>\n                          htmlFor<\/span>=\"name\"<\/span>\n                        ><\/span>\n                          Product Name\n                        <\/label<\/span>><\/span>\n                      <\/div<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n                        <input<\/span>\n                          className<\/span>=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\"<\/span>\n                          id<\/span>=\"product-name\"<\/span>\n                          name<\/span>=\"name\"<\/span>\n                          type<\/span>=\"text\"<\/span>\n                          defaultValue<\/span>={product<\/span> ? product.name<\/span> :<\/span> \"\"}\n                        \/><\/span>\n                      <\/div<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n                    <div<\/span> className<\/span>=\"md:flex md:items-center mb-6\"<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-1\/3\"<\/span>><\/span>\n                        <label<\/span>\n                          className<\/span>=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\"<\/span>\n                          htmlFor<\/span>=\"sku\"<\/span>\n                        ><\/span>\n                          SKU\n                        <\/label<\/span>><\/span>\n                      <\/div<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n                        <input<\/span>\n                          className<\/span>=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\"<\/span>\n                          id<\/span>=\"sku\"<\/span>\n                          name<\/span>=\"sku\"<\/span>\n                          type<\/span>=\"text\"<\/span>\n                          defaultValue<\/span>={product<\/span> ? product.sku<\/span> :<\/span> \"\"}\n                        \/><\/span>\n                      <\/div<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n                    <div<\/span> className<\/span>=\"md:flex md:items-center mb-6\"<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-1\/3\"<\/span>><\/span>\n                        <label<\/span>\n                          className<\/span>=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\"<\/span>\n                          htmlFor<\/span>=\"quantity\"<\/span>\n                        ><\/span>\n                          Quantity\n                        <\/label<\/span>><\/span>\n                      <\/div<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n                        <input<\/span>\n                          className<\/span>=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\"<\/span>\n                          id<\/span>=\"quantity\"<\/span>\n                          name<\/span>=\"quantity\"<\/span>\n                          type<\/span>=\"number\"<\/span>\n                          defaultValue<\/span>={product<\/span> ? product.quantity<\/span> :<\/span> 0<\/span>}\n                        \/><\/span>\n                      <\/div<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n                    <div<\/span> className<\/span>=\"md:flex md:items-center mb-6\"<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-1\/3\"<\/span>><\/span>\n                        <label<\/span>\n                          className<\/span>=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\"<\/span>\n                          htmlFor<\/span>=\"image\"<\/span>\n                        ><\/span>\n                          Image\n                        <\/label<\/span>><\/span>\n                      <\/div<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n                        <input<\/span>\n                          className<\/span>=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\"<\/span>\n                          id<\/span>=\"image\"<\/span>\n                          name<\/span>=\"image\"<\/span>\n                          type<\/span>=\"text\"<\/span>\n                          defaultValue<\/span>={product<\/span> ? product.image<\/span> :<\/span> \"\"}\n                        \/><\/span>\n                      <\/div<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n                    <div<\/span> className<\/span>=\"md:flex md:items-center mb-6\"<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-1\/3\"<\/span>><\/span>\n                        <label<\/span>\n                          className<\/span>=\"block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4\"<\/span>\n                          htmlFor<\/span>=\"storeId\"<\/span>\n                        ><\/span>\n                          Store Id\n                        <\/label<\/span>><\/span>\n                      <\/div<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n                        <input<\/span>\n                          className<\/span>=\"bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500\"<\/span>\n                          id<\/span>=\"storeId\"<\/span>\n                          name<\/span>=\"storeId\"<\/span>\n                          type<\/span>=\"text\"<\/span>\n                          defaultValue<\/span>={product<\/span> ? product.storeId<\/span> :<\/span> \"\"}\n                        \/><\/span>\n                      <\/div<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n                    <div<\/span> className<\/span>=\"md:flex md:items-center\"<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-1\/3\"<\/span>><\/span><\/div<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-1\/3\"<\/span>><\/span>\n                        <button<\/span>\n                          className<\/span>=\"shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded\"<\/span>\n                          type<\/span>=\"button\"<\/span>\n                          onClick<\/span>={onCancel}<\/span>\n                        ><\/span>\n                          Cancel\n                        <\/button<\/span>><\/span>\n                      <\/div<\/span>><\/span>\n                      <div<\/span> className<\/span>=\"md:w-2\/3\"<\/span>><\/span>\n                        <button<\/span>\n                          className<\/span>=\"shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded\"<\/span>\n                          type<\/span>=\"submit\"<\/span>\n                        ><\/span>\n                          Save Product\n                        <\/button<\/span>><\/span>\n                      <\/div<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n                  <\/form<\/span>><\/span>\n                <\/div<\/span>><\/span>\n              <\/div<\/span>><\/span>\n            <\/div<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We have just one import in this component so that we can use the axios<\/code> package. Then the Modal<\/code> component takes in an optional product<\/code> object and a required onCancel<\/code> method. After this, we define the calls to the back-end to create or edit a product. In the rendered elements, we do a quick check to see if there has been a product passed to the modal.<\/p>\n
If there is, we create our rows of products and if there is a product passed, we show the default message as we saw earlier. Either way, we render a form with the product fields we can set values for. If the product info is available, it will be set as the default value for the fields. The submit function also updates based on whether we are editing existing information or not.<\/p>\n
Now if you run the app and click the add product button, your page should look like this.<\/p>\n
\"new<\/p>\n
Add a new product<\/h2>\n
All of the functionality is connected now, so all we have to do is start adding new products to the inventory. With your modal open, go ahead and add some info for a product and save it.<\/p>\n
\"new<\/p>\n
When you refresh the page, you\u2019ll see something similar to this.<\/p>\n
\"product<\/p>\n
That\u2019s everything! Now you have a fully functional inventory app.<\/p>\n
Finished code<\/h2>\n
You can check out all of the code in the inventory-tracker<\/code> folder of this repo<\/a>. You can also check out the app in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201cusing-tailwind-with-next-js-forked-jp1riy\u201d\nid=\u201cusing-tailwind-with-next-js-forked-jp1riy\u201d\n\/><\/p>\n
Conclusion<\/h2>\n
Once you have the CRUD functionality set up for an app, you can expand it in a number of directions. You could make more advanced data displays so that users see the important statuses earlier. Or you can take the front-end and make it more user-friendly.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28154,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,212,246,371],"class_list":["post-28153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-next-js","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nBuild an Inventory Tracker<\/title>\n<meta name=\"description\" content=\"Sometimes you need to take a quick look at what you have available, whether it's at a store level or a home level. We're going to build a quick inventory app to handle this for us.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build an Inventory Tracker\" \/>\n<meta property=\"og:description\" content=\"Sometimes you need to take a quick look at what you have available, whether it's at a store level or a home level. We're going to build a quick inventory app to handle this for us.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-19T17:10:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925282\/Web_Assets\/blog\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"3120\" \/>\n\t<meta property=\"og:image:height\" content=\"2080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build an Inventory Tracker\",\"datePublished\":\"2022-04-19T17:10:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925282\/Web_Assets\/blog\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Next.js\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/\",\"name\":\"Build an Inventory Tracker\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925282\/Web_Assets\/blog\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34.jpg?_i=AA\",\"datePublished\":\"2022-04-19T17:10:26+00:00\",\"description\":\"Sometimes you need to take a quick look at what you have available, whether it's at a store level or a home level. We're going to build a quick inventory app to handle this for us.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925282\/Web_Assets\/blog\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925282\/Web_Assets\/blog\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34.jpg?_i=AA\",\"width\":3120,\"height\":2080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build an Inventory Tracker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build an Inventory Tracker","description":"Sometimes you need to take a quick look at what you have available, whether it's at a store level or a home level. We're going to build a quick inventory app to handle this for us.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/","og_locale":"en_US","og_type":"article","og_title":"Build an Inventory Tracker","og_description":"Sometimes you need to take a quick look at what you have available, whether it's at a store level or a home level. We're going to build a quick inventory app to handle this for us.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-19T17:10:26+00:00","og_image":[{"width":3120,"height":2080,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925282\/Web_Assets\/blog\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/"},"author":{"name":"","@id":""},"headline":"Build an Inventory Tracker","datePublished":"2022-04-19T17:10:26+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925282\/Web_Assets\/blog\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34.jpg?_i=AA","keywords":["Guest Post","Next.js","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/","name":"Build an Inventory Tracker","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925282\/Web_Assets\/blog\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34.jpg?_i=AA","datePublished":"2022-04-19T17:10:26+00:00","description":"Sometimes you need to take a quick look at what you have available, whether it's at a store level or a home level. We're going to build a quick inventory app to handle this for us.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925282\/Web_Assets\/blog\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925282\/Web_Assets\/blog\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34.jpg?_i=AA","width":3120,"height":2080},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-an-inventory-tracker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build an Inventory Tracker"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925282\/Web_Assets\/blog\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34\/040c3d9811a6879a7edb3496233d6e888701b6c0-3120x2080-1_2815485e34.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28153"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28153\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28154"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}