Merge pull request #51 from itsbekas/42-change-frontend-to-react-rout…

…er-from-svelte

change frontend to react router from svelte

backend/lifehub/core/user/api/router.py

@@ -1,10 +1,10 @@
-from typing import Annotated
-
-from fastapi import APIRouter, Form, HTTPException
+from fastapi import APIRouter, HTTPException
 
 from lifehub.core.user.api.dependencies import UserDep, UserServiceDep
 from lifehub.core.user.models import (
     UpdateUserRequest,
+    UserCreateRequest,
+    UserLoginRequest,
     UserResponse,
     UserTokenResponse,
     UserVerifyRequest,
@@ -16,12 +16,11 @@
 
 @router.post("/login")
 async def user_login(
-    username: Annotated[str, Form()],
-    password: Annotated[str, Form()],
+    user_data: UserLoginRequest,
     user_service: UserServiceDep,
 ) -> UserTokenResponse:
     try:
-        user = user_service.login_user(username, password)
+        user = user_service.login_user(user_data.username, user_data.password)
     except UserServiceException as e:
         raise HTTPException(status_code=401, detail=str(e))
     user_token = user_service.create_access_token(user)
@@ -30,14 +29,11 @@ async def user_login(
 
 @router.post("/signup")
 async def user_signup(
-    username: Annotated[str, Form()],
-    password: Annotated[str, Form()],
-    name: Annotated[str, Form()],
-    email: Annotated[str, Form()],
+    user_data: UserCreateRequest,
     user_service: UserServiceDep,
 ) -> None:
     try:
-        user_service.create_user(username, email, password, name)
+        user_service.create_user(user_data.username, user_data.email, user_data.password, user_data.name)
     except UserServiceException as e:
         raise HTTPException(status_code=403, detail=str(e))
 

docker-compose.dev.yml

@@ -36,14 +36,17 @@ services:
       dockerfile: Dockerfile.dev
     container_name: lifehub-frontend
     environment:
-      - BACKEND_URL=lifehub-backend
+      - VITE_BACKEND_URL=http://lifehub-backend:8000
+      - VITE_SESSION_SECRET=${SESSION_SECRET}
     ports:
       - "80:5173"
     depends_on:
       - lifehub-backend
     volumes:
       - ./frontend:/app
+      - node_modules:/usr/src/app/node_modules
 
 volumes:
+  node_modules:
   dbdata:
     driver: local

docker-compose.yml

@@ -33,7 +33,7 @@ services:
       dockerfile: Dockerfile
     container_name: lifehub-frontend
     environment:
-      - BACKEND_URL=lifehub-backend
+      - VITE_BACKEND_URL=lifehub-backend
     ports:
       - "80:5173"
     depends_on:

frontend/.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

frontend/.gitignore

@@ -1,21 +1,6 @@
-node_modules
-
-# Output
-.output
-.vercel
-/.svelte-kit
-/build
-
-# OS
 .DS_Store
-Thumbs.db
-
-# Env
-.env
-.env.*
-!.env.example
-!.env.test
+/node_modules/
 
-# Vite
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+# React Router
+/.react-router/
+/build/

frontend/Dockerfile

@@ -1,23 +1,22 @@
-FROM node:alpine as builder
-
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
 WORKDIR /app
+RUN npm ci
 
-COPY package*.json ./
-RUN npm install
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
 
-COPY . .
-RUN ls -la
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
 RUN npm run build
 
-# Stage 2: Setup the production environment
-FROM node:alpine
-
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
 WORKDIR /app
-
-# Copy only necessary directories and files
-COPY --from=builder /app/build ./build
-COPY --from=builder /app/node_modules ./node_modules
-ENV ORIGIN=http://localhost:3000
-
-CMD ["node", "build"]
-EXPOSE 3000
+CMD ["npm", "run", "start"]

frontend/Dockerfile.dev

@@ -3,4 +3,4 @@ FROM node:alpine as builder
 WORKDIR /app
 
 CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
-EXPOSE 5173
+EXPOSE 5173

frontend/README.md

@@ -1,38 +1,100 @@
-# sv
+# Welcome to React Router!
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+A modern, production-ready template for building full-stack React applications using React Router.
 
-## Creating a project
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
 
-If you're seeing this, you've probably already done this step. Congrats!
+## Features
 
-```bash
-# create a new project in the current directory
-npx sv create
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
 
-# create a new project in my-app
-npx sv create my-app
+```bash
+npm install
 ```
 
-## Developing
+### Development
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Start the development server with HMR:
 
 ```bash
 npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
 ```
 
-## Building
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
 
-To create a production version of your app:
+Create a production build:
 
 ```bash
 npm run build
 ```
 
-You can preview the production build with `npm run preview`.
+## Deployment
+
+### Docker Deployment
+
+This template includes three Dockerfiles optimized for different package managers:
+
+- `Dockerfile` - for npm
+- `Dockerfile.pnpm` - for pnpm
+- `Dockerfile.bun` - for bun
+
+To build and run using Docker:
+
+```bash
+# For npm
+docker build -t my-app .
+
+# For pnpm
+docker build -f Dockerfile.pnpm -t my-app .
+
+# For bun
+docker build -f Dockerfile.bun -t my-app .
+
+# Run the container
+docker run -p 3000:3000 my-app
+```
+
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
+
+### DIY Deployment
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+```
+├── package.json
+├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
+├── build/
+│   ├── client/    # Static assets
+│   └── server/    # Server-side code
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+Built with ❤️ using React Router.

frontend/app/app.css

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+}

frontend/app/components/BankBalances.tsx

@@ -0,0 +1,49 @@
+import { Container, Title, Card, Text, Group } from "@mantine/core";
+import { AddBankAccountModal } from "~/components/modals/AddBankAccountModal";
+
+type BankBalance = {
+  bank: string;
+  account_id: string;
+  balance: number;
+};
+
+type Bank = {
+  id: string;
+  name: string;
+  logo: string;
+};
+
+type BankBalancesProps = {
+  balances: BankBalance[];
+  banks: Bank[]; // List of available banks for the modal
+};
+
+export function BankBalances({ balances, banks }: BankBalancesProps) {
+  return (
+    <Container size="lg" mt="lg">
+      <Group justify="apart" mb="md">
+        <Title order={2}>Bank Balances</Title>
+        <AddBankAccountModal banks={banks} />
+      </Group>
+      <Group gap="md" align="left">
+        {balances.map((balance) => (
+          <Card
+            withBorder
+            radius="md"
+            key={balance.account_id}
+            padding="md"
+            style={{ width: 200 }} // Control card width
+          >
+            <Text fw={500} truncate>
+              {balance.bank}
+            </Text>
+            <Text size="sm" c="dimmed" mb="xs" truncate>
+              Account ID: {balance.account_id}
+            </Text>
+            <Text fw={700}>${balance.balance.toFixed(2)}</Text>
+          </Card>
+        ))}
+      </Group>
+    </Container>
+  );
+}