added next js project/folder

.gitignore

@@ -112,8 +112,4 @@ backend/public/uploads/
 secrets/
 keys/
 
-ToDo.txt
-
-
-# only in development branch
-next-env.d.ts
+ToDo.txt

Docs/backend_API_docs/README.md

@@ -1,7 +1,7 @@
 # Borrow System API Documentation
 
 **Frontend:** https://insta.the1s.de  
-**Backend base URL:** `https://insta.the1s.de/backend/api`
+**Backend base URL:** `https://backend.insta.the1s.de/api`
 
 ---
 
@@ -31,10 +31,10 @@ Include an API key in the route as `:key` parameter:
 Example:
 
 ```http
-GET /api/items/12345678
+GET /api/items/ABC123
 ```
 
-Where `12345678` is your API key.  
+Where `ABC123` is your API key.  
 The API key is validated server-side.
 
 ---
@@ -59,7 +59,7 @@ Returns a list of all items.
 
 #### Path Parameters
 
-- `:key` – API key (8-digit number)
+- `:key` – API key (string)
 
 #### Authentication
 
@@ -70,7 +70,14 @@ Returns a list of all items.
 #### Request Example
 
 ```http
-GET /api/items/12345678 HTTP/1.1
+GET /api/items/ABC123 HTTP/1.1
+Host: backend.insta.the1s.de
+```
+
+or
+
+```http
+GET /api/items/dummyKey HTTP/1.1
 Host: backend.insta.the1s.de
 Authorization: Bearer <JWT_TOKEN>
 ```
@@ -116,7 +123,7 @@ Toggles `in_safe` between `0` and `1` for a given item.
 
 #### Path Parameters
 
-- `:key` – API key (8-digit number)
+- `:key` – API key (string)
 - `:itemId` – Item ID (integer)
 
 #### Authentication
@@ -126,7 +133,7 @@ Toggles `in_safe` between `0` and `1` for a given item.
 #### Request Example
 
 ```http
-POST /api/change-state/12345678/42 HTTP/1.1
+POST /api/change-state/ABC123/42 HTTP/1.1
 Host: backend.insta.the1s.de
 ```
 
@@ -158,7 +165,7 @@ Fetch loan information by `loan_code`.
 
 #### Path Parameters
 
-- `:key` – API key (8-digit number)
+- `:key` – API key (string)
 - `:loan_code` – Loan code (string)
 
 #### Authentication
@@ -168,7 +175,7 @@ Fetch loan information by `loan_code`.
 #### Request Example
 
 ```http
-GET /api/get-loan-by-code/12345678/12345 HTTP/1.1
+GET /api/get-loan-by-code/ABC123/12345 HTTP/1.1
 Host: backend.insta.the1s.de
 ```
 
@@ -207,7 +214,7 @@ Sets `returned_date = NOW()` on a loan and updates related items:
 
 #### Path Parameters
 
-- `:key` – API key (8-digit number)
+- `:key` – API key (string)
 - `:loan_code` – Loan code (string)
 
 #### Authentication
@@ -217,7 +224,7 @@ Sets `returned_date = NOW()` on a loan and updates related items:
 #### Request Example
 
 ```http
-POST /api/set-return-date/12345678/12345 HTTP/1.1
+POST /api/set-return-date/ABC123/12345 HTTP/1.1
 Host: backend.insta.the1s.de
 ```
 
@@ -250,7 +257,7 @@ Sets `take_date = NOW()` on a loan and updates related items:
 
 #### Path Parameters
 
-- `:key` – API key (8-digit number)
+- `:key` – API key (string)
 - `:loan_code` – Loan code (string)
 
 #### Authentication
@@ -260,7 +267,7 @@ Sets `take_date = NOW()` on a loan and updates related items:
 #### Request Example
 
 ```http
-POST /api/set-take-date/12345678/LOAN-12345 HTTP/1.1
+POST /api/set-take-date/ABC123/LOAN-12345 HTTP/1.1
 Host: backend.insta.the1s.de
 ```
 
@@ -290,7 +297,7 @@ Looks up an item by its `door_key`, toggles `in_safe`, and returns safe informat
 
 #### Path Parameters
 
-- `:key` – API key (8-digit number)
+- `:key` – API key (string)
 - `:doorKey` – Door key/token (string) used by hardware to identify the locker.
 
 #### Authentication
@@ -300,7 +307,7 @@ Looks up an item by its `door_key`, toggles `in_safe`, and returns safe informat
 #### Request Example
 
 ```http
-GET /api/open-door/12345678/123 HTTP/1.1
+GET /api/open-door/ABC123/123 HTTP/1.1
 Host: backend.insta.the1s.de
 ```
 

FrontendV2/nginx.conf

@@ -9,14 +9,6 @@ server {
     try_files $uri $uri/ /index.html;
   }
 
-  location = /backend {
-    return 301 /backend/;
-  }
-
-  location /backend/ {
-    proxy_pass http://borrow_system-backend_v2:8004/;
-  }
-
   location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
     expires 1y;
     access_log off;

FrontendV2/src/components/Header.tsx

@@ -4,18 +4,25 @@ import {
   Heading,
   Stack,
   Text,
+  CloseButton,
+  Dialog,
+  Portal,
   HStack,
   IconButton,
   Menu,
   Box,
   Avatar,
+  Card,
+  Grid,
 } from "@chakra-ui/react";
+import { PasswordInput } from "@/components/ui/password-input";
 import Cookies from "js-cookie";
 import { useAtom } from "jotai";
 import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
 import { useNavigate } from "react-router-dom";
 import {
   CircleUserRound,
+  RotateCcwKey,
   Code,
   LifeBuoy,
   LogOut,
@@ -26,19 +33,69 @@ import {
 } from "lucide-react";
 import { useUserContext } from "@/states/Context";
 import { useState } from "react";
+import MyAlert from "./myChakra/MyAlert";
 import { useTranslation } from "react-i18next";
-import { UserDialogue } from "./UserDialogue";
+import { API_BASE } from "@/config/api.config";
 
 export const Header = () => {
   const navigate = useNavigate();
   const userData = useUserContext();
+  console.log(userData);
   const { t } = useTranslation();
 
+  // Error handling states
+  const [isMsg, setIsMsg] = useState(false);
+  const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
+  const [msgTitle, setMsgTitle] = useState("");
+  const [msgDescription, setMsgDescription] = useState("");
+
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
   const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
   const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
 
+  // Dialog control
+  const [isPwOpen, setPwOpen] = useState(false);
   const [userDialog, setUserDialog] = useState(false);
 
+  const changePassword = async () => {
+    if (newPassword !== confirmPassword) {
+      setMsgTitle(t("err_pw_change"));
+      setMsgDescription(t("pw_mismatch"));
+      setMsgStatus("error");
+      setIsMsg(true);
+      return;
+    }
+
+    const response = await fetch(`${API_BASE}/api/users/change-password`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${Cookies.get("token")}`,
+      },
+      body: JSON.stringify({ oldPassword, newPassword }),
+    });
+
+    if (!response.ok) {
+      setMsgTitle(t("err_pw_change"));
+      setMsgDescription(t("pw_mismatch"));
+      setMsgStatus("error");
+      setIsMsg(true);
+      return;
+    }
+
+    setMsgTitle(t("pw_success"));
+    setMsgDescription(t("pw_success_desc"));
+    setMsgStatus("success");
+    setIsMsg(true);
+
+    setOldPassword("");
+    setNewPassword("");
+    setConfirmPassword("");
+  };
+
   const username = userData.first_name ? userData.first_name : "N/A";
   const fullname = userData.first_name + " " + userData.last_name;
   const randomColor = [
@@ -318,7 +375,146 @@ export const Header = () => {
       </Flex>
 
       {/* User Info Dialoge */}
-      {userDialog && <UserDialogue setUserDialog={setUserDialog} fullname={fullname} randomColor={randomColor} />}
+      {userDialog && (
+        <Flex
+          position="fixed"
+          inset={0}
+          zIndex={1000}
+          align="center"
+          justify="center"
+          bg="blackAlpha.400"
+          backdropFilter="blur(6px)"
+        >
+          <Card.Root maxW="sm" w="full" mx={4}>
+            <Card.Header>
+              <Card.Title>
+                <Flex justify="center" align="center" w="100%">
+                  <Avatar.Root
+                    size={"2xl"}
+                    colorPalette={randomColor[Math.floor(Math.random() * 10)]}
+                  >
+                    <Avatar.Fallback name={fullname} />
+                  </Avatar.Root>
+                </Flex>
+              </Card.Title>
+              <Card.Description>{t("user-info-desc")}</Card.Description>
+            </Card.Header>
+            <Card.Body>
+              <Stack gap="4" w="full">
+                <Box as="dl">
+                  <Grid
+                    templateColumns="auto 1fr"
+                    rowGap={2}
+                    columnGap={4}
+                    alignItems="start"
+                  >
+                    <Text as="dt" fontWeight="bold" textAlign="left">
+                      {t("first-name")}:
+                    </Text>
+                    <Text as="dd">{userData.first_name}</Text>
+
+                    <Text as="dt" fontWeight="bold" textAlign="left">
+                      {t("last-name")}:
+                    </Text>
+                    <Text as="dd">{userData.last_name}</Text>
+
+                    <Text as="dt" fontWeight="bold" textAlign="left">
+                      {t("username")}:
+                    </Text>
+                    <Text as="dd">{userData.username}</Text>
+
+                    <Text as="dt" fontWeight="bold" textAlign="left">
+                      {t("role")}:
+                    </Text>
+                    <Text as="dd">{userData.role}</Text>
+
+                    <Text as="dt" fontWeight="bold" textAlign="left">
+                      {t("admin-status")}:
+                    </Text>
+                    <Text as="dd">
+                      {userData.is_admin ? t("yes") : t("no")}
+                    </Text>
+                  </Grid>
+                </Box>
+
+                <Button variant="solid" onClick={() => setPwOpen(true)}>
+                  <HStack gap={2}>
+                    <RotateCcwKey size={18} />
+                    <Text as="span">{t("change-password")}</Text>
+                  </HStack>
+                </Button>
+              </Stack>
+            </Card.Body>
+            <Card.Footer justifyContent="flex-end">
+              <Button variant="outline" onClick={() => setUserDialog(false)}>
+                {t("cancel")}
+              </Button>
+            </Card.Footer>
+          </Card.Root>
+        </Flex>
+      )}
+
+      {/* Passwort-Dialog (kontrolliert) */}
+      <Dialog.Root open={isPwOpen} onOpenChange={(e: any) => setPwOpen(e.open)}>
+        <Portal>
+          <Dialog.Backdrop />
+          <Dialog.Positioner>
+            <Dialog.Content maxW="md">
+              <Dialog.Header>
+                <Dialog.Title>{t("change-password")}</Dialog.Title>
+              </Dialog.Header>
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  changePassword();
+                }}
+              >
+                <Dialog.Body>
+                  <Stack gap={3}>
+                    <PasswordInput
+                      value={oldPassword}
+                      onChange={(e) => setOldPassword(e.target.value)}
+                      placeholder={t("old-password")}
+                    />
+                    <PasswordInput
+                      value={newPassword}
+                      onChange={(e) => setNewPassword(e.target.value)}
+                      placeholder={t("new-password")}
+                    />
+                    <PasswordInput
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      placeholder={t("confirm-password")}
+                    />
+                  </Stack>
+                </Dialog.Body>
+                <Dialog.Footer>
+                  <Stack w="100%" gap={3}>
+                    {isMsg && (
+                      <MyAlert
+                        status={msgStatus}
+                        title={msgTitle}
+                        description={msgDescription}
+                      />
+                    )}
+                    <HStack justify="flex-end" gap={2}>
+                      <Dialog.ActionTrigger asChild>
+                        <Button variant="outline">{t("cancel")}</Button>
+                      </Dialog.ActionTrigger>
+                      <Button type="submit" colorScheme="teal">
+                        {t("save")}
+                      </Button>
+                    </HStack>
+                  </Stack>
+                </Dialog.Footer>
+              </form>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton size="sm" />
+              </Dialog.CloseTrigger>
+            </Dialog.Content>
+          </Dialog.Positioner>
+        </Portal>
+      </Dialog.Root>
     </Stack>
   );
 };

FrontendV2/src/components/UserDialogue.tsx

@@ -1,220 +0,0 @@
-import {
-  Button,
-  Flex,
-  Stack,
-  Text,
-  CloseButton,
-  Dialog,
-  Portal,
-  HStack,
-  Box,
-  Avatar,
-  Card,
-  Grid,
-} from "@chakra-ui/react";
-import { PasswordInput } from "@/components/ui/password-input";
-import { RotateCcwKey } from "lucide-react";
-import MyAlert from "./myChakra/MyAlert";
-import { API_BASE } from "@/config/api.config";
-import { useUserContext } from "@/states/Context";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import Cookies from "js-cookie";
-
-type UserDialogueProps = {
-  setUserDialog: (value: boolean) => void;
-  fullname: string;
-  randomColor: string[];
-};
-
-export const UserDialogue = (props: UserDialogueProps) => {
-  const userData = useUserContext();
-  const { t } = useTranslation();
-  // Error handling states
-  const [isMsg, setIsMsg] = useState(false);
-  const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
-  const [msgTitle, setMsgTitle] = useState("");
-  const [msgDescription, setMsgDescription] = useState("");
-
-  const [oldPassword, setOldPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-
-  // Dialog control
-  const [isPwOpen, setPwOpen] = useState(false);
-
-  const changePassword = async () => {
-    if (newPassword !== confirmPassword) {
-      setMsgTitle(t("err_pw_change"));
-      setMsgDescription(t("pw_mismatch"));
-      setMsgStatus("error");
-      setIsMsg(true);
-      return;
-    }
-
-    const response = await fetch(`${API_BASE}/api/users/change-password`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ oldPassword, newPassword }),
-    });
-
-    if (!response.ok) {
-      setMsgTitle(t("err_pw_change"));
-      setMsgDescription(t("pw_mismatch"));
-      setMsgStatus("error");
-      setIsMsg(true);
-      return;
-    }
-
-    setMsgTitle(t("pw_success"));
-    setMsgDescription(t("pw_success_desc"));
-    setMsgStatus("success");
-    setIsMsg(true);
-
-    setOldPassword("");
-    setNewPassword("");
-    setConfirmPassword("");
-  };
-
-  return (
-    <Flex
-      position="fixed"
-      inset={0}
-      zIndex={1000}
-      align="center"
-      justify="center"
-      bg="blackAlpha.400"
-      backdropFilter="blur(6px)"
-    >
-      <Card.Root maxW="sm" w="full" mx={4}>
-        <Card.Header>
-          <Card.Title>
-            <Flex justify="center" align="center" w="100%">
-              <Avatar.Root
-                size={"2xl"}
-                colorPalette={props.randomColor[Math.floor(Math.random() * 10)]}
-              >
-                <Avatar.Fallback name={props.fullname} />
-              </Avatar.Root>
-            </Flex>
-          </Card.Title>
-          <Card.Description>{t("user-info-desc")}</Card.Description>
-        </Card.Header>
-        <Card.Body>
-          <Stack gap="4" w="full">
-            <Box as="dl">
-              <Grid
-                templateColumns="auto 1fr"
-                rowGap={2}
-                columnGap={4}
-                alignItems="start"
-              >
-                <Text as="dt" fontWeight="bold" textAlign="left">
-                  {t("first-name")}:
-                </Text>
-                <Text as="dd">{userData.first_name}</Text>
-
-                <Text as="dt" fontWeight="bold" textAlign="left">
-                  {t("last-name")}:
-                </Text>
-                <Text as="dd">{userData.last_name}</Text>
-
-                <Text as="dt" fontWeight="bold" textAlign="left">
-                  {t("username")}:
-                </Text>
-                <Text as="dd">{userData.username}</Text>
-
-                <Text as="dt" fontWeight="bold" textAlign="left">
-                  {t("role")}:
-                </Text>
-                <Text as="dd">{userData.role}</Text>
-
-                <Text as="dt" fontWeight="bold" textAlign="left">
-                  {t("admin-status")}:
-                </Text>
-                <Text as="dd">{userData.is_admin ? t("yes") : t("no")}</Text>
-              </Grid>
-            </Box>
-
-            <Button variant="solid" onClick={() => setPwOpen(true)}>
-              <HStack gap={2}>
-                <RotateCcwKey size={18} />
-                <Text as="span">{t("change-password")}</Text>
-              </HStack>
-            </Button>
-          </Stack>
-        </Card.Body>
-        <Card.Footer justifyContent="flex-end">
-          <Button variant="outline" onClick={() => props.setUserDialog(false)}>
-            {t("cancel")}
-          </Button>
-        </Card.Footer>
-      </Card.Root>
-
-      {/* Passwort-Dialog (kontrolliert) */}
-      <Dialog.Root open={isPwOpen} onOpenChange={(e: any) => setPwOpen(e.open)}>
-        <Portal>
-          <Dialog.Backdrop />
-          <Dialog.Positioner>
-            <Dialog.Content maxW="md">
-              <Dialog.Header>
-                <Dialog.Title>{t("change-password")}</Dialog.Title>
-              </Dialog.Header>
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  changePassword();
-                }}
-              >
-                <Dialog.Body>
-                  <Stack gap={3}>
-                    <PasswordInput
-                      value={oldPassword}
-                      onChange={(e) => setOldPassword(e.target.value)}
-                      placeholder={t("old-password")}
-                    />
-                    <PasswordInput
-                      value={newPassword}
-                      onChange={(e) => setNewPassword(e.target.value)}
-                      placeholder={t("new-password")}
-                    />
-                    <PasswordInput
-                      value={confirmPassword}
-                      onChange={(e) => setConfirmPassword(e.target.value)}
-                      placeholder={t("confirm-password")}
-                    />
-                  </Stack>
-                </Dialog.Body>
-                <Dialog.Footer>
-                  <Stack w="100%" gap={3}>
-                    {isMsg && (
-                      <MyAlert
-                        status={msgStatus}
-                        title={msgTitle}
-                        description={msgDescription}
-                      />
-                    )}
-                    <HStack justify="flex-end" gap={2}>
-                      <Dialog.ActionTrigger asChild>
-                        <Button variant="outline">{t("cancel")}</Button>
-                      </Dialog.ActionTrigger>
-                      <Button type="submit" colorScheme="teal">
-                        {t("save")}
-                      </Button>
-                    </HStack>
-                  </Stack>
-                </Dialog.Footer>
-              </form>
-              <Dialog.CloseTrigger asChild>
-                <CloseButton size="sm" />
-              </Dialog.CloseTrigger>
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
-    </Flex>
-  );
-};

FrontendV2/src/utils/i18n/locales/de/de.json

@@ -63,7 +63,7 @@
     "timezone-info": "Die angezeigten Daten und Uhrzeiten werden in deutscher Zeitzone dargestellt und müssen auch so eingegeben werden.",
     "optional-note": "Optionale Notiz",
     "note": "Notiz",
-    "user-info-desc": "Hier können Sie Ihre persönlichen Informationen einsehen und das Passwort ändern. Falls Sie weitere Änderungen benötigen, wenden Sie sich bitte an einen Administrator.",
+    "user-info-desc": "Hier können Sie Ihre persönlichen Informationen einsehen und ändern.",
     "role": "Rolle",
     "admin-status": "Admin-Status",
     "first-name": "Vorname",

FrontendV2/src/utils/i18n/locales/en/en.json

@@ -63,7 +63,7 @@
     "timezone-info": "The displayed dates and times are shown in Berlin timezone and must also be entered as such.",
     "optional-note": "Optional note",
     "note": "Note",
-    "user-info-desc": "Here you can view your personal information and change your password. If you need to make further changes, please contact an administrator.",
+    "user-info-desc": "Here you can view and edit your personal information.",
     "role": "Role",
     "admin-status": "Admin status",
     "first-name": "First name",

admin/nginx.conf

@@ -9,14 +9,6 @@ server {
     try_files $uri $uri/ /index.html;
   }
 
-  location = /backend {
-    return 301 /backend/;
-  }
-
-  location /backend/ {
-    proxy_pass http://borrow_system-backend_v2:8004/;
-  }
-
   location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
     expires 1y;
     access_log off;

admin/src/components/ItemTable.tsx

@@ -193,12 +193,7 @@ const ItemTable: React.FC = () => {
 
       {/* make table fill available width, like UserTable */}
       {!isLoading && (
-        <Table.Root
-          size="sm"
-          striped
-          w="100%"
-          style={{ tableLayout: "auto" }} // Spalten nach Content
-        >
+        <Table.Root size="sm" striped w="100%" style={{ tableLayout: "auto" }}>
           <Table.Header>
             <Table.Row>
               <Table.ColumnHeader>
@@ -213,10 +208,10 @@ const ItemTable: React.FC = () => {
               <Table.ColumnHeader>
                 <strong>Im Schließfach</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+              <Table.ColumnHeader>
                 <strong>Schließfachnummer</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+              <Table.ColumnHeader>
                 <strong>Schlüssel</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
@@ -231,7 +226,7 @@ const ItemTable: React.FC = () => {
               <Table.ColumnHeader>
                 <strong>Dav **</strong>
               </Table.ColumnHeader>
-              <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+              <Table.ColumnHeader>
                 <strong>Aktionen</strong>
               </Table.ColumnHeader>
             </Table.Row>
@@ -319,7 +314,7 @@ const ItemTable: React.FC = () => {
                 <Table.Cell>{formatDateTime(item.entry_updated_at)}</Table.Cell>
                 <Table.Cell>{item.last_borrowed_person}</Table.Cell>
                 <Table.Cell>{item.currently_borrowing}</Table.Cell>
-                <Table.Cell whiteSpace="nowrap">
+                <Table.Cell>
                   <Button
                     onClick={() =>
                       handleEditItems(

docker-compose.yml

@@ -16,6 +16,8 @@ services:
   backend_v2:
     container_name: borrow_system-backend_v2
     build: ./backendV2
+    ports:
+      - "8004:8004"
     environment:
       NODE_ENV: production
       DB_HOST: mysql_v2

next-js/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# 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*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

next-js/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

next-js/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

next-js/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

next-js/app/page.tsx

@@ -0,0 +1,65 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={100}
+          height={20}
+          priority
+        />
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            To get started, edit the page.tsx file.
+          </h1>
+          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            Looking for a starting point or more instructions? Head over to{" "}
+            <a
+              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Templates
+            </a>{" "}
+            or the{" "}
+            <a
+              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Learning
+            </a>{" "}
+            center.
+          </p>
+        </div>
+        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          <a
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={16}
+              height={16}
+            />
+            Deploy Now
+          </a>
+          <a
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid px-5 transition-colors hover:border-transparent dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Documentation
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}

next-js/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next-js/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactCompiler: true,
+};
+
+export default nextConfig;

next-js/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "next-js",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.0.5",
+    "react": "19.2.0",
+    "react-dom": "19.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.5",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

next-js/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

next-js/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

next-js/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

next-js/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

next-js/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

next-js/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

next-js/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}