39 adding the next.js frontend app to the code base

.env

@@ -30,7 +30,7 @@ CART_SERVICE_ADDR=cartservice:${CART_SERVICE_PORT}
 CHECKOUT_SERVICE_PORT=5050
 CHECKOUT_SERVICE_ADDR=checkoutservice:${CHECKOUT_SERVICE_PORT}
 
-CURRENCY_SERVICE_PORT=7000
+CURRENCY_SERVICE_PORT=7001
 CURRENCY_SERVICE_ADDR=currencyservice:${CURRENCY_SERVICE_PORT}
 
 EMAIL_SERVICE_PORT=8080
@@ -45,7 +45,7 @@ PRODUCT_CATALOG_SERVICE_ADDR=productcatalogservice:${PRODUCT_CATALOG_SERVICE_POR
 RECOMMENDATION_SERVICE_PORT=9001
 RECOMMENDATION_SERVICE_ADDR=recommendationservice:${RECOMMENDATION_SERVICE_PORT}
 
-SHIPPING_SERVICE_PORT=50051
+SHIPPING_SERVICE_PORT=50053
 SHIPPING_SERVICE_ADDR=shippingservice:${SHIPPING_SERVICE_PORT}
 
 FEATURE_FLAG_SERVICE_PORT=50052

docker-compose.yml

@@ -48,6 +48,7 @@ services:
       context: ./
       dockerfile: ./src/adservice/Dockerfile
     ports:
+      - "${AD_SERVICE_PORT}:${AD_SERVICE_PORT}"
       - "${AD_SERVICE_PORT}"
     environment:
       - AD_SERVICE_PORT
@@ -64,6 +65,7 @@ services:
       context: ./
       dockerfile: ./src/cartservice/src/Dockerfile
     ports:
+      - "${CART_SERVICE_PORT}:${CART_SERVICE_PORT}"
       - "${CART_SERVICE_PORT}"
     environment:
       - CART_SERVICE_PORT
@@ -83,6 +85,7 @@ services:
       context: ./
       dockerfile: ./src/checkoutservice/Dockerfile
     ports:
+      - "${CHECKOUT_SERVICE_PORT}:${CHECKOUT_SERVICE_PORT}"
       - "${CHECKOUT_SERVICE_PORT}"
     environment:
       - CHECKOUT_SERVICE_PORT
@@ -113,6 +116,7 @@ services:
         - GRPC_VERSION=1.46.0
         - OPENTELEMETRY_VERSION=1.4.0
     ports:
+      - "${CURRENCY_SERVICE_PORT}:${CURRENCY_SERVICE_PORT}"
       - "${CURRENCY_SERVICE_PORT}"
     environment:
       - PORT=${CURRENCY_SERVICE_PORT}
@@ -128,6 +132,7 @@ services:
     build:
       context: ./src/emailservice
     ports:
+      - "${EMAIL_SERVICE_PORT}:${EMAIL_SERVICE_PORT}"
       - "${EMAIL_SERVICE_PORT}"
     environment:
       - APP_ENV=production
@@ -176,6 +181,7 @@ services:
       context: ./
       dockerfile: ./src/paymentservice/Dockerfile
     ports:
+      - "${PAYMENT_SERVICE_PORT}:${PAYMENT_SERVICE_PORT}"
       - "${PAYMENT_SERVICE_PORT}"
     environment:
       - PAYMENT_SERVICE_PORT
@@ -192,6 +198,7 @@ services:
       context: ./
       dockerfile: ./src/productcatalogservice/Dockerfile
     ports:
+      - "${PRODUCT_CATALOG_SERVICE_PORT}:${PRODUCT_CATALOG_SERVICE_PORT}"
       - "${PRODUCT_CATALOG_SERVICE_PORT}"
     environment:
       - PRODUCT_CATALOG_SERVICE_PORT
@@ -208,6 +215,7 @@ services:
       context: ./
       dockerfile: ./src/recommendationservice/Dockerfile
     ports:
+      - "${RECOMMENDATION_SERVICE_PORT}:${RECOMMENDATION_SERVICE_PORT}"
       - "${RECOMMENDATION_SERVICE_PORT}"
     depends_on:
       - productcatalogservice
@@ -227,6 +235,7 @@ services:
       context: ./
       dockerfile: ./src/shippingservice/Dockerfile
     ports:
+      - "${SHIPPING_SERVICE_PORT}:${SHIPPING_SERVICE_PORT}"
       - "${SHIPPING_SERVICE_PORT}"
     environment:
       - PORT=${SHIPPING_SERVICE_PORT}

src/currencyservice/Dockerfile

@@ -10,7 +10,9 @@ RUN apt-get install -qq -y --ignore-missing \
   pkg-config                                \
   protobuf-compiler                         \
   libprotobuf-dev                           \
-  cmake
+  libcurl4-openssl-dev                      \
+  nlohmann-json3-dev                        \
+  cmake                                     
 
 # The following arguments would be passed from docker-compose.yml
 ARG GRPC_VERSION

src/frontend/static/styles/styles.css

@@ -561,11 +561,6 @@ similar to that of the hot-products-row.
   border-radius: 20% 0 20% 20%;
 }
 
-select {
-  -webkit-appearance: none;
-  -webkit-border-radius: 0px;
-}
-
 /* Cymbal */
 
 /*

src/web/.eslintrc

@@ -0,0 +1,24 @@
+{
+  "extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "next/core-web-vitals"],
+  "plugins": ["@typescript-eslint"],
+  "root": true,
+  "globals": {},
+  "rules": {
+    "react-hooks/exhaustive-deps": "warn",
+    "no-unused-vars": "error",
+    "max-len": [
+      "error",
+      {
+        "code": 150,
+        "ignoreComments": true,
+        "ignoreTrailingComments": true,
+        "ignoreUrls": true,
+        "ignoreStrings": true,
+        "ignoreTemplateLiterals": true
+      }
+    ]
+  },
+  "parser": "@typescript-eslint/parser",
+  "env": {},
+  "overrides": []
+}

src/web/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

src/web/.prettierignore

@@ -0,0 +1,6 @@
+.idea
+.git
+build
+dist
+.husky
+node_modules

src/web/.prettierrc

@@ -0,0 +1,15 @@
+{
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "semi": true,
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "jsxBracketSameLine": false,
+  "proseWrap": "always",
+  "quoteProps": "as-needed",
+  "tabWidth": 2,
+  "useTabs": false
+}

src/web/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

src/web/components/Ad/Ad.styled.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import RouterLink from 'next/link';
+
+export const Ad = styled.section`
+  position: relative;
+  background-color: #ff9a9b;
+  font-size: 24px;
+  text-align: center;
+  padding: 48px;
+`;
+
+export const Link = styled(RouterLink)`
+  color: black;
+`;

src/web/components/Ad/Ad.tsx

@@ -0,0 +1,16 @@
+import { useAd } from '../../providers/Ad.provider';
+import * as S from './Ad.styled';
+
+const Ad = () => {
+  const {
+    adList: [{ text, redirectUrl } = { text: '', redirectUrl: '' }],
+  } = useAd();
+
+  return (
+    <S.Ad>
+      <S.Link href={redirectUrl}>{text}</S.Link>
+    </S.Ad>
+  );
+};
+
+export default Ad;

src/web/components/Ad/index.ts

@@ -0,0 +1 @@
+export { default } from './Ad';

src/web/components/Button/Button.tsx

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+
+const Button = styled.button<{ $type?: 'primary' | 'secondary' }>`
+  background-color: #ce0631;
+  color: white;
+  display: inline-block;
+  border: solid 1px #ce0631;
+  padding: 8px 16px;
+  outline: none;
+  font-size: 14px;
+  border-radius: 22px;
+  cursor: pointer;
+
+  ${({ $type = 'primary' }) =>
+    $type === 'secondary' &&
+    css`
+      background: none;
+      color: #ce0631;
+    `};
+`;
+
+export default Button;

src/web/components/Button/index.ts

@@ -0,0 +1 @@
+export { default } from './Button';

src/web/components/CartIcon/CartIcon.styled.ts

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import styled from 'styled-components';
+
+export const CartIcon = styled(Link).attrs({
+  as: 'a',
+})`
+  position: relative;
+  display: block;
+  margin-left: 25px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Icon = styled.img`
+  width: 20px;
+  height: 20px;
+  margin-bottom: 3px;
+`;
+
+export const ItemsCount = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 24px;
+  left: 11px;
+  width: 16px;
+  height: 16px;
+  font-size: 11px;
+  border-radius: 4px 4px 0 4px;
+  color: white;
+  background-color: #853b5c;
+`;

src/web/components/CartIcon/CartIcon.tsx

@@ -0,0 +1,19 @@
+import { useCart } from '../../providers/Cart.provider';
+import * as S from './CartIcon.styled';
+
+const CartIcon = () => {
+  const {
+    cart: { items },
+  } = useCart();
+
+  return (
+    <S.CartIcon href="/cart">
+      <>
+        <S.Icon src="/icons/Hipster_CartIcon.svg" alt="Cart icon" title="Cart" />
+        {!!items.length && <S.ItemsCount>{items.length}</S.ItemsCount>}
+      </>
+    </S.CartIcon>
+  );
+};
+
+export default CartIcon;

src/web/components/CartIcon/index.ts

@@ -0,0 +1 @@
+export { default } from './CartIcon';

src/web/components/CartItems/CartItem.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link';
+import { Product } from '../../protos/demo';
+import ProductPrice from '../ProductPrice';
+import * as S from './CartItems.styled';
+
+interface IProps {
+  product: Product;
+  quantity: number;
+}
+
+const CartItem = ({
+  product: { id, name, picture, priceUsd = { units: 0, nanos: 0, currencyCode: 'USD' } },
+  quantity,
+}: IProps) => {
+  return (
+    <S.CartItem>
+      <Link href={`/product/${id}`}>
+        <S.CartItemImage alt={name} src={picture} />
+      </Link>
+      <S.CartItemDetails>
+        <div>
+          <h5>{name}</h5>
+          <p>SKU #{id}</p>
+        </div>
+        <S.PriceContainer>
+          <p>Quantity: {quantity}</p>
+          <p>
+            <ProductPrice price={priceUsd} />
+          </p>
+        </S.PriceContainer>
+      </S.CartItemDetails>
+    </S.CartItem>
+  );
+};
+
+export default CartItem;