Frontend build

.env.local.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_REALM_APP_ID=

.gitignore

@@ -31,4 +31,5 @@ yarn-error.log*
 .env.production.local
 
 # vercel
-.vercel
+.vercel
+

README.md

@@ -1,29 +0,0 @@
-# Jumpstart Series
-
-This repository is part of the MongoDB [Jumpstart](https://www.youtube.com/playlist?list=PL4RCxklHWZ9v2lcat4oEVGQhZg6r4IQGV) series on YouTube. Each branch corresponds to an episode. 
-
-## Episodes
-
-- Episode 1
-  - Video: [MongoDB Explained in 10 Minutes](https://youtu.be/RGfFpQF0NpE)
-- Episode 2
-  - Video: [Intro to MongoDB Atlas in 10 mins](https://youtu.be/xrc7dIO_tXk)
-- Episode 3
-  - Video: [Compass - The GUI for MongoDB in 10 mins](https://youtu.be/YBOiX8DwinE)
-  - Branch: [compass](https://github.com/mongodb-developer/jumpstart-series/tree/compass) 
-- Episode 4
-  - Video: [Serverless Functions Explained | MongoDB Realm Backend-as-a-Service](https://youtu.be/Evp3xTzWCu4)
-  - Branch: [realm-functions](https://github.com/mongodb-developer/jumpstart-series/tree/realm-functions)
-- Episode 5
-  - Video: [Easy Frontend MongoDB Integration | MongoDB, Next.js, & Tailwind CSS](https://youtu.be/xIrtGeggw0E)
-  - Branch: [frontend-build](https://github.com/mongodb-developer/jumpstart-series/tree/frontend-build)
-- Episode 6
-  - Video: [MongoDB Atlas Search to Easily Find Your Data | Search & Autocomplete Implementation](https://youtu.be/jnxnhbTO2RA)
-  - Branch: [altas-search](https://github.com/mongodb-developer/jumpstart-series/tree/atlas-search)
-- Episode 7
-  - Video: [Atlas Data Lake | Federated Query of .csv & .json files from AWS S3 Bucket | Jumpstart 2021](https://youtu.be/e4BNH8SeGVs)
-  - Branch: [datalake](https://github.com/mongodb-developer/jumpstart-series/tree/datalake)
-
-## Questions?
-
-Questions about this repo or how to use MongoDB Atlas?  Ask them in the [MongoDB Community](https://community.mongodb.com).

components/Cart.js

@@ -0,0 +1,121 @@
+import React from "react";
+import Image from "next/image";
+import {
+  XIcon,
+  PlusCircleIcon,
+  ArrowNarrowRightIcon,
+} from "@heroicons/react/outline";
+
+const Cart = ({ isCartOpen, setIsCartOpen }) => {
+  return (
+    <div
+      className={`${
+        isCartOpen ? "translate-x-0 ease-out" : "translate-x-full ease-in"
+      } fixed right-0 top-0 max-w-xs w-full h-full px-6 py-4 transition duration-300 transform overflow-y-auto bg-white border-l-2 border-gray-300 z-20`}
+    >
+      <div className="flex items-center justify-between">
+        <h3 className="text-2xl font-medium text-gray-700">Your cart</h3>
+        <button className="text-gray-600 focus:outline-none">
+          <XIcon
+            onClick={() => setIsCartOpen(!isCartOpen)}
+            className="h-5 w-5"
+          />
+        </button>
+      </div>
+      <hr className="my-3" />
+      <div className="flex justify-between mt-6">
+        <div className="flex">
+          <Image
+            src="/images/react.jpg"
+            height={80}
+            width={80}
+            objectFit="cover"
+            className="rounded"
+            alt="React T-Shirt"
+          />
+          <div className="mx-3">
+            <h3 className="text-sm text-gray-600">React T-Shirt</h3>
+            <div className="flex items-center mt-2">
+              <button className="text-gray-500 focus:outline-none focus:text-gray-600">
+                <PlusCircleIcon className="h-5 w-5" />
+              </button>
+              <span className="text-gray-700 mx-2">1</span>
+              <button className="text-gray-500 focus:outline-none focus:text-gray-600">
+                <XIcon className="h-5 w-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+        <span className="text-gray-600">$39</span>
+      </div>
+      <div className="flex justify-between mt-6">
+        <div className="flex">
+          <Image
+            src="/images/html.jpg"
+            height={80}
+            width={80}
+            objectFit="cover"
+            className="rounded"
+            alt="HTML T-Shirt"
+          />
+          <div className="mx-3">
+            <h3 className="text-sm text-gray-600">HTML T-Shirt</h3>
+            <div className="flex items-center mt-2">
+              <button className="text-gray-500 focus:outline-none focus:text-gray-600">
+                <PlusCircleIcon className="h-5 w-5" />
+              </button>
+              <span className="text-gray-700 mx-2">2</span>
+              <button className="text-gray-500 focus:outline-none focus:text-gray-600">
+                <XIcon className="h-5 w-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+        <span className="text-gray-600">$39</span>
+      </div>
+      <div className="flex justify-between mt-6">
+        <div className="flex">
+          <Image
+            src="/images/mongodb.png"
+            height={80}
+            width={80}
+            objectFit="cover"
+            className="rounded"
+            alt="MongoDB T-Shirt"
+          />
+          <div className="mx-3">
+            <h3 className="text-sm text-gray-600">MongoDB T-Shirt</h3>
+            <div className="flex items-center mt-2">
+              <button className="text-gray-500 focus:outline-none focus:text-gray-600">
+                <PlusCircleIcon className="h-5 w-5" />
+              </button>
+              <span className="text-gray-700 mx-2">1</span>
+              <button className="text-gray-500 focus:outline-none focus:text-gray-600">
+                <XIcon className="h-5 w-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+        <span className="text-gray-600">$39</span>
+      </div>
+      <div className="mt-8">
+        <form className="flex items-center justify-center">
+          <input
+            className="form-input w-48"
+            type="text"
+            placeholder="Add promocode"
+          />
+          <button className="ml-3 flex items-center px-3 py-2 bg-green-600 text-white text-sm uppercase font-medium rounded hover:bg-green-500 focus:outline-none focus:bg-green-500">
+            <span>Apply</span>
+          </button>
+        </form>
+      </div>
+      <a className="flex items-center justify-center mt-4 px-3 py-2 bg-green-600 text-white text-sm uppercase font-medium rounded hover:bg-green-500 focus:outline-none focus:bg-green-500 cursor-pointer">
+        <span>Chechout</span>
+        <ArrowNarrowRightIcon className="w-5 h-5" />
+      </a>
+    </div>
+  );
+};
+
+export default Cart;

components/Category.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const Category = ({ category, categoryCount }) => {
+  return (
+    <>
+      <h3 className="text-gray-700 text-2xl font-medium block mt-16">
+        {category}
+      </h3>
+      <span className="mt-3 text-sm text-gray-500">{categoryCount}</span>
+    </>
+  );
+};
+
+export default Category;

components/Container.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Container = ({ children }) => {
+  return (
+    <main className="my-8">
+      <div className="container mx-auto px-6">{children}</div>
+    </main>
+  );
+};
+
+export default Container;

components/Footer.js

@@ -0,0 +1,17 @@
+import React from "react";
+import Link from "next/link";
+
+const Footer = () => {
+  return (
+    <footer className="bg-gray-200">
+      <div className="container mx-auto px-6 py-3 flex justify-between items-center">
+        <div className="text-xl font-bold text-green-500 hover:text-green-400 cursor-pointer">
+          <Link href="/">MongoStore</Link>
+        </div>
+        <p className="py-2 text-gray-500 sm:py-0">All rights reserved</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

components/Header.js

@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import {
+  ShoppingCartIcon,
+  MenuIcon,
+  SearchIcon,
+} from "@heroicons/react/outline";
+import Cart from "./Cart";
+
+const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isCartOpen, setIsCartOpen] = useState(false);
+
+  return (
+    <>
+      <header>
+        <div className="container mx-auto px-6 py-3">
+          <div className="flex items-center justify-between">
+            <Link href="/">
+              <div className="w-full text-green-500 text-2xl font-semibold cursor-pointer">
+                MongoStore
+              </div>
+            </Link>
+            <div className="flex items-center justify-end w-full">
+              <button className="text-gray-600 focus:outline-none mx-4 sm:mx-0">
+                <ShoppingCartIcon
+                  onClick={() => setIsCartOpen(!isCartOpen)}
+                  className="h-5 w-5"
+                />
+              </button>
+
+              <div className="flex sm:hidden">
+                <button
+                  onClick={() => setIsMenuOpen(!isMenuOpen)}
+                  type="button"
+                  className="text-gray-600 hover:text-gray-500 focus:outline-none focus:text-gray-500"
+                  aria-label="toggle menu"
+                >
+                  <MenuIcon className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <nav
+            className={`${
+              isMenuOpen ? "" : "hidden"
+            } sm:flex sm:justify-center sm:items-center mt-4`}
+          >
+            <div className="flex flex-col sm:flex-row">
+              <div className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0">
+                <Link href="/">Home</Link>
+              </div>
+              <div className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0">
+                <Link href="/products">Shop</Link>
+              </div>
+              <a
+                className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
+                href="#"
+              >
+                Categories
+              </a>
+              <a
+                className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
+                href="#"
+              >
+                Contact
+              </a>
+              <a
+                className="mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
+                href="#"
+              >
+                About
+              </a>
+            </div>
+          </nav>
+
+          <div className="relative mt-6 max-w-lg mx-auto">
+            <span className="absolute inset-y-0 left-0 pl-3 flex items-center">
+              <SearchIcon className="h-5 w-5" />
+            </span>
+
+            <input
+              className="w-full border rounded-md pl-10 pr-4 py-2 focus:border-green-500 focus:outline-none focus:shadow-outline"
+              type="text"
+              placeholder="Search"
+            />
+          </div>
+        </div>
+      </header>
+      <Cart isCartOpen={isCartOpen} setIsCartOpen={setIsCartOpen} />
+    </>
+  );
+};
+
+export default Header;

components/Hero.js

@@ -0,0 +1,35 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowNarrowRightIcon } from "@heroicons/react/outline";
+
+const Hero = () => {
+  return (
+    <div className="h-96 rounded-md overflow-hidden bg-cover bg-center relative">
+      <Image
+        src="/images/hero.jpg"
+        alt="Hero Image"
+        layout="fill"
+        objectFit="cover"
+        className="absolute z-0"
+      />
+      <div className="bg-gray-900 bg-opacity-60 flex items-center h-full absolute w-full z-10">
+        <div className="px-10 max-w-xl">
+          <h2 className="text-2xl text-white font-semibold">Tech Shirts</h2>
+          <p className="mt-2 text-gray-400">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque
+            atque recusandae ipsum odio possimus soluta!
+          </p>
+          <Link href={`/products`}>
+            <button className="flex items-center mt-4 px-3 py-2 bg-green-600 text-white text-sm uppercase font-medium rounded hover:bg-green-500 focus:outline-none focus:bg-green-500">
+              <span>Shop Now</span>
+              <ArrowNarrowRightIcon className="w-5 h-5" />
+            </button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;

components/Pagination.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+const Pagination = () => {
+  return (
+    <div className="flex justify-center">
+      <div className="flex rounded-md mt-8">
+        <a
+          href="#"
+          className="py-2 px-4 leading-tight bg-white border border-gray-200 text-green-700 border-r-0 ml-0 rounded-l hover:bg-green-500 hover:text-white"
+        >
+          <span>Previous</span>
+        </a>
+        <a
+          href="#"
+          className="py-2 px-4 leading-tight bg-white border border-gray-200 text-green-700 border-r-0 hover:bg-green-500 hover:text-white"
+        >
+          <span>1</span>
+        </a>
+        <a
+          href="#"
+          className="py-2 px-4 leading-tight bg-white border border-gray-200 text-green-700 border-r-0 hover:bg-green-500 hover:text-white"
+        >
+          <span>2</span>
+        </a>
+        <a
+          href="#"
+          className="py-2 px-4 leading-tight bg-white border border-gray-200 text-green-700 border-r-0 hover:bg-green-500 hover:text-white"
+        >
+          <span>3</span>
+        </a>
+        <a
+          href="#"
+          className="py-2 px-4 leading-tight bg-white border border-gray-200 text-green-700 rounded-r hover:bg-green-500 hover:text-white"
+        >
+          <span>Next</span>
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;