From 972846f5a8b53f22197864df38165d6b1983f313 Mon Sep 17 00:00:00 2001
From: Aaron William Po <apo2@uwo.ca>
Date: Mon, 23 Jan 2023 20:13:25 -0500
Subject: [PATCH] scaffold create/edit beer form, scaffold beer page

---
 components/BeerForm.tsx                       | 192 ++++++++++++++++++
 components/Layout.tsx                         |   2 +-
 components/ui/Button.tsx                      |  20 ++
 components/ui/forms/FormError.tsx             |  20 ++
 components/ui/forms/FormInfo.tsx              |  12 ++
 components/ui/forms/FormLabel.tsx             |  17 ++
 components/ui/forms/FormSegment.tsx           |  12 ++
 components/ui/forms/FormSelect.tsx            |  38 ++++
 components/ui/forms/FormTextArea.tsx          |  37 ++++
 components/ui/forms/FormTextInput.tsx         |  33 +++
 next.config.js                                |   3 +
 package-lock.json                             |  55 +++++
 package.json                                  |   6 +-
 pages/beers/[id].tsx                          | 106 +++++++++-
 pages/beers/create.tsx                        |  32 +++
 pages/beers/index.tsx                         |  20 +-
 pages/breweries/index.tsx                     |   4 +-
 prisma/schema.prisma                          |   6 +-
 prisma/seed/create/createNewBeerImages.ts     |  32 +++
 prisma/seed/create/createNewBeerPosts.ts      |   2 +-
 prisma/seed/create/createNewBreweryImages.ts  |  33 +++
 prisma/seed/index.ts                          |  57 ++++--
 services/BeerPost/getAllBeerPosts.ts          |  18 +-
 services/BeerPost/getBeerPostById.ts          |  18 +-
 .../BeerPost/types/BeerPostQueryResult.ts     |  16 +-
 services/BreweryPost/getAllBreweryPosts.ts    |  18 +-
 services/BreweryPost/getBreweryPostById.ts    |  33 ++-
 .../types/BreweryPostQueryResult.ts           |   2 +-
 tailwind.config.js                            |   2 +-
 29 files changed, 776 insertions(+), 70 deletions(-)
 create mode 100644 components/BeerForm.tsx
 create mode 100644 components/ui/Button.tsx
 create mode 100644 components/ui/forms/FormError.tsx
 create mode 100644 components/ui/forms/FormInfo.tsx
 create mode 100644 components/ui/forms/FormLabel.tsx
 create mode 100644 components/ui/forms/FormSegment.tsx
 create mode 100644 components/ui/forms/FormSelect.tsx
 create mode 100644 components/ui/forms/FormTextArea.tsx
 create mode 100644 components/ui/forms/FormTextInput.tsx
 create mode 100644 pages/beers/create.tsx
 create mode 100644 prisma/seed/create/createNewBeerImages.ts
 create mode 100644 prisma/seed/create/createNewBreweryImages.ts

diff --git a/components/BeerForm.tsx b/components/BeerForm.tsx
new file mode 100644
index 0000000..aec4bcc
--- /dev/null
+++ b/components/BeerForm.tsx
@@ -0,0 +1,192 @@
+import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
+
+import { FunctionComponent } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+// import { useNavigate } from 'react-router-dom';
+// import createBeerPost from '../api/beerPostRoutes/createBeerPost';
+// import getAllBreweryPosts from '../api/breweryPostRoutes/getAllBreweryPosts';
+
+// import BreweryPostI from '../types/BreweryPostI';
+// import isValidUuid from '../util/isValidUuid';
+import Button from './ui/Button';
+import FormError from './ui/forms/FormError';
+import FormInfo from './ui/forms/FormInfo';
+import FormLabel from './ui/forms/FormLabel';
+import FormSegment from './ui/forms/FormSegment';
+import FormSelect from './ui/forms/FormSelect';
+import FormTextArea from './ui/forms/FormTextArea';
+import FormTextInput from './ui/forms/FormTextInput';
+
+interface IFormInput {
+  name: string;
+  description: string;
+  type: string;
+  abv: number;
+  ibu: number;
+  breweryId: string;
+}
+
+interface BeerFormProps {
+  type: 'edit' | 'create';
+  // eslint-disable-next-line react/require-default-props
+  defaultValues?: IFormInput;
+  breweries?: BreweryPostQueryResult[];
+}
+const BeerForm: FunctionComponent<BeerFormProps> = ({
+  type,
+  defaultValues,
+  breweries = [],
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<IFormInput>({
+    defaultValues: {
+      name: defaultValues?.name,
+      description: defaultValues?.description,
+      abv: defaultValues?.abv,
+      ibu: defaultValues?.ibu,
+    },
+  });
+
+  // const navigate = useNavigate();
+
+  const nameValidationSchema = register('name', {
+    required: 'Beer name is required.',
+  });
+  const breweryValidationSchema = register('breweryId', {
+    required: 'Brewery name is required.',
+  });
+  const abvValidationSchema = register('abv', {
+    required: 'ABV is required.',
+    valueAsNumber: true,
+    max: { value: 50, message: 'ABV must be less than 50%.' },
+    min: {
+      value: 0.1,
+      message: 'ABV must be greater than 0.1%',
+    },
+    validate: (abv) => !Number.isNaN(abv) || 'ABV is invalid.',
+  });
+  const ibuValidationSchema = register('ibu', {
+    required: 'IBU is required.',
+    min: {
+      value: 2,
+      message: 'IBU must be greater than 2.',
+    },
+    valueAsNumber: true,
+    validate: (ibu) => !Number.isNaN(ibu) || 'IBU is invalid.',
+  });
+
+  const onSubmit: SubmitHandler<IFormInput> = (data) => {
+    console.log(data);
+  };
+
+  return (
+    <form className="form-control" onSubmit={handleSubmit(onSubmit)}>
+      <FormInfo>
+        <FormLabel htmlFor="name">Name</FormLabel>
+        <FormError>{errors.name?.message}</FormError>
+      </FormInfo>
+      <FormSegment>
+        <FormTextInput
+          placeholder="Lorem Ipsum Lager"
+          formValidationSchema={nameValidationSchema}
+          error={!!errors.name}
+          type="text"
+          id="name"
+        />
+      </FormSegment>
+      {type === 'create' && breweries.length && (
+        <>
+          <FormInfo>
+            <FormLabel htmlFor="breweryId">Brewery</FormLabel>
+            <FormError>{errors.breweryId?.message}</FormError>
+          </FormInfo>
+          <FormSegment>
+            <FormSelect
+              formRegister={breweryValidationSchema}
+              error={!!errors.breweryId}
+              id="breweryId"
+              options={breweries.map((brewery) => ({
+                value: brewery.id,
+                text: brewery.name,
+              }))}
+              placeholder="Brewery"
+              message="Pick a brewery"
+            />
+          </FormSegment>
+        </>
+      )}
+
+      <div className="flex flex-wrap sm:text-xs md:mb-3">
+        <div className="mb-2 w-full md:mb-0 md:w-1/2 md:pr-3">
+          <FormInfo>
+            <FormLabel htmlFor="abv">ABV</FormLabel>
+            <FormError>{errors.abv?.message}</FormError>
+          </FormInfo>
+          <FormTextInput
+            placeholder="12"
+            formValidationSchema={abvValidationSchema}
+            error={!!errors.abv}
+            type="text"
+            id="abv"
+          />
+        </div>
+        <div className="mb-2 w-full md:mb-0 md:w-1/2 md:pl-3">
+          <FormInfo>
+            <FormLabel htmlFor="ibu">IBU</FormLabel>
+            <FormError>{errors.ibu?.message}</FormError>
+          </FormInfo>
+          <FormTextInput
+            placeholder="52"
+            formValidationSchema={ibuValidationSchema}
+            error={!!errors.ibu}
+            type="text"
+            id="lastName"
+          />
+        </div>
+      </div>
+
+      <FormInfo>
+        <FormLabel htmlFor="description">Description</FormLabel>
+        <FormError>{errors.description?.message}</FormError>
+      </FormInfo>
+      <FormSegment>
+        <FormTextArea
+          placeholder="Ratione cumque quas quia aut impedit ea culpa facere. Ut in sit et quas reiciendis itaque."
+          error={!!errors.description}
+          formValidationSchema={register('description', {
+            required: 'Beer description is required.',
+          })}
+          id="description"
+          rows={8}
+        />
+      </FormSegment>
+
+      <FormInfo>
+        <FormLabel htmlFor="type">Type</FormLabel>
+        <FormError>{errors.type?.message}</FormError>
+      </FormInfo>
+      <FormSegment>
+        <FormTextInput
+          placeholder="Lagered Ale"
+          error={!!errors.type}
+          formValidationSchema={register('type', {
+            required: 'Beer type is required.',
+          })}
+          id="type"
+          type="text"
+        />
+      </FormSegment>
+
+      <Button type="submit">{`${
+        type === 'edit'
+          ? `Edit ${defaultValues?.name || 'beer post'}`
+          : 'Create beer post'
+      } `}</Button>
+    </form>
+  );
+};
+
+export default BeerForm;
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 9a198ad..b6306b7 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -7,7 +7,7 @@ const Layout: FC<{ children: ReactNode }> = ({ children }) => {
       <header className="top-0">
         <Navbar />
       </header>
-      <div className="top-0 h-full flex-1 animate-in fade-in">{children}</div>
+      <div className="animate-in fade-in top-0 h-full flex-1">{children}</div>
     </div>
   );
 };
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
new file mode 100644
index 0000000..0f1db4e
--- /dev/null
+++ b/components/ui/Button.tsx
@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+
+interface FormButtonProps {
+  children: string;
+  type: 'button' | 'submit' | 'reset';
+  className?: string;
+}
+
+const Button: FunctionComponent<FormButtonProps> = ({ children, type, className }) => (
+  // eslint-disable-next-line react/button-has-type
+  <button type={type} className="btn-primary btn mt-4 w-full rounded-xl">
+    {children}
+  </button>
+);
+
+Button.defaultProps = {
+  className: '',
+};
+
+export default Button;
diff --git a/components/ui/forms/FormError.tsx b/components/ui/forms/FormError.tsx
new file mode 100644
index 0000000..5d20030
--- /dev/null
+++ b/components/ui/forms/FormError.tsx
@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+// import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+
+/**
+ * Component for a styled form error message.
+ *
+ * @example
+ *   <FormError>Something went wrong!</FormError>;
+ */
+const FormError: FunctionComponent<{ children: string | undefined }> = ({ children }) =>
+  children ? (
+    <div
+      className="my-1 h-3 text-xs font-semibold italic text-error-content"
+      role="alert"
+    >
+      {children}
+    </div>
+  ) : null;
+export default FormError;
diff --git a/components/ui/forms/FormInfo.tsx b/components/ui/forms/FormInfo.tsx
new file mode 100644
index 0000000..5baeaa3
--- /dev/null
+++ b/components/ui/forms/FormInfo.tsx
@@ -0,0 +1,12 @@
+import { FunctionComponent, ReactNode } from 'react';
+
+/** A container for both the form error and form label. */
+interface FormInfoProps {
+  children: Array<ReactNode> | ReactNode;
+}
+
+const FormInfo: FunctionComponent<FormInfoProps> = ({ children }) => (
+  <div className="flex justify-between">{children}</div>
+);
+
+export default FormInfo;
diff --git a/components/ui/forms/FormLabel.tsx b/components/ui/forms/FormLabel.tsx
new file mode 100644
index 0000000..977a38e
--- /dev/null
+++ b/components/ui/forms/FormLabel.tsx
@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react';
+
+interface FormLabelProps {
+  htmlFor: string;
+  children: string;
+}
+
+const FormLabel: FunctionComponent<FormLabelProps> = ({ htmlFor, children }) => (
+  <label
+    className="block uppercase tracking-wide text-sm sm:text-xs font-extrabold my-1"
+    htmlFor={htmlFor}
+  >
+    {children}
+  </label>
+);
+
+export default FormLabel;
diff --git a/components/ui/forms/FormSegment.tsx b/components/ui/forms/FormSegment.tsx
new file mode 100644
index 0000000..80496b1
--- /dev/null
+++ b/components/ui/forms/FormSegment.tsx
@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+
+/** A container for both the form error and form label. */
+interface FormInfoProps {
+  children: Array<JSX.Element> | JSX.Element;
+}
+
+const FormSegment: FunctionComponent<FormInfoProps> = ({ children }) => (
+  <div className="mb-2">{children}</div>
+);
+
+export default FormSegment;
diff --git a/components/ui/forms/FormSelect.tsx b/components/ui/forms/FormSelect.tsx
new file mode 100644
index 0000000..f74c402
--- /dev/null
+++ b/components/ui/forms/FormSelect.tsx
@@ -0,0 +1,38 @@
+import { FunctionComponent } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+interface FormSelectProps {
+  options: ReadonlyArray<{ value: string; text: string }>;
+  id: string;
+  formRegister: UseFormRegisterReturn<string>;
+  error: boolean;
+  placeholder: string;
+  message: string;
+}
+
+const FormSelect: FunctionComponent<FormSelectProps> = ({
+  options,
+  id,
+  error,
+  formRegister,
+  placeholder,
+  message,
+}) => (
+  <select
+    id={id}
+    className={`select select-bordered block w-full rounded-lg ${
+      error ? 'select-error' : ''
+    }`}
+    placeholder={placeholder}
+    {...formRegister}
+  >
+    <option value="">{message}</option>
+    {options.map(({ value, text }) => (
+      <option key={value} value={value}>
+        {text}
+      </option>
+    ))}
+  </select>
+);
+
+export default FormSelect;
diff --git a/components/ui/forms/FormTextArea.tsx b/components/ui/forms/FormTextArea.tsx
new file mode 100644
index 0000000..f8f2c5c
--- /dev/null
+++ b/components/ui/forms/FormTextArea.tsx
@@ -0,0 +1,37 @@
+import { FunctionComponent } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+interface FormTextAreaProps {
+  placeholder?: string;
+  formValidationSchema: UseFormRegisterReturn<string>;
+  error: boolean;
+  id: string;
+  rows: number;
+  className?: string;
+}
+
+const FormTextArea: FunctionComponent<FormTextAreaProps> = ({
+  placeholder = '',
+  formValidationSchema,
+  error,
+  id,
+  rows,
+  className,
+}) => (
+  <textarea
+    id={id}
+    placeholder={placeholder}
+    className={`${className} textarea textarea-bordered w-full resize-none  rounded-lg bg-clip-padding border border-solid transition ease-in-out m-0  ${
+      error ? 'textarea-error' : ''
+    }`}
+    {...formValidationSchema}
+    rows={rows}
+  />
+);
+
+FormTextArea.defaultProps = {
+  placeholder: '',
+  className: '',
+};
+
+export default FormTextArea;
diff --git a/components/ui/forms/FormTextInput.tsx b/components/ui/forms/FormTextInput.tsx
new file mode 100644
index 0000000..3df8a86
--- /dev/null
+++ b/components/ui/forms/FormTextInput.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable react/require-default-props */
+import { FunctionComponent } from 'react';
+import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
+
+interface FormInputProps {
+  placeholder?: string;
+  formValidationSchema: UseFormRegisterReturn<string>;
+  error: boolean;
+  // eslint-disable-next-line react/require-default-props
+  type: 'email' | 'password' | 'text' | 'date';
+  id: string;
+  height?: string;
+}
+
+const FormTextInput: FunctionComponent<FormInputProps> = ({
+  placeholder = '',
+  formValidationSchema,
+  error,
+  type,
+  id,
+}) => (
+  <input
+    id={id}
+    type={type}
+    placeholder={placeholder}
+    className={`input w-full transition ease-in-out rounded-lg input-bordered ${
+      error ? 'input-error' : ''
+    }`}
+    {...formValidationSchema}
+  />
+);
+
+export default FormTextInput;
diff --git a/next.config.js b/next.config.js
index 91ef62f..06319c1 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: ['picsum.photos'],
+  },
 };
 
 module.exports = nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 9bea552..59b2f60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@types/react": "18.0.26",
         "@types/react-dom": "18.0.10",
         "daisyui": "^2.47.0",
+        "date-fns": "^2.29.3",
         "eslint": "8.32.0",
         "eslint-config-next": "13.1.2",
         "next": "13.1.2",
@@ -21,6 +22,8 @@
         "pino-pretty": "^9.1.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-hook-form": "^7.42.1",
+        "react-icons": "^4.7.1",
         "typescript": "4.9.4"
       },
       "devDependencies": {
@@ -1563,6 +1566,18 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/dateformat": {
       "version": "4.6.3",
       "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz",
@@ -4308,6 +4323,29 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.42.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.42.1.tgz",
+      "integrity": "sha512-2UIGqwMZksd5HS55crTT1ATLTr0rAI4jS7yVuqTaoRVDhY2Qc4IyjskCmpnmdYqUNOYFy04vW253tb2JRVh+IQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -6164,6 +6202,11 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
     "dateformat": {
       "version": "4.6.3",
       "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz",
@@ -8114,6 +8157,18 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-hook-form": {
+      "version": "7.42.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.42.1.tgz",
+      "integrity": "sha512-2UIGqwMZksd5HS55crTT1ATLTr0rAI4jS7yVuqTaoRVDhY2Qc4IyjskCmpnmdYqUNOYFy04vW253tb2JRVh+IQ==",
+      "requires": {}
+    },
+    "react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 622cc68..710d67f 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "lint": "next lint",
     "format": "npx prettier . --write",
     "prestart": "npm run build",
-    "prismaDev": "dotenv -e .env.local prisma migrate dev"
+    "prismaDev": "dotenv -e .env.local prisma migrate dev",
+    "seed": "npx ts-node ./prisma/seed/index.ts"
   },
   "dependencies": {
     "@next/font": "13.1.2",
@@ -18,6 +19,7 @@
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "daisyui": "^2.47.0",
+    "date-fns": "^2.29.3",
     "eslint": "8.32.0",
     "eslint-config-next": "13.1.2",
     "next": "13.1.2",
@@ -25,6 +27,8 @@
     "pino-pretty": "^9.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.42.1",
+    "react-icons": "^4.7.1",
     "typescript": "4.9.4"
   },
   "devDependencies": {
diff --git a/pages/beers/[id].tsx b/pages/beers/[id].tsx
index 02f5766..109d88c 100644
--- a/pages/beers/[id].tsx
+++ b/pages/beers/[id].tsx
@@ -2,16 +2,120 @@ import { GetServerSideProps, NextPage } from 'next';
 import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
 import getBeerPostById from '@/services/BeerPost/getBeerPostById';
 import Layout from '@/components/Layout';
+import Head from 'next/head';
+import Link from 'next/link';
+import formatDistanceStrict from 'date-fns/formatDistanceStrict';
+import { useState } from 'react';
+
+import { FaRegThumbsUp, FaThumbsUp } from 'react-icons/fa';
 
 interface BeerPageProps {
   beerPost: BeerPostQueryResult;
 }
 
+const BeerInfoHeader: React.FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) => {
+  const createdAtDate = new Date(beerPost.createdAt);
+  const timeDistance = formatDistanceStrict(createdAtDate, Date.now());
+
+  const [isLiked, setIsLiked] = useState(false);
+
+  return (
+    <div className="card bg-base-300">
+      <div className="card-body">
+        <h1 className="text-4xl font-bold">{beerPost.name}</h1>
+        <h2 className="text-2xl font-semibold">
+          by{' '}
+          <Link
+            href={`/breweries/${beerPost.brewery.id}`}
+            className="link-hover link text-2xl font-semibold"
+          >
+            {beerPost.brewery.name}
+          </Link>
+        </h2>
+
+        <h3 className="italic">
+          posted by{' '}
+          <Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
+            {beerPost.postedBy.username}
+          </Link>
+          {` ${timeDistance}`} ago
+        </h3>
+
+        <p>{beerPost.description}</p>
+        <div className="flex justify-between">
+          <div>
+            <div className="mb-1">
+              <Link
+                className="text-lg font-medium"
+                href={`/beers/types/${beerPost.type.id}`}
+              >
+                {beerPost.type.name}
+              </Link>
+            </div>
+            <div>
+              <span className="mr-4 text-lg font-medium">{beerPost.abv}% ABV</span>
+              <span className="text-lg font-medium">{beerPost.ibu} IBU</span>
+            </div>
+          </div>
+          <div className="card-actions">
+            <button
+              type="button"
+              className={`btn gap-2 rounded-2xl ${
+                !isLiked ? 'btn-ghost outline' : 'btn-primary'
+              }`}
+              onClick={() => {
+                setIsLiked(!isLiked);
+              }}
+            >
+              {isLiked ? (
+                <>
+                  <FaThumbsUp className="text-2xl" />
+                  <span>Liked</span>
+                </>
+              ) : (
+                <>
+                  <FaRegThumbsUp className="text-2xl" />
+                  <span>Like</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
   return (
     <Layout>
+      <Head>
+        <title>{beerPost.name}</title>
+        <meta name="description" content={beerPost.description} />
+      </Head>
       <main>
-        <h1 className="text-3xl font-bold underline">{beerPost.name}</h1>
+        {beerPost.beerImages[0] && (
+          <img
+            src={beerPost.beerImages[0].url}
+            className="h-[42rem] w-full object-cover"
+          />
+        )}
+
+        <div className="my-12 flex w-full items-center justify-center ">
+          <div className="w-10/12 space-y-3">
+            <BeerInfoHeader beerPost={beerPost} />
+
+            <div className="mt-4 flex space-x-3">
+              <div className="w-[60%] space-y-3">
+                <div className="card h-[22rem] bg-base-300"></div>
+                <div className="card h-[44rem] bg-base-300"></div>
+              </div>
+              <div className="w-[40%]">
+                <div className="card h-full bg-base-300"></div>
+              </div>
+            </div>
+          </div>
+        </div>
       </main>
     </Layout>
   );
diff --git a/pages/beers/create.tsx b/pages/beers/create.tsx
new file mode 100644
index 0000000..574083c
--- /dev/null
+++ b/pages/beers/create.tsx
@@ -0,0 +1,32 @@
+import BeerForm from '@/components/BeerForm';
+import Layout from '@/components/Layout';
+import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts';
+import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
+import { NextPage } from 'next';
+
+interface CreateBeerPageProps {
+  breweries: BreweryPostQueryResult[];
+}
+
+const Create: NextPage<CreateBeerPageProps> = ({ breweries }) => {
+  return (
+    <Layout>
+      <div className="align-center  flex h-full flex-col items-center justify-center">
+        <div className="w-8/12">
+          <BeerForm type="create" breweries={breweries} />
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export const getServerSideProps = async () => {
+  const breweryPosts = await getAllBreweryPosts();
+  return {
+    props: {
+      breweries: breweryPosts,
+    },
+  };
+};
+
+export default Create;
diff --git a/pages/beers/index.tsx b/pages/beers/index.tsx
index 69d74d1..bbf9786 100644
--- a/pages/beers/index.tsx
+++ b/pages/beers/index.tsx
@@ -7,6 +7,7 @@ import { useRouter } from 'next/router';
 import DBClient from '@/prisma/DBClient';
 import Layout from '@/components/Layout';
 import { FC } from 'react';
+import Image from 'next/image';
 
 interface BeerPageProps {
   initialBeerPosts: BeerPostQueryResult[];
@@ -48,8 +49,14 @@ const Pagination: FC<PaginationProps> = ({ pageCount, pageNum }) => {
 
 const BeerCard: FC<{ post: BeerPostQueryResult }> = ({ post }) => {
   return (
-    <div className="card h-52 bg-base-200 p-6" key={post.id}>
-      <div className="card-content space-y-3">
+    <div className="card bg-base-300" key={post.id}>
+      <figure className="card-image h-96">
+        {post.beerImages.length > 0 && (
+          <Image src={post.beerImages[0].url} alt={post.name} width="1029" height="110" />
+        )}
+      </figure>
+
+      <div className="card-body space-y-3">
         <div>
           <h2 className="text-3xl font-bold">
             <Link href={`/beers/${post.id}`}>{post.name}</Link>
@@ -70,10 +77,9 @@ const BeerPage: NextPage<BeerPageProps> = ({ initialBeerPosts, pageCount }) => {
   const pageNum = parseInt(query.page_num as string, 10) || 1;
   return (
     <Layout>
-      <div className="flex items-center justify-center">
-        <main className="mt-10 flex w-8/12 flex-col space-y-4">
-          <h1 className="card-title text-5xl font-bold">Beer Posts</h1>
-          <div className="space-y-4">
+      <div className="flex items-center justify-center bg-base-100">
+        <main className="mt-10 flex w-10/12 flex-col space-y-4">
+          <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
             {initialBeerPosts.map((post) => {
               return <BeerCard post={post} key={post.id} />;
             })}
@@ -90,7 +96,7 @@ export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (cont
 
   const pageNumber = parseInt(query.page_num as string, 10) || 1;
 
-  const pageSize = 9;
+  const pageSize = 24;
   const numberOfPosts = await DBClient.instance.beerPost.count();
   const pageCount = numberOfPosts ? Math.ceil(numberOfPosts / pageSize) : 0;
 
diff --git a/pages/breweries/index.tsx b/pages/breweries/index.tsx
index b80391a..0596b48 100644
--- a/pages/breweries/index.tsx
+++ b/pages/breweries/index.tsx
@@ -2,10 +2,10 @@ import { GetServerSideProps, NextPage } from 'next';
 
 import Link from 'next/link';
 import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts';
-import GetAllBreweryPostsQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
+import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
 
 interface BreweryPageProps {
-  breweryPosts: GetAllBreweryPostsQueryResult[];
+  breweryPosts: BreweryPostQueryResult[];
 }
 
 const BreweryPage: NextPage<BreweryPageProps> = ({ breweryPosts }) => {
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 3b9c0e7..d07d9a2 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -36,12 +36,12 @@ model BeerPost {
   postedById   String
   brewery      BreweryPost   @relation(fields: [breweryId], references: [id], onDelete: Cascade)
   breweryId    String
-  type         BeerType?     @relation(fields: [typeId], references: [id], onDelete: Cascade)
+  type         BeerType      @relation(fields: [typeId], references: [id], onDelete: Cascade)
   typeId       String
   createdAt    DateTime      @default(now()) @db.Timestamptz(3)
   updatedAt    DateTime?     @updatedAt @db.Timestamptz(3)
   beerComments BeerComment[]
-  BeerImage    BeerImage[]
+  beerImages   BeerImage[]
 }
 
 model BeerComment {
@@ -76,7 +76,7 @@ model BreweryPost {
   postedBy        User             @relation(fields: [postedById], references: [id], onDelete: Cascade)
   postedById      String
   breweryComments BreweryComment[]
-  BreweryImage    BreweryImage[]
+  breweryImages   BreweryImage[]
 }
 
 model BreweryComment {
diff --git a/prisma/seed/create/createNewBeerImages.ts b/prisma/seed/create/createNewBeerImages.ts
new file mode 100644
index 0000000..eb1800d
--- /dev/null
+++ b/prisma/seed/create/createNewBeerImages.ts
@@ -0,0 +1,32 @@
+import { BeerPost, BeerImage } from '@prisma/client';
+import DBClient from '../../DBClient';
+
+interface CreateNewBeerImagesArgs {
+  numberOfImages: number;
+  beerPosts: BeerPost[];
+}
+const createNewBeerImages = async ({
+  numberOfImages,
+  beerPosts,
+}: CreateNewBeerImagesArgs) => {
+  const prisma = DBClient.instance;
+
+  const beerImagesPromises: Promise<BeerImage>[] = [];
+
+  // eslint-disable-next-line no-plusplus
+  for (let i = 0; i < numberOfImages; i++) {
+    const beerPost = beerPosts[Math.floor(Math.random() * beerPosts.length)];
+    beerImagesPromises.push(
+      prisma.beerImage.create({
+        data: {
+          url: 'https://picsum.photos/900/1600',
+          beerPost: { connect: { id: beerPost.id } },
+        },
+      }),
+    );
+  }
+
+  return Promise.all(beerImagesPromises);
+};
+
+export default createNewBeerImages;
diff --git a/prisma/seed/create/createNewBeerPosts.ts b/prisma/seed/create/createNewBeerPosts.ts
index e2bdb57..f1432a3 100644
--- a/prisma/seed/create/createNewBeerPosts.ts
+++ b/prisma/seed/create/createNewBeerPosts.ts
@@ -32,7 +32,7 @@ const createNewBeerPosts = async ({
           abv: 10,
           ibu: 10,
           name: `${faker.commerce.productName()} ${beerType.name}`,
-          description: faker.lorem.lines(),
+          description: faker.lorem.lines(24),
           brewery: { connect: { id: breweryPost.id } },
           postedBy: { connect: { id: user.id } },
           type: { connect: { id: beerType.id } },
diff --git a/prisma/seed/create/createNewBreweryImages.ts b/prisma/seed/create/createNewBreweryImages.ts
new file mode 100644
index 0000000..9d0f343
--- /dev/null
+++ b/prisma/seed/create/createNewBreweryImages.ts
@@ -0,0 +1,33 @@
+import { BreweryPost, BreweryImage } from '@prisma/client';
+import DBClient from '../../DBClient';
+
+interface CreateBreweryImagesArgs {
+  numberOfImages: number;
+  breweryPosts: BreweryPost[];
+}
+const createNewBreweryImages = async ({
+  numberOfImages,
+  breweryPosts,
+}: CreateBreweryImagesArgs) => {
+  const prisma = DBClient.instance;
+
+  const breweryImagesPromises: Promise<BreweryImage>[] = [];
+
+  // eslint-disable-next-line no-plusplus
+  for (let i = 0; i < numberOfImages; i++) {
+    const breweryPost = breweryPosts[Math.floor(Math.random() * breweryPosts.length)];
+
+    breweryImagesPromises.push(
+      prisma.breweryImage.create({
+        data: {
+          url: 'https://picsum.photos/900/1600',
+          breweryPost: { connect: { id: breweryPost.id } },
+        },
+      }),
+    );
+  }
+
+  return Promise.all(breweryImagesPromises);
+};
+
+export default createNewBreweryImages;
diff --git a/prisma/seed/index.ts b/prisma/seed/index.ts
index d8e126d..cc7c57d 100644
--- a/prisma/seed/index.ts
+++ b/prisma/seed/index.ts
@@ -1,37 +1,36 @@
+import { performance } from 'perf_hooks';
+
 import logger from '../../config/pino/logger';
 
 import cleanDatabase from './clean/cleanDatabase';
+
+import createNewBeerImages from './create/createNewBeerImages';
 import createNewBeerPostComments from './create/createNewBeerPostComments';
 import createNewBeerPosts from './create/createNewBeerPosts';
 import createNewBeerTypes from './create/createNewBeerTypes';
+import createNewBreweryImages from './create/createNewBreweryImages';
 import createNewBreweryPostComments from './create/createNewBreweryPostComments';
 import createNewBreweryPosts from './create/createNewBreweryPosts';
 import createNewUsers from './create/createNewUsers';
 
 (async () => {
   try {
-    logger.info('Cleaning database...');
+    const start = performance.now();
+
+    logger.info('Clearing database.');
     await cleanDatabase();
-    logger.info('Database cleaned successfully, preparing to seed');
 
-    const users = await createNewUsers({ numberOfUsers: 10 });
-    logger.info(`Created ${users.length} users`);
-
-    const breweryPosts = await createNewBreweryPosts({
-      numberOfPosts: 100,
-      joinData: { users },
-    });
-    logger.info(`Created ${breweryPosts.length} brewery posts`);
-
-    const beerTypes = await createNewBeerTypes({ joinData: { users } });
-    logger.info(`Created ${beerTypes.length} beer types`);
+    logger.info('Database cleared successfully, preparing to seed.');
 
+    const users = await createNewUsers({ numberOfUsers: 1000 });
+    const [breweryPosts, beerTypes] = await Promise.all([
+      createNewBreweryPosts({ numberOfPosts: 10000, joinData: { users } }),
+      createNewBeerTypes({ joinData: { users } }),
+    ]);
     const beerPosts = await createNewBeerPosts({
       numberOfPosts: 100,
       joinData: { breweryPosts, beerTypes, users },
     });
-    logger.info(`Created ${beerPosts.length} beer posts`);
-
     const [beerPostComments, breweryPostComments] = await Promise.all([
       createNewBeerPostComments({
         numberOfComments: 1000,
@@ -42,13 +41,33 @@ import createNewUsers from './create/createNewUsers';
         joinData: { breweryPosts, users },
       }),
     ]);
-    logger.info(`Created ${beerPostComments.length} beer post comments`);
-    logger.info(`Created ${breweryPostComments.length} brewery post comments`);
 
-    logger.info('Database seeded successfully');
+    const [beerImages, breweryImages] = await Promise.all([
+      createNewBeerImages({ numberOfImages: 1000, beerPosts }),
+      createNewBreweryImages({ numberOfImages: 1000, breweryPosts }),
+    ]);
+
+    const end = performance.now();
+    const timeElapsed = (end - start) / 1000;
+
+    logger.info('Database seeded successfully.');
+
+    logger.info({
+      numberOfUsers: users.length,
+      numberOfBreweryPosts: breweryPosts.length,
+      numberOfBeerPosts: beerPosts.length,
+      numberOfBeerTypes: beerTypes.length,
+      numberOfBeerPostComments: beerPostComments.length,
+      numberOfBreweryPostComments: breweryPostComments.length,
+      numberOfBeerImages: beerImages.length,
+      numberOfBreweryImages: breweryImages.length,
+    });
+
+    logger.info(`Database seeded in ${timeElapsed.toFixed(2)} seconds.`);
+
     process.exit(0);
   } catch (error) {
-    logger.error('Error seeding database');
+    logger.error('Error seeding database.');
     logger.error(error);
     process.exit(1);
   }
diff --git a/services/BeerPost/getAllBeerPosts.ts b/services/BeerPost/getAllBeerPosts.ts
index 9e6d074..2a0ed83 100644
--- a/services/BeerPost/getAllBeerPosts.ts
+++ b/services/BeerPost/getAllBeerPosts.ts
@@ -10,6 +10,14 @@ const getAllBeerPosts = async (pageNum: number, pageSize: number) => {
     select: {
       id: true,
       name: true,
+      type: {
+        select: {
+          name: true,
+          id: true,
+        },
+      },
+      ibu: true,
+      abv: true,
       brewery: {
         select: {
           name: true,
@@ -17,10 +25,16 @@ const getAllBeerPosts = async (pageNum: number, pageSize: number) => {
         },
       },
       description: true,
+      createdAt: true,
       postedBy: {
         select: {
-          firstName: true,
-          lastName: true,
+          id: true,
+          username: true,
+        },
+      },
+      beerImages: {
+        select: {
+          url: true,
           id: true,
         },
       },
diff --git a/services/BeerPost/getBeerPostById.ts b/services/BeerPost/getBeerPostById.ts
index 108d1dd..1e698c9 100644
--- a/services/BeerPost/getBeerPostById.ts
+++ b/services/BeerPost/getBeerPostById.ts
@@ -14,11 +14,25 @@ const getBeerPostById = async (id: string) => {
           id: true,
         },
       },
+      ibu: true,
+      abv: true,
+      type: {
+        select: {
+          name: true,
+          id: true,
+        },
+      },
+      beerImages: {
+        select: {
+          url: true,
+          id: true,
+        },
+      },
+      createdAt: true,
       description: true,
       postedBy: {
         select: {
-          firstName: true,
-          lastName: true,
+          username: true,
           id: true,
         },
       },
diff --git a/services/BeerPost/types/BeerPostQueryResult.ts b/services/BeerPost/types/BeerPostQueryResult.ts
index 1c440e4..d9d27ff 100644
--- a/services/BeerPost/types/BeerPostQueryResult.ts
+++ b/services/BeerPost/types/BeerPostQueryResult.ts
@@ -6,9 +6,21 @@ export default interface BeerPostQueryResult {
     name: string;
   };
   description: string;
+  beerImages: {
+    url: string;
+    id: string;
+  }[];
+
+  ibu: number;
+  abv: number;
+  type: {
+    id: string;
+    name: string;
+  };
   postedBy: {
     id: string;
-    firstName: string;
-    lastName: string;
+    username: string;
   };
+
+  createdAt: Date;
 }
diff --git a/services/BreweryPost/getAllBreweryPosts.ts b/services/BreweryPost/getAllBreweryPosts.ts
index 751a1b8..4fce6df 100644
--- a/services/BreweryPost/getAllBreweryPosts.ts
+++ b/services/BreweryPost/getAllBreweryPosts.ts
@@ -1,19 +1,17 @@
 import DBClient from '@/prisma/DBClient';
-import GetAllBreweryPostsQueryResult from './types/BreweryPostQueryResult';
+import BreweryPostQueryResult from './types/BreweryPostQueryResult';
 
 const prisma = DBClient.instance;
 
 const getAllBreweryPosts = async () => {
-  const breweryPosts: GetAllBreweryPostsQueryResult[] = await prisma.breweryPost.findMany(
-    {
-      select: {
-        id: true,
-        location: true,
-        name: true,
-        postedBy: { select: { firstName: true, lastName: true, id: true } },
-      },
+  const breweryPosts: BreweryPostQueryResult[] = await prisma.breweryPost.findMany({
+    select: {
+      id: true,
+      location: true,
+      name: true,
+      postedBy: { select: { firstName: true, lastName: true, id: true } },
     },
-  );
+  });
 
   return breweryPosts;
 };
diff --git a/services/BreweryPost/getBreweryPostById.ts b/services/BreweryPost/getBreweryPostById.ts
index 227b1fa..1a89a7c 100644
--- a/services/BreweryPost/getBreweryPostById.ts
+++ b/services/BreweryPost/getBreweryPostById.ts
@@ -1,27 +1,26 @@
 import DBClient from '@/prisma/DBClient';
-import GetAllBreweryPostsQueryResult from './types/BreweryPostQueryResult';
+import BreweryPostQueryResult from './types/BreweryPostQueryResult';
 
 const prisma = DBClient.instance;
 
 const getBreweryPostById = async (id: string) => {
-  const breweryPost: GetAllBreweryPostsQueryResult | null =
-    await prisma.breweryPost.findFirst({
-      select: {
-        id: true,
-        location: true,
-        name: true,
-        postedBy: {
-          select: {
-            firstName: true,
-            lastName: true,
-            id: true,
-          },
+  const breweryPost: BreweryPostQueryResult | null = await prisma.breweryPost.findFirst({
+    select: {
+      id: true,
+      location: true,
+      name: true,
+      postedBy: {
+        select: {
+          firstName: true,
+          lastName: true,
+          id: true,
         },
       },
-      where: {
-        id,
-      },
-    });
+    },
+    where: {
+      id,
+    },
+  });
 
   return breweryPost;
 };
diff --git a/services/BreweryPost/types/BreweryPostQueryResult.ts b/services/BreweryPost/types/BreweryPostQueryResult.ts
index 1a3b585..c73f926 100644
--- a/services/BreweryPost/types/BreweryPostQueryResult.ts
+++ b/services/BreweryPost/types/BreweryPostQueryResult.ts
@@ -1,4 +1,4 @@
-export default interface GetAllBreweryPostsQueryResult {
+export default interface BreweryPostQueryResult {
   id: string;
   location: string;
   name: string;
diff --git a/tailwind.config.js b/tailwind.config.js
index b6b0dd6..831ce7c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,6 @@ module.exports = {
   plugins: [require('daisyui')],
   daisyui: {
     logs: false,
-    themes: ['garden'],
+    themes: ['lemonade'],
   },
 };