Merge pull request #41 from hngprojects/chore/ci-cd-pipeline

Chore/ci cd pipeline

Author: droffilc1

.github/workflows/frontend-cd.yml

@@ -0,0 +1,42 @@
+name: Frontend Deploy
+
+on:
+  push:
+    branches:
+      - setup
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    needs: [test-and-build]
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Download Build Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: next-build
+          path: .next
+
+      - name: Install sshpass
+        run: sudo apt-get install -y sshpass
+
+      - name: Deploy to Production Server
+        run: |
+          echo "🚀 Deploying .next build to server..."
+          sshpass -p "${{ secrets.SERVER_PASSWORD }}" scp -o StrictHostKeyChecking=no -r .next package.json pnpm-lock.yaml \
+            "${{ secrets.SERVER_USER }}@${{ secrets.SERVER_IP }}:/home/${{ secrets.SERVER_USER }}/AI-Ad-Gen-Frontend"
+
+      - name: Start Application on Server
+        run: |
+          sshpass -p "${{ secrets.SERVER_PASSWORD }}" ssh -o StrictHostKeyChecking=no \
+            "${{ secrets.SERVER_USER }}@${{ secrets.SERVER_IP }}" << 'EOF'
+            set -e  # Stop script on error
+            cd /home/${{ secrets.SERVER_USER }}/AI-Ad-Gen-Frontend
+            pnpm install --frozen-lockfile
+            pm2 delete ai-adgen-frontend || true
+            pm2 start pnpm --name ai-adgen-frontend -- start
+          EOF

.github/workflows/frontend-ci.yml

@@ -0,0 +1,39 @@
+name: Frontend Test
+
+on:
+  push:
+    branches:
+      - setup
+      - main
+
+jobs:
+  test-and-build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: latest
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Frontend
+        run: pnpm build
+
+      - name: Upload Build Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: next-build
+          path: "${{ env.NEXT_PATH }}/*"
+          if-no-files-found: error
+          include-hidden-files: true

public/images/hng-wig-1.png

@@ -22,7 +22,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   demographicsOptions,
   regionOptions,
@@ -31,7 +30,6 @@ import {
   ageGroupOptions,
 } from "@/app/constants/step-one-form-options";
 import { ImageAdSchema } from "@/schemas/ad-schema";
-import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 const DynamicMultiSelect = dynamic(
@@ -65,53 +63,6 @@ export const ImageAdForm = () => {
   };
 
   return (
-    <div className="min-h-full bg-[#F9FAFB] p-6 py-18 flex justify-center items-center">
-      <Card className="w-full max-w-[890px]">
-        <CardContent className="p-14">
-          <div className="mb-8">
-            <Link
-              href="/ad-type"
-              className="flex items-center text-gray-600 hover:text-gray-800 cursor-pointer p-0"
-            >
-              <Image
-                src="/arrow-left.svg"
-                alt="Back"
-                className="w-5 h-5 mr-2"
-                width={10}
-                height={10}
-              />
-              <span>Back</span>
-            </Link>
-          </div>
-
-          <CardHeader className="p-0 mb-6 text-center">
-            <CardTitle className="text-2xl font-bold">
-              Let&apos;s set up your Ad
-            </CardTitle>
-            <p className="text-gray-500 mt-2">
-              Fill in the details below, then AI generates your ad instantly.
-            </p>
-          </CardHeader>
-
-          <div className="mb-8">
-            <div className="flex justify-around items-center">
-              <div className="text-center">
-                <p className="text-sm text-black font-medium">STEP 1</p>
-                <p className="text-xs mt-1 text-gray-700">Set Ad goals</p>
-              </div>
-
-              <div className="text-center">
-                <p className="text-sm text-gray-400 font-medium">STEP 2</p>
-                <p className="text-xs mt-1 text-gray-400">Preview</p>
-              </div>
-            </div>
-
-            <div className="relative w-full h-2 bg-white-200 rounded-full mt-4 mb-4">
-              <div className="absolute left-0 h-2 bg-[#1467C5] rounded-l-full w-[48%]"></div>
-
-              <div className="absolute right-0 h-2 bg-gray-300 rounded-r-full w-[48%]"></div>
-            </div>
-          </div>
 
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@@ -316,13 +267,10 @@ export const ImageAdForm = () => {
                       : "bg-gray-300 text-gray-500 cursor-not-allowed"
                   }`}
                 >
-                  Generate Ad
+                  <Link href='/create-ad/preview'>Generate Ad</Link>
                 </Button>
               </div>
             </form>
           </Form>
-        </CardContent>
-      </Card>
-    </div>
   );
 };