Design website with setup CI/CD

.github/workflows/deploy-website.yml

@@ -0,0 +1,56 @@
+name: Build and Deploy NextJS App to S3
+
+on:
+  push:
+    branches:
+      - design-website
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  build-and-deploy-website:
+    name: Build and Deploy Website
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "20.x"
+
+      - name: Install dependencies
+        run: |
+          cd website
+          npm install
+
+      - name: Build
+        run: |
+          cd website
+          sed -i "s|SUPABASE_URL_VALUE|${{ secrets.SUPABASE_URL }}|g" config.js
+          sed -i "s|SUPABASE_ANON_KEY_VALUE|${{ secrets.SUPABASE_ANON_KEY }}|g" config.js
+          npm run build
+
+      - name: Debug - List files in out directory
+        run: |
+          cd website
+          ls -R ./out
+
+      - name: Debug - Display AWS CLI version
+        run: aws --version
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      - name: Deploy to S3
+        run: |
+          cd website
+          aws s3 sync ./out s3://${{ secrets.WEBSITE_BUCKET_NAME }}

README.md

@@ -1,6 +1,6 @@
-# Just Foodie
+# Bite Space
 
-## Welcome to the Just Foodie Web App – Your Ultimate Culinary Companion!
+## Welcome to the Bite Space Web App – Your Ultimate Culinary Companion!
 
 A food web app for food lovers which is built in nextjs to discover popular foods and restaurants/cafes near you or where you want.
 

website/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

website/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.vscode
+# 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
+.env
+
+# vercel
+.vercel
+
+package-lock.json

website/app/category/[category]/category.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import supabase from "@/utils/supabase";
+
+import SectionTitle from "@/components/Common/SectionTitle";
+import Restaurants from "./restaurant";
+import { useEffect, useState } from "react";
+
+const Category = ({ paramsData }: { paramsData: { category: string } }) => {
+  const [isCategoryLoading, setIsCategoryLoading] = useState(true);
+  const [categoryData, setCategoryData] = useState<any>({});
+  const [isRestaurantsLoading, setIsRestaurantsLoading] = useState(true);
+  const [restaurantsData, setRestaurantsData] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchRestaurantsDishes = async () => {
+      const { data: dishesData } = await supabase
+        .from("categories")
+        .select("image")
+        .in("tags", [categoryData.name]);
+
+      console.log(dishesData);
+
+      // setRestaurantsData(restaurant);
+      setIsRestaurantsLoading(false);
+    };
+
+    const fetchCategoryData = async () => {
+      try {
+        const { data, error } = await supabase
+          .from("categories")
+          .select("*")
+          .eq("id", paramsData.category)
+          .single();
+
+        if (error) throw error;
+
+        setCategoryData(data);
+        setIsCategoryLoading(false);
+
+        const { data: categoriesData, error: categoriesError } = await supabase
+          .from("categories")
+          .select("id, restaurant_id, image")
+          .contains("tags", [data.name.toLowerCase()]);
+
+        if (categoriesError) throw categoriesError;
+
+        const restaurant = await Promise.all(
+          categoriesData.map(async (category) => {
+            const { data: restaurantData, error: restaurantError } =
+              await supabase
+                .from("restaurants")
+                .select("id, name, address")
+                .eq("id", category.restaurant_id)
+                .single();
+
+            if (restaurantError) throw restaurantError;
+
+            return {
+              ...restaurantData,
+              image: category.image,
+              rating: 0,
+              reviews: 0,
+            };
+          })
+        );
+
+        setRestaurantsData(restaurant);
+        setIsRestaurantsLoading(false);
+      } catch (error) {
+        console.error("Error fetching category data:", error.message);
+      }
+    };
+
+    fetchCategoryData();
+  }, []);
+
+  return (
+    <section className="py-16 md:py-20 lg:py-28">
+      {categoryData ? (
+        <div className="container">
+          <SectionTitle
+            title={categoryData.name}
+            paragraph={categoryData.description}
+            customClass="mx-auto mb-16 mt-20 capitalize animated-fade-y"
+          />
+          {/* {!isCategoryLoading ? (
+            <div className="animated-fade-y mb-5 grid w-full grid-cols-2 gap-5 sm:grid-cols-4 lg:w-2/3 xl:w-1/2">
+              <button className="rounded-full border border-black px-5 py-2 font-semibold transition-all duration-500 hover:bg-black hover:text-white dark:border-white dark:hover:bg-white dark:hover:text-black">
+                Filter
+              </button>
+              <button className="rounded-full border border-black px-5 py-2 font-semibold transition-all duration-500 hover:bg-black hover:text-white dark:border-white dark:hover:bg-white dark:hover:text-black">
+                Pure Veg
+              </button>
+              <button className="rounded-full border border-black px-5 py-2 font-semibold transition-all duration-500 hover:bg-black hover:text-white dark:border-white dark:hover:bg-white dark:hover:text-black">
+                Price
+              </button>
+              <button className="rounded-full border border-black px-5 py-2 font-semibold transition-all duration-500 hover:bg-black hover:text-white dark:border-white dark:hover:bg-white dark:hover:text-black">
+                Place
+              </button>
+            </div>
+          ) : (
+            ""
+          )} */}
+          <Restaurants
+            isLoading={isRestaurantsLoading}
+            restaurantsData={restaurantsData}
+          />
+        </div>
+      ) : (
+        <div className="flex h-screen w-full items-center justify-center text-black/50 dark:text-white/70">
+          No Data Found
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default Category;

website/app/category/[category]/page.tsx

@@ -0,0 +1,28 @@
+import supabase from "@/utils/supabase";
+import Category from "./category";
+
+const FoodCategoryRestaurants = ({
+  params,
+}: {
+  params: { category: string };
+}) => {
+  return <Category paramsData={params}></Category>;
+};
+
+export default FoodCategoryRestaurants;
+
+export async function generateStaticParams() {
+  const { data, error } = await supabase
+    .from("categories")
+    .select("id")
+    .eq("restaurant_id", 0);
+
+  if (error) throw error;
+
+  const pagesParams: any[] = [];
+  for (var i = 0; i < data.length; i++) {
+    pagesParams.push({ category: data[i].id.toString() });
+  }
+
+  return pagesParams;
+}

website/app/category/[category]/restaurant.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import Image from "next/image";
+import { Restaurants } from "@/types/restaurants";
+import Link from "next/link";
+
+const RestaurantsPage = ({
+  isLoading,
+  restaurantsData,
+}: {
+  isLoading: boolean;
+  restaurantsData: Restaurants[];
+}) => {
+  return (
+    <>
+      {isLoading ? (
+        <section>
+          <div className="py-20 text-center text-black/40 dark:text-white/70">
+            Loading...
+          </div>
+        </section>
+      ) : (
+        <section className="">
+          {restaurantsData.length > 0 ? (
+            <div className="mt-12 flex flex-col gap-5">
+              <p className="text-2xl font-bold">Restaurants to explore</p>
+              <div className="grid grid-cols-1 gap-x-4 gap-y-10 md:grid-cols-2 lg:grid-cols-3">
+                {restaurantsData.map((item) => (
+                  <Link
+                    href={`/restaurants/${item.id}/menu`}
+                    key={"may-like-" + item.id}
+                    className="animated-fade-y group relative h-full cursor-pointer"
+                  >
+                    {item.video ? (
+                      <video
+                        className="h-60 w-full border-b border-black object-cover pb-2 dark:border-white/40 sm:h-[30rem]"
+                        autoPlay
+                        loop
+                        muted
+                      >
+                        <source src={item.video} type="video/mp4" />
+                      </video>
+                    ) : (
+                      <Image
+                        src={item.image}
+                        className="h-60 w-full border-b border-black object-cover pb-2 dark:border-white/40 sm:h-[30rem]"
+                        alt="item-image"
+                        height={100}
+                        width={100}
+                      />
+                    )}
+                    <p className="absolute -mt-14 w-full bg-black bg-opacity-35 pb-2 pl-5 pt-2 text-xl font-extrabold capitalize text-white dark:border-white sm:text-2xl">
+                      {item.name}
+                    </p>
+                    <p className="mb-9 mt-3 text-sm sm:mb-14 sm:text-base">
+                      {item.address}
+                    </p>
+                    <div className="absolute bottom-0 flex w-full flex-col gap-2">
+                      <div className="flex items-center justify-between font-extrabold">
+                        {item.reviews > 0 ? (
+                          <p className="">
+                            {item.reviews}{" "}
+                            <span className="text-sm font-normal">
+                              {" "}
+                              Reviews
+                            </span>
+                          </p>
+                        ) : (
+                          ""
+                        )}
+                        {item.rating > 0 ? (
+                          <p className="px-4 sm:py-2">⭐ {item.rating}</p>
+                        ) : (
+                          ""
+                        )}
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div className="mt-20 text-center text-black/50 dark:text-white/70">
+              No restaurant found
+            </div>
+          )}
+        </section>
+      )}
+    </>
+  );
+};
+
+export default RestaurantsPage;