added changes

frontend/app/config.ts

@@ -0,0 +1 @@
+export const BACKEND_URL="http://localhost:3000"

frontend/app/dashboard/page.tsx

@@ -0,0 +1,88 @@
+"use client"
+import Appbar from '@/components/Appbar'
+import DarkButton from '@/components/buttons/DarkButton'
+import axios from 'axios';
+import { useEffect, useState } from 'react'
+import { BACKEND_URL } from '../config';
+
+interface Zap {
+  "id": string,
+  "triggerId": string,
+  "userId": number,
+  "actions":
+  {
+    "id": string,
+    "zapId": string,
+    "actionId": string,
+    "sortingOrder": number,
+    "type": {
+      "id": string,
+      "name": string
+    }
+  }[]
+}
+
+function useZaps() {
+  const [loading, setLoading] = useState(true);
+  const [zaps, setZaps] = useState<Zap[]>([])
+  useEffect(() => {
+    axios.get(`${BACKEND_URL}/api/v1/zap`,{
+      headers:{
+        "Authorization":localStorage.getItem("token")
+      }
+    })
+        .then(res=>{
+          setZaps(res.data.zaps)
+          setLoading(false)
+        })
+  }, [])
+  return {
+    loading,
+    zaps
+  }
+}
+
+export default function Page() {
+  const {loading,zaps}=useZaps()
+  return (
+    <div>
+      <Appbar />
+      <div className='flex justify-center pt-8'>
+        <div className='max-w-screen-lg w-full'>
+          <div className='flex justify-between'>
+            <div className='text-2xl font-bold'>
+              My Zaps
+            </div>
+            <DarkButton onClick={() => {
+
+            }} size='big'>Create</DarkButton>
+          </div>
+        </div>
+      </div>
+      {loading ? "Loading": <ZapTable zaps={zaps}/>}
+
+    </div>
+  )
+}
+
+function ZapTable({zaps}:{zaps:Zap[]}){
+  return <table className="table-auto">
+  <thead>
+    <tr>
+      <th></th>
+      <th>Name</th>
+      <th>Last Edit</th>
+      <th>Running</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
+      <td>Malcolm Lockyer</td>
+      <td>1961</td>
+      <td>1961</td>
+      <td>1961</td>
+    </tr>
+  </tbody>
+</table>
+}

frontend/app/login/page.tsx

@@ -1,9 +1,58 @@
-import React from 'react'
+"use client"
+import Appbar from '@/components/Appbar'
+import PrimaryButton from '@/components/buttons/PrimaryButton'
+import CheckFeature from '@/components/CheckFeature'
+import Input from '@/components/Input'
+import { useRouter } from 'next/navigation'
+import React, { useState } from 'react'
+import { BACKEND_URL } from '../config'
+import axios from 'axios'
 
-export default function page() {
+export default function Page() {
+  const [email,setEmail]=useState("");
+  const [password,setPassword]=useState("");
+  const router=useRouter();
   return (
     <div>
-
+      <Appbar />
+      <div className='flex justify-center'>
+        <div className='flex pt-8 max-w-4xl'>
+        <div className='flex-1 pt-20 px-4'>
+          <div className='font-semibold text-3xl  pb-4'>
+            Join millions worldwide who automate their work using Zapier.
+          </div>
+          <div className='pb-8 pt-4' >
+            <CheckFeature label='Easy setup, no coding required' />
+          </div>
+          <div className='pb-8'>
+            <CheckFeature label='Free forever for core features' />
+          </div>
+          <div className='pb-6'>
+            <CheckFeature label='14-day trial of premium features & apps' />
+          </div>
+        </div>
+
+        <div className='flex-1 pt-6 pb-6 px-4 mt-12 border rounded'>
+          <Input type='text' label='Email' placeholder='Your Email' onChange={(e) => {
+            setEmail(e.target.value)
+          }} />
+          <Input type='password' label='Password' placeholder='Your Password' onChange={(e) => {
+            setPassword(e.target.value)
+          }} />
+          <div className='pt-4'>
+            <PrimaryButton size='big' onClick={async() => {
+              const response= await axios.post(`${BACKEND_URL}/api/v1/user/signin`,{
+                email:email,
+                password:password
+              })
+              localStorage.setItem("token",response.data.token)
+              router.push("/dashboard")
+            }} >Sign in</PrimaryButton>
+          </div>
+        </div>
+      </div>
+      </div>
+
     </div>
   )
 }

frontend/app/signup/page.tsx

@@ -3,9 +3,16 @@ import Appbar from '@/components/Appbar'
 import PrimaryButton from '@/components/buttons/PrimaryButton'
 import CheckFeature from '@/components/CheckFeature'
 import Input from '@/components/Input'
-import React from 'react'
+import { useState } from 'react'
+import { BACKEND_URL } from '../config'
+import axios from 'axios'
+import { useRouter } from 'next/navigation'
 
-export default function page() {
+export default function Page() {
+  const [name, setName]=useState("");
+  const [email, setEmail]=useState("");
+  const [password, setPassword]=useState("");
+  const router=useRouter();
   return (
     <div>
       <Appbar />
@@ -28,17 +35,22 @@ export default function page() {
 
         <div className='flex-1 pt-6 pb-6 px-4 mt-12 border rounded'>
           <Input type='text' label='Name' placeholder='Your Name' onChange={(e) => {
-
+            setName(e.target.value)
           }} />
           <Input type='text' label='Email' placeholder='Your Email' onChange={(e) => {
-
+            setEmail(e.target.value)
           }} />
           <Input type='password' label='Password' placeholder='Your Password' onChange={(e) => {
-
+            setPassword(e.target.value)
           }} />
           <div className='pt-4'>
-            <PrimaryButton size='big' onClick={() => {
-
+            <PrimaryButton size='big' onClick={async() => {
+             const response= await axios.post(`${BACKEND_URL}/api/v1/user/signup`,{
+                name:name,
+                email:email,
+                password:password
+              })
+              router.push("/login")
             }} >Get started free</PrimaryButton>
           </div>
         </div>

frontend/components/buttons/DarkButton.tsx

@@ -0,0 +1,10 @@
+"use client"
+import React, { ReactNode } from 'react'
+
+export default function DarkButton({ children, onClick, size }: { children: ReactNode, onClick: () => void, size?: "big" | "small" }) {
+  return (
+    <div onClick={onClick} className={`${size === "small" ? "text-sm" : "text-xl"} ${size === "small" ? "px-8 pt-2" : "px-10 py-4"} hover:shadow-md bg-purple-800 text-white rounded cursor-pointer text-center mr-4`}>
+      {children}
+    </div>
+  )
+}

frontend/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^1.7.7",
     "next": "14.2.7",
     "react": "^18",
     "react-dom": "^18"