Initial search result with mocked data

public/search.json

@@ -0,0 +1,107 @@
+[
+  {
+    "dupe_junction_id": 24,
+    "target_product_id": 15,
+    "dupe_product_id": 65,
+    "brand_name": "Missha",
+    "dupe_product": "Missha Time Revolution Night Repair Probio Ampoule",
+    "dupe_product_image_preview": null,
+    "dupe_product_image": "https://d1flfk77wl2xk4.cloudfront.net/Assets/10/614/XXL_p0065761410.jpg",
+    "dupe_shopping_link": "https://www.yesstyle.com/en/tcuc.USD/coc.US/info.html/pid.1057911255",
+    "serum_type": "Anti-Aging & Repair",
+    "dupe_product_description": "\"The Missha Time Revolution Night Repair Probio Ampoule is a highly concentrated formula that improves skin texture, elasticity, and tone. It contains probiotics, which help to strengthen the skin's natural barrier and enhance its ability to retain moisture. This product is suitable for all skin types, including sensitive and acne-prone skin.\"",
+    "active_ingredients": "Bifida Ferment Lysate (Antioxidant, moisturizer), Lactobacillus/Punica Granatum Fruit Ferment Extract (Antioxidant, emollient)",
+    "functional_ingredients": "Butylene Glycol, Glycerin, Propanediol (Humectants)",
+    "key_ingredient_benefits": "Probiotics for skin barrier strengthening. Improves skin texture and elasticity.",
+    "dupe_unit_price_in_dollar": 11.98,
+    "dupe_price_reduction_percentage": null,
+    "dupe_price_in_dollar": 23.84,
+    "dupe_video_reference_link_1": "https://www.youtube.com/watch?v=ITZRyNJ8usg&pp=ygUyTWlzc2hhIFRpbWUgUmV2b2x1dGlvbiBOaWdodCBSZXBhaXIgUHJvYmlvIEFtcG91bGU%3D",
+    "dupe_video_reference_link_2": "https://www.youtube.com/watch?v=TmPiNC_QNLM&pp=ygUyTWlzc2hhIFRpbWUgUmV2b2x1dGlvbiBOaWdodCBSZXBhaXIgUHJvYmlvIEFtcG91bGU%3D",
+    "dupe_video_reference_link_3": "https://www.youtube.com/watch?v=0zjpQjNG6_g&pp=ygUyTWlzc2hhIFRpbWUgUmV2b2x1dGlvbiBOaWdodCBSZXBhaXIgUHJvYmlvIEFtcG91bGU%3D",
+    "video_is_contain_both_products_2": false,
+    "joint_blog_reference_link_1": "https://thedaleydose.com/is-clinical-pro-heal-serum/",
+    "blog_best_quote_1": "None",
+    "joint_blog_reference_link_2": "https://everydaywithmadirae.com/beautycounter-serum-review/",
+    "blog_best_quote_2": "None",
+    "joint_blog_title_3": "Comparison Of 3 Vitamin C Serums: Skinceuticals, Paula's Choice And Timeless - Goals To Get Glowing.",
+    "joint_blog_reference_link_3": "https://goalstogetglowing.com/2018/01/16/comparison-of-3-vitamin-c-serums-skinceuticals-paulas-choice-and-timeless/",
+    "blog_best_quote_3": "None",
+    "dupe_size_without_unit": 1.66,
+    "dupe_unit_of_size": "oz",
+    "rating": null,
+    "review_count": null,
+    "dupe_product_ingred": "\"[\\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Bifida Ferment Lysate\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"antioxidant, skin-identical ingredient, moisturizer/humectant\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Butylene Glycol\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"viscosity controlling, moisturizer/humectant\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Glycerin\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"moisturizer/humectant\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Propanediol\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"viscosity controlling, moisturizer/humectant\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Lactobacillus/Punica Granatum Fruit Ferment Extract\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"antioxidant, skin-identical ingredient, emollient\\\\\\\"}\\\"]\"",
+    "dupe_justification": "This serum contains antioxidant and moisturizing ingredients like Bifida Ferment Lysate and Lactobacillus/Punica Granatum Fruit Ferment Extract, which can help repair and nourish the skin. It also contains humectants like Butylene Glycol and Glycerin to provide hydration, making it a good alternative to the target product."
+  },
+  {
+    "dupe_junction_id": 38,
+    "target_product_id": 28,
+    "dupe_product_id": 76,
+    "brand_name": "It’s Skin",
+    "dupe_product": "It’s Skin Power 10 Formula LI Effector with Licorice",
+    "dupe_product_image_preview": null,
+    "dupe_product_image": "https://i5.walmartimages.com/seo/It-s-Skin-Face-Serum-Power-10-Formula-for-Redness-Relief-Soothing-LI-Effector-30ml-FREE-Samples_3a79081e-d9aa-411f-af81-32d62e560508.8075ed49e80c90608e06c86b27fc8714.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF",
+    "dupe_shopping_link": "https://www.walmart.com/ip/It-s-Skin-Face-Serum-Power-10-Formula-for-Redness-Relief-Soothing-LI-Effector-30ml-FREE-Samples/502239769",
+    "serum_type": "Anti-Aging & Repair",
+    "dupe_product_description": "\"Brighten and even out your skin tone with the It’s Skin Power 10 Formula LI Effector with Licorice! This Korean beauty secret is packed with high concentrations of licorice extract, making it your go-to serum for fading hyperpigmentation and soothing redness, while its gentle, oil-free formula ensures a smooth and radiant complexion.\"",
+    "active_ingredients": "Licorice (Glycyrrhiza Glabra) Root Extract, which is known for its skin-brightening and redness-reducing properties. This ingredient is particularly effective in evening out skin tone and addressing hyperpigmentation issues.",
+    "functional_ingredients": "Butylene Glycol and Glycerin: Serve as humectants and skin conditioners, providing hydration and improving skin texture.\nPolyglutamic Acid: Helps in moisturizing and enhancing skin elasticity.",
+    "key_ingredient_benefits": "Licorice Root Extract is celebrated for its ability to brighten the skin and reduce hyperpigmentation, while Butylene Glycol and Glycerin are excellent for hydration, helping to keep the skin moisturized and smooth. Polyglutamic Acid, another key component, contributes to improved skin elasticity, enhancing the overall texture and appearance of the skin.\n\n\n\n\n",
+    "dupe_unit_price_in_dollar": 13.29,
+    "dupe_price_reduction_percentage": null,
+    "dupe_price_in_dollar": 13.16,
+    "dupe_video_reference_link_1": "https://www.youtube.com/watch?v=_RSugukBu6A",
+    "dupe_video_reference_link_2": null,
+    "dupe_video_reference_link_3": null,
+    "video_is_contain_both_products_2": null,
+    "joint_blog_reference_link_1": "https://www.makeupalley.com/product/showreview.asp/ItemId=204341/Power-10-Formula-LI-Effector/Its-Skin/Treatments-(Face)",
+    "blog_best_quote_1": "\"My skin turned extremely sensitive a few years ago, and I’m very limited in what I can use. I use this twice daily, and it has noticeably reduced my redness and sensitivity.\" - NatalieJ",
+    "joint_blog_reference_link_2": "https://www.chickadvisor.com/item/its-skin-power-10-formula-li-effector-with-licorice/",
+    "blog_best_quote_2": "\"Wonderful serum that smells heavily of licorice extract. I've noticed my dark spots and acne spots lightening, and it adds a nice layer of hydration to my face.\" - e010365",
+    "joint_blog_title_3": null,
+    "joint_blog_reference_link_3": null,
+    "blog_best_quote_3": null,
+    "dupe_size_without_unit": 1,
+    "dupe_unit_of_size": "oz",
+    "rating": "4.3/5",
+    "review_count": null,
+    "dupe_product_ingred": "\"[\\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"CytoPep\\\\\\\\u2122 Cellular Extracts\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"Cellular regeneration\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Liposomal Hyaluronic Acid Complex\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"Hydration\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Expert Hyaluron Complex\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"Hydration and plumping\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Kombucha\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"Antioxidant and detoxifying\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Aloe Ferox\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"Soothing and smoothing\\\\\\\"}\\\"]\"",
+    "dupe_justification": "This serum contains Licorice Root Extract, which is known for its skin-brightening properties and can help even out skin tone. It also has humectants like Butylene Glycol and Glycerin to provide hydration, and Polyglutamic Acid to enhance skin elasticity. These functions make it a suitable and affordable alternative to the target product."
+  },
+  {
+    "dupe_junction_id": 81,
+    "target_product_id": 30,
+    "dupe_product_id": 101,
+    "brand_name": "Olay",
+    "dupe_product": "Olay Regenerist Regenerating Serum",
+    "dupe_product_image_preview": null,
+    "dupe_product_image": "https://target.scene7.com/is/image/Target/GUEST_9b8ad5c9-6f55-45fd-8d42-9a4ca976ee4b?wid=1200&hei=1200&qlt=80&fmt=webp",
+    "dupe_shopping_link": "https://www.target.com/p/olay-regenerist-regenerating-serum-fragrance-free-light-gel-face-moisturizer-1-7-fl-oz/-/A-10910274",
+    "serum_type": "Anti-Aging & Repair",
+    "dupe_product_description": "\nIndulge in the rejuvenating touch of Olay Regenerist Regenerating Serum, a luxurious formula designed to renew and energize your skin. Feel the difference as this serum works to smooth and soften, unveiling a more youthful and radiant you.",
+    "active_ingredients": "Vitamin B3 (Niacinamide)",
+    "functional_ingredients": "Glycerin, Dimethicone, Tocopheryl Acetate, Camellia Sinensis Leaf Extract, Panthenol, Allantoin, Palmitoyl Pentapeptide-4, Amino-Peptide Complex II",
+    "key_ingredient_benefits": "Niacinamide for skin brightening and texture improvement. Peptides for anti-aging benefits.",
+    "dupe_unit_price_in_dollar": 15.64,
+    "dupe_price_reduction_percentage": null,
+    "dupe_price_in_dollar": 26.59,
+    "dupe_video_reference_link_1": "NULL",
+    "dupe_video_reference_link_2": "NULL",
+    "dupe_video_reference_link_3": "NULL",
+    "video_is_contain_both_products_2": true,
+    "joint_blog_reference_link_1": "https://theperennialstyle.com/2017/08/04/my-morning-skincare-routine-how-to-layer-your-products/",
+    "blog_best_quote_1": "Step 7: SPF. You know how important ...",
+    "joint_blog_reference_link_2": "https://www.beautemia.com/la-mer-review-the-concentrate-vs-the-regenerating-serum/",
+    "blog_best_quote_2": "This potent serum is also powered by the Regenerating Ferment™, a bio ferment engineered with plant stem cells and the Marine Peptide Ferment, which help skin trigger its natural production of collagen, elastin and other 'youth proteins.'",
+    "joint_blog_title_3": "NULL",
+    "joint_blog_reference_link_3": "NULL",
+    "blog_best_quote_3": "NULL",
+    "dupe_size_without_unit": 1.7,
+    "dupe_unit_of_size": "oz",
+    "rating": null,
+    "review_count": null,
+    "dupe_product_ingred": "\"[\\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Vitamin B3 (Niacinamide)\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"Retain moisture, hydrate\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Amino-Peptide Complex II\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"Regenerate surface cells, restore elasticity, moisturize\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Panthenol (Pro-Vitamin B5)\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"Moisturize, soothe\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Tocopheryl Acetate (Vitamin E)\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"Antioxidant, nourish\\\\\\\"}\\\", \\\"{\\\\\\\"ingredientName\\\\\\\": \\\\\\\"Allantoin\\\\\\\", \\\\\\\"functionality\\\\\\\": \\\\\\\"Soothe, smooth\\\\\\\"}\\\"]\"",
+    "dupe_justification": "This serum contains Vitamin B3 (Niacinamide), which is known for its multiple skin benefits including improving skin texture. It also contains various beneficial ingredients like Glycerin, Camellia Sinensis Leaf Extract, and Allantoin. With its affordable price and effective ingredients, it can be a smart swap for the target product."
+  }
+]

src/app/components/footer.tsx

@@ -0,0 +1,14 @@
+import { Playfair_Display } from "next/font/google";
+
+const heading = Playfair_Display({ subsets: ["latin"] });
+
+export default function Footer() {
+  return (
+    <footer className="bg-white p-6 mt-6 text-sm">
+      <h3 className={`text-3xl font-medium ${heading.className}`}>
+        Revolutionize the way you shop for Beauty.
+      </h3>
+      <div className="mt-3">© 2024 BeautyBuy™. All Rights Reserved.</div>
+    </footer>
+  );
+}

src/app/components/header.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import Image from "next/image";
+import { SearchForm } from "./search";
+
+export default function Header() {
+  return (
+    <header className="flex py-8">
+      <a href="/" className="flex items-center">
+        <Image
+          src="/wiseblend-logo.svg"
+          width={173}
+          height={36}
+          alt="Picture of the author"
+        />
+      </a>
+      <SearchForm />
+    </header>
+  );
+}

src/app/hero.tsx → src/app/components/hero.tsx

@@ -6,10 +6,16 @@ const heading = Playfair_Display({ subsets: ["latin"] });
 export default function Hero() {
   return (
     <div className="hero relative mt-12">
-      <h1 className={`${heading.className}`}>Blend Smart<br/>Spend Wise</h1>
+      <h1 className={`font-semibold ${heading.className}`}>
+        Blend Smart
+        <br />
+        Spend Wise
+      </h1>
       <div className="my-8 text-xl">Never overspend on skincare again!</div>
-      <div className={`banner p-6 w-3/5 ${font.className}`}>
-        Use AI to find cheaper alternatives with<br/>the same function!
+      <div className={`banner text-white font-semibold p-6 w-3/5 rounded-l-3xl ${font.className}`}>
+        Use AI to find cheaper alternatives with
+        <br />
+        the same function!
       </div>
       <div className="image absolute top-0 bg-no-repeat"></div>
     </div>

src/app/components/search/context.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Dispatch, SetStateAction, createContext, useState } from "react";
+import { Product } from "./types";
+
+export const SearchContext = createContext({
+  products: [] as Product[],
+  setProducts: (() => {}) as Dispatch<SetStateAction<Product[]>>,
+});
+
+export const SearchProvider = ({ children }: { children: any }) => {
+  const [products, setProducts] = useState<Product[]>([]);
+
+  return (
+    <SearchContext.Provider value={{ products, setProducts }}>
+      {children}
+    </SearchContext.Provider>
+  );
+};

src/app/components/search/form.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useContext, useRef } from "react";
+import { SearchContext } from "./context";
+
+const API_ENDPOINT = "/search.json?url=";
+
+export default function SearchForm() {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { setProducts } = useContext(SearchContext);
+
+  const search = () => {
+    const input = inputRef.current;
+
+    if (input && input.value.trim()) {
+      fetch(API_ENDPOINT + encodeURIComponent(input.value.trim()))
+        .then((res) => res.json())
+        .then((data) => {
+          setProducts(data);
+          input.value = "";
+        });
+      input.value = "Loading...";
+    }
+  };
+
+  return (
+    <form className="flex grow ml-5" action={search}>
+      <input
+        ref={inputRef}
+        type="url"
+        required
+        className="grow px-4 rounded-l-2xl"
+        placeholder="Enter product URL"
+      />
+      <button type="submit" className="rounded-r-2xl">&nbsp;</button>
+    </form>
+  );
+}

src/app/components/search/index.ts

@@ -0,0 +1,5 @@
+import SearchForm from "./form";
+import { SearchProvider, SearchContext } from "./context";
+import SearchResults from "./results";
+
+export { SearchForm, SearchProvider, SearchContext, SearchResults };

src/app/components/search/results.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Dispatch, SetStateAction, useContext, useState } from "react";
+import { Playfair_Display } from "next/font/google";
+import { SearchContext } from "./context";
+import { Product } from "./types";
+
+const heading = Playfair_Display({ subsets: ["latin"] });
+
+export default function SearchResults() {
+  const { products } = useContext(SearchContext);
+  const [product, setProduct] = useState<Product>(products[0]);
+  const inlineStyle = { backgroundImage: `url(${product.dupe_product_image})` };
+
+  return (
+    <div className="products mt-12">
+      <div className="flex gap-x-8">
+        <div
+          className="bg-white border border-gray-300 rounded-lg bg-contain bg-no-repeat bg-center grow basis-full"
+          style={inlineStyle}
+        ></div>
+        <div className="grow basis-full">
+          <h2 className={`text-6xl font-semibold ${heading.className}`}>
+            {product.brand_name}
+          </h2>
+          <h3 className="text-xl font-normal mt-4 mb-6">
+            {product.dupe_product}
+          </h3>
+          <p className="text-base font-normal">
+            {product.dupe_product_description}
+          </p>
+          <div className="columns-2 mt-6 flex items-center">
+            <div className="text-orange-600 text-3xl font-bold">
+              ${product.dupe_price_in_dollar} /{product.dupe_size_without_unit}{" "}
+              {product.dupe_unit_of_size}
+            </div>
+            <div className="ml-6">
+              <a
+                className="p-4 rounded-md bg-cyan-500 text-white text-base font-semibold"
+                href={product.dupe_shopping_link}
+                target="_blank"
+              >
+                Buy Now
+              </a>
+            </div>
+          </div>
+          <ProductAlternatives
+            products={products}
+            product={product}
+            setProduct={setProduct}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ProductAlternatives = ({
+  products,
+  product,
+  setProduct,
+}: {
+  products: Product[];
+  product: Product;
+  setProduct: Dispatch<SetStateAction<Product>>;
+}) => (
+  <div className="mt-6">
+    <strong>Other Great Alternatives</strong>
+    <div className="mt-3 flex gap-x-4">
+      {products.map((alternative) =>
+        alternative.dupe_product_id !== product.dupe_product_id ? (
+          <ProductAlternative
+            key={alternative.dupe_product_id}
+            product={alternative}
+            setProduct={setProduct}
+          />
+        ) : null
+      )}
+    </div>
+  </div>
+);
+
+const ProductAlternative = ({
+  product,
+  setProduct,
+}: {
+  product: Product;
+  setProduct: Dispatch<SetStateAction<Product>>;
+}) => {
+  const inlineStyle = { backgroundImage: `url(${product.dupe_product_image})` };
+  return (
+    <div
+      className="bg-white border border-gray-300 rounded-lg px-3 py-5 flex grow basis-full cursor-pointer"
+      onClick={() => setProduct(product)}
+    >
+      <div
+        className="basis-1/3 bg-contain bg-no-repeat bg-center"
+        style={inlineStyle}
+      ></div>
+      <div className="py-5 grow">
+        <h3 className="text-xl font-semibold">{product.brand_name}</h3>
+        <div className="text-orange-600 text-xl font-bold">
+          ${product.dupe_price_in_dollar} /{product.dupe_size_without_unit}{" "}
+          {product.dupe_unit_of_size}
+        </div>
+      </div>
+    </div>
+  );
+};

src/app/components/search/types.ts

@@ -0,0 +1,4 @@
+
+export type Product = {
+  [key: string]: any;
+};