App/web

.github/workflows/web.yml

@@ -0,0 +1,107 @@
+name: "Web App CI/CD"
+
+on:
+  push:
+    branches: [app/web]
+  pull_request:
+    branches: [dev, main]
+
+defaults:
+  run:
+    working-directory: ./apps/web
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@master
+      - uses: pnpm/action-setup@v2
+        with:
+          version: latest
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+          cache: "pnpm"
+          cache-dependency-path: apps/web/pnpm-lock.yaml
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm lint
+
+  format:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@master
+      - uses: pnpm/action-setup@v2
+        with:
+          version: latest
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+          cache: "pnpm"
+          cache-dependency-path: apps/web/pnpm-lock.yaml
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Format
+        run: pnpm format
+
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@master
+      - uses: pnpm/action-setup@v2
+        with:
+          version: latest
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+          cache: "pnpm"
+          cache-dependency-path: apps/web/pnpm-lock.yaml
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@master
+      - uses: pnpm/action-setup@v2
+        with:
+          version: latest
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+          cache: "pnpm"
+          cache-dependency-path: apps/web/pnpm-lock.yaml
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Test
+        run: pnpm test
+
+  publish:
+    runs-on: ubuntu-latest
+    needs: [build, test]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@master
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: ./apps/web/.
+          file: ./apps/web/Dockerfile
+          push: true
+          tags: floriaaan/goodfood-web:latest

apps/web/.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

apps/web/.env.example

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_BASE_URL="http://localhost:3000"
+NEXT_PUBLIC_API_URL="http://localhost:50000"
+
+NEXT_PUBLIC_MAPBOX_TOKEN=""
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=""

apps/web/.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "extends": ["next", "prettier", "plugin:@tanstack/eslint-plugin-query/recommended"],
+  "plugins": ["@typescript-eslint", "prettier"],
+  "root": true,
+  "rules": {
+    "no-console": "error",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
+    "@tanstack/query/exhaustive-deps": "warn"
+  },
+  "globals": {
+    "JSX": "readonly"
+  }
+}

apps/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*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/web/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "printWidth": 120,
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

apps/web/Dockerfile

@@ -0,0 +1,61 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

apps/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
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## 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.

apps/web/app/(normal)/(home)/catalog/filters.tsx

@@ -0,0 +1,102 @@
+import { useCatalogFilters } from "@/app/(normal)/(home)/catalog";
+import { cn } from "@/lib/utils";
+import { ProductType } from "@/types/product";
+
+export const CatalogFilters = () => {
+  const { type, setType } = useCatalogFilters();
+  return (
+    <div className="inline-flex h-fit overflow-x-auto sm:col-span-2 lg:col-span-3">
+      <button
+        onClick={() => setType(ProductType.ENTREES)}
+        className={cn(
+          "inline-flex h-12 w-24 shrink-0 items-center justify-center gap-x-2 border-b-2 text-xs font-bold duration-200 sm:w-1/5",
+          type === ProductType.ENTREES ? "border-gray-800" : "border-gray-300",
+        )}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+          <path
+            d="M15.91 9.84a2.05 2.05 0 0 0-1.45-3.48A2.04 2.04 0 0 0 13 9.84H15.92ZM11.36 9.84a2.11 2.11 0 1 0-4.14 0h4.13ZM16.48 17.25H7.4v.38h9.1v-.38ZM21 9.84s-3.1 7.41-9 7.41-9-7.41-9-7.41h18Z"
+            stroke="#222"
+            strokeWidth="1.5"
+            strokeLinejoin="bevel"
+          />
+        </svg>
+        Entrées
+      </button>
+      <button
+        onClick={() => setType(ProductType.PLATS)}
+        className={cn(
+          "inline-flex h-12 w-24 shrink-0 items-center justify-center gap-x-2 border-b-2 text-xs font-bold duration-200 sm:w-1/5",
+          type === ProductType.PLATS ? "border-gray-800" : "border-gray-300",
+        )}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+          <path
+            d="M0 17.4h24M21 17.1a9 9 0 0 0-18 0M12.7 7.3a.7.7 0 1 0-1.4 0"
+            stroke="#222"
+            strokeWidth="1.5"
+            strokeLinejoin="bevel"
+          />
+          <path d="M11.9 11c-1.9 0-3.6.9-4.6 2.3" stroke="#222" strokeWidth="1.5" strokeLinejoin="bevel" />
+        </svg>
+        Plats
+      </button>
+      <button
+        onClick={() => setType(ProductType.DESSERTS)}
+        className={cn(
+          "inline-flex h-12 w-24 shrink-0 items-center justify-center gap-x-2 border-b-2 text-xs font-bold duration-200 sm:w-1/5",
+          type === ProductType.DESSERTS ? "border-gray-800" : "border-gray-300",
+        )}
+      >
+        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M19.1859 14.43L16.835 20.345H9.49003L7.28003 14.43"
+            stroke="#222222"
+            strokeWidth="1.5"
+            strokeLinejoin="bevel"
+          />
+          <path
+            d="M11.9275 18.4925L11.2342 16.2825M14.365 18.4925L15.21 16.2825M17.94 8.55834C17.745 8.55834 17.55 8.58 17.3767 8.62334C17.0431 7.7472 16.4506 6.99344 15.6781 6.46235C14.9055 5.93127 13.9896 5.64805 13.0521 5.65041C12.1146 5.65276 11.2001 5.94056 10.4302 6.47552C9.66035 7.01047 9.07166 7.76721 8.7425 8.645C8.20249 8.525 7.64052 8.54771 7.11196 8.71091C6.58339 8.87411 6.10644 9.17217 5.72807 9.57573C5.34971 9.97929 5.08298 10.4744 4.95415 11.0124C4.82532 11.5504 4.83883 12.1127 4.99336 12.6438C5.14788 13.175 5.43808 13.6568 5.83539 14.0417C6.2327 14.4266 6.72342 14.7014 7.25922 14.839C7.79501 14.9766 8.35742 14.9723 8.89105 14.8265C9.42468 14.6807 9.91113 14.3985 10.3025 14.0075C11.0999 14.6056 12.0682 14.9322 13.065 14.9392C14.105 14.9392 15.0042 14.6142 15.7625 14.0617C16.1407 14.4179 16.6003 14.6763 17.1012 14.8141C17.6022 14.952 18.1292 14.9653 18.6365 14.8527C19.1437 14.7401 19.6157 14.5052 20.0113 14.1683C20.4069 13.8315 20.7141 13.403 20.906 12.9202C21.098 12.4374 21.169 11.9149 21.1127 11.3984C21.0564 10.8819 20.8747 10.387 20.5832 9.95687C20.2918 9.52672 19.8996 9.17441 19.4407 8.93064C18.9819 8.68687 18.4704 8.55906 17.9508 8.55834H17.94V8.55834Z"
+            stroke="#222222"
+            strokeWidth="1.5"
+            strokeLinejoin="bevel"
+          />
+        </svg>
+        Desserts
+      </button>
+      <button
+        onClick={() => setType(ProductType.BOISSONS)}
+        className={cn(
+          "inline-flex h-12 w-24 shrink-0 items-center justify-center gap-x-2 border-b-2 text-xs font-bold duration-200 sm:w-1/5",
+          type === ProductType.BOISSONS ? "border-gray-800" : "border-gray-300",
+        )}
+      >
+        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M8.93751 10.5625H17.0625M8.93751 15.4375H17.0625M10.5625 4.225H15.4375M14.6683 1.625H11.3317V4.44167L9.85834 5.87167L8.38501 9.75V24.375H17.615V9.75L16.1308 5.8825L14.6683 4.44167V1.625V1.625Z"
+            stroke="#222222"
+            strokeWidth="1.5"
+            strokeLinejoin="bevel"
+          />
+        </svg>
+        Boissons
+      </button>
+      <button
+        onClick={() => setType(ProductType.SNACKS)}
+        className={cn(
+          "inline-flex h-12 w-24 shrink-0 items-center justify-center gap-x-2 border-b-2 text-xs font-bold duration-200 sm:w-1/5",
+          type === ProductType.SNACKS ? "border-gray-800" : "border-gray-300",
+        )}
+      >
+        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M15.4375 20.3125L16.185 15.4375M10.5625 20.3125L9.7825 15.4375M4.0625 10.5625L10.5625 4.0625M21.9375 10.5625L13.8125 5.6875M24.375 10.5625H1.625V13.8125H24.375V10.5625ZM19.7492 21.9375H6.25083L3.25 13.8125H22.75L19.7492 21.9375Z"
+            stroke="#222222"
+            strokeWidth="1.5"
+          />
+        </svg>
+        Snacks
+      </button>
+    </div>
+  );
+};