dockerizing user-app

apps/user-app/components/HomeChart.tsx

@@ -1,37 +1,35 @@
-"use client"
+"use client";
 
-import { TrendingUp } from "lucide-react"
-import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
 
 import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
-} from "./ui/card"
+} from "./ui/card";
 import {
   ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
-} from "./ui/chart"
+} from "./ui/chart";
 const chartData = [
   { month: "January", expenses: 186 },
   { month: "February", expenses: 305 },
   { month: "March", expenses: 237 },
   { month: "April", expenses: 73 },
   { month: "May", expenses: 209 },
   { month: "June", expenses: 214 },
-]
+];
 
 const chartConfig = {
   expenses: {
     label: "Expenses",
     color: "purple",
   },
-} satisfies ChartConfig
+} satisfies ChartConfig;
 
 export function ChartComp() {
   return (
@@ -72,7 +70,6 @@ export function ChartComp() {
           </LineChart>
         </ChartContainer>
       </CardContent>
-
     </Card>
-  )
+  );
 }

apps/user-app/components/OnRampTrans.tsx

@@ -1,10 +1,6 @@
 import { Card, CardContent, CardDescription, CardTitle, CardHeader } from "./ui/card";
 
-enum TransactionType {
-    Deposit = 'Deposit',
-    Withdrawal = 'Withdrawal',
-    Transfer = 'Transfer',
-}
+
 
 
 export default function OnRampTransCard({

apps/user-app/components/P2pTransfer.tsx

@@ -1,47 +1,57 @@
-"use client"
+"use client";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
-import { Button } from "@repo/ui/button"
-import { Input } from "./ui/input"
-import { Select } from "./ui/select"
-import { useState } from "react"
-import { CreateP2PTransaction } from "../app/lib/actions/P2pTxnsAction"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Button } from "@repo/ui/button";
+import { Input } from "./ui/input";
+import { useState } from "react";
+import { CreateP2PTransaction } from "../app/lib/actions/P2pTxnsAction";
 
 export default function P2pTransfer() {
-    const [amount, setAmount] = useState(0)
-    const [peerPhn, setPeerPhn] = useState("")
-   return( <Card className='mt-6 w-[30vw] h-fit'>
-    <CardHeader>
+  const [amount, setAmount] = useState(0);
+  const [peerPhn, setPeerPhn] = useState("");
+  return (
+    <Card className="mt-6 w-[30vw] h-fit">
+      <CardHeader>
         <CardTitle>Send amount</CardTitle>
       </CardHeader>
-        <CardContent>
-
-        <div className='flex flex-col ' >
-            <h1>Phone No.</h1>
-            <Input type='number' onChange={(e)=>{
-                setPeerPhn(e.target.value)
-            }} placeholder='Peers phone no. ' />
-            <div className="mt-3">
-            <h1 >Amount</h1>
-            <Input type='number' onChange={(e)=>{
-                setAmount(Number(e.target.value))
-            }} placeholder='Enter Amount' />
-            </div>
+      <CardContent>
+        <div className="flex flex-col ">
+          <h1>Phone No.</h1>
+          <Input
+            type="number"
+            onChange={(e) => {
+              setPeerPhn(e.target.value);
+            }}
+            placeholder="Peers phone no. "
+          />
+          <div className="mt-3">
+            <h1>Amount</h1>
+            <Input
+              type="number"
+              onChange={(e) => {
+                setAmount(Number(e.target.value));
+              }}
+              placeholder="Enter Amount"
+            />
+          </div>
         </div>
 
-        <div className='flex flex-col mt-6' >
-
-<div className="mt-6">
-        <Button onClick={async()=>{ 
-            const sendMoney = await CreateP2PTransaction({amount, peerPhone:peerPhn})
-            alert(sendMoney?.message)
-            }}>
-        Send Money
-        </Button>
+        <div className="flex flex-col mt-6">
+          <div className="mt-6">
+            <Button
+              onClick={async () => {
+                const sendMoney = await CreateP2PTransaction({
+                  amount,
+                  peerPhone: peerPhn,
+                });
+                alert(sendMoney?.message);
+              }}
+            >
+              Send Money
+            </Button>
+          </div>
         </div>
-  </div>
-
-        </CardContent>
+      </CardContent>
     </Card>
-   )
-}
+  );
+}

docker/Dockerfile.user

@@ -0,0 +1,18 @@
+FROM node:20.12.0-alpine3.19
+
+WORKDIR /usr/src/app
+
+COPY package.json package-lock.json turbo.json tsconfig.json ./
+
+COPY apps ./apps
+COPY packages ./packages
+
+# Install dependencies
+RUN npm install
+# Can you add a script to the global package.json that does this?
+RUN npm run db:generate
+
+# Can you filter the build down to just one app?
+RUN npm run build
+
+CMD ["npm", "run", "start-user-app"]

package.json

@@ -6,8 +6,8 @@
     "dev": "turbo dev",
     "lint": "turbo lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-    "db:generate":"cd packages/db && npx prisma generate"
-
+    "db:generate": "cd packages/db && npx prisma generate",
+    "start-user-app": "cd ./apps/user-app && npm run start"
   },
   "devDependencies": {
     "@repo/eslint-config": "*",