chore: add all the code from original repo

.env.example

@@ -0,0 +1,2 @@
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/postgres
+EMAIL=example@example.com

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/consistent-type-definitions": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error"
+  }
+}

.gitignore

@@ -1,130 +1,38 @@
-# Logs
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-logs
+
-*.log
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
+# local env files
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+.env*.local
 
-# Runtime data
+# vercel
-pids
+.vercel
-*.pid
-*.seed
-*.pid.lock
 
-# Directory for instrumented libs generated by jscoverage/JSCover
+# typescript
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
 *.tsbuildinfo
+next-env.d.ts
 
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
 .env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn audit
+yarn format
+yarn lint
+yarn typecheck
+yarn build

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "printWidth": 80
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:20
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN yarn
+
+COPY . .
+
+RUN yarn build
+
+EXPOSE 3000
+
+CMD [ "yarn", "start" ]

README.md

@@ -0,0 +1,31 @@
+## Commands
+
+Copy .env.example to .env
+
+```bash
+cp .env.example .env
+```
+
+Run database on Docker
+
+```bash
+docker-compose up
+```
+
+Apply Prisma migrations
+
+```bash
+yarn migrate
+```
+
+Generate Prisma client
+
+```bash
+yarn generate
+```
+
+Run the server
+
+```bash
+yarn dev
+```

app/components/Dashboard/CreateItem/CreateItemDialog.tsx

@@ -0,0 +1,68 @@
+import { TagsAction } from '@/components/Settings/Tags/actions/TagsAction';
+import { Button, Dialog, DialogContent, DialogTitle } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { useFormState } from 'react-dom';
+import { Tags } from '../../../../data/types';
+import { CreateItemAction } from './actions/CreateItemAction';
+import { CreateItemForm } from './CreateItemForm';
+
+interface CreateItemProps {
+  open: boolean;
+  close: (created: boolean) => void;
+  profile: string | undefined;
+}
+
+export default function CreateItemDialog({
+  open,
+  close,
+  profile
+}: CreateItemProps) {
+  const [tags, setTags] = useState<Tags>([]);
+
+  const [formState, formAction] = useFormState(CreateItemAction, {
+    open: true,
+    profile
+  });
+
+  useEffect(() => {
+    const updateTags = async () => {
+      if (profile) {
+        try {
+          const updatedTags = await TagsAction({ selectedProfile: profile });
+          setTags(updatedTags);
+        } catch (error) {
+          console.error("Couldn't fetch tags.");
+        }
+      }
+    };
+
+    updateTags();
+  }, [profile]);
+
+  useEffect(() => {
+    if (!formState.open) {
+      close(true);
+    }
+  }, [open, close, formState]);
+
+  const handleClose = async () => {
+    close(false);
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose}>
+      <DialogTitle sx={{ alignSelf: 'center' }}>Create a new item</DialogTitle>
+      <DialogContent sx={{ width: '400px' }}>
+        <CreateItemForm profile={profile} formAction={formAction} tags={tags} />
+        <Button
+          variant="outlined"
+          color="primary"
+          fullWidth
+          onClick={handleClose}
+        >
+          Close
+        </Button>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/components/Dashboard/CreateItem/CreateItemForm.tsx

@@ -0,0 +1,89 @@
+import { CreateButton } from '@/components/UI/CreateButton';
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Stack,
+  TextField
+} from '@mui/material';
+import { Currency } from '@prisma/client';
+import { useState } from 'react';
+import { Tag } from '../../../../data/types';
+
+interface CreateItemProps {
+  profile: string | undefined;
+  formAction: (payload: FormData) => void;
+  tags: Tag[];
+}
+
+export function CreateItemForm({ profile, formAction, tags }: CreateItemProps) {
+  const [selectedTag, setSelectedTag] = useState('');
+
+  const handleTagChange = (event: SelectChangeEvent<string>) => {
+    setSelectedTag(event.target.value as string);
+  };
+
+  return (
+    <form action={formAction}>
+      <Stack spacing={2} my={2}>
+        <TextField name="name" label="Item" variant="outlined" required />
+        <TextField name="description" label="Description" variant="outlined" />
+        <TextField
+          name="price"
+          label="Price"
+          variant="outlined"
+          required
+          type="number"
+          inputProps={{ defaultValue: 0, step: 0.01, min: 0 }}
+        />
+        <FormControl variant="outlined">
+          <InputLabel id="currency-label">Currency</InputLabel>
+          <Select
+            name="currency"
+            label="Currency"
+            labelId="currency-label"
+            value={Currency.DKK}
+          >
+            {Object.values(Currency).map((value) => (
+              <MenuItem key={value} value={value}>
+                {value}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        {profile && (
+          <FormControl variant="outlined">
+            <InputLabel id="tag-label">Tag</InputLabel>
+            <Select
+              name="tag"
+              label="Tag"
+              labelId="tag-label"
+              value={selectedTag} // Use the state here
+              onChange={handleTagChange}
+            >
+              {tags.map((tag) => (
+                <MenuItem key={tag.id} value={tag.id}>
+                  {tag.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+        <TextField name="body" label="Comment" variant="outlined" />
+        <TextField
+          name="score"
+          label="Score"
+          variant="outlined"
+          type="number"
+          inputProps={{ step: 1, min: 0, max: 10 }}
+        />
+        <FormControlLabel control={<Checkbox name="regret" />} label="Regret" />
+        <CreateButton />
+      </Stack>
+    </form>
+  );
+}

app/components/Dashboard/CreateItem/actions/CreateItemAction.ts

@@ -0,0 +1,76 @@
+'use server';
+
+import { nanoid } from 'nanoid';
+import { initializeUser } from '../../../../../data/initializeUser';
+import { CreateItemFormSchema } from '../../../../../data/types';
+import prisma from '../../../../../prisma/prisma';
+
+interface CreateItemActionProps {
+  open: boolean;
+  profile?: string;
+  error?: string;
+}
+
+export async function CreateItemAction(
+  { profile }: CreateItemActionProps,
+  formData: FormData
+) {
+  await initializeUser();
+
+  const profileId = profile ?? (await prisma.profile.findFirst())?.id;
+
+  const formDataObj = Object.fromEntries(formData.entries());
+
+  const validatedBody = CreateItemFormSchema.safeParse(formDataObj);
+
+  if (!validatedBody.success || !profileId) {
+    throw new Error('Bad request');
+  }
+
+  const { name, description, price, currency, tag, body, score, regret } =
+    validatedBody.data;
+
+  const newId = nanoid();
+
+  try {
+    await prisma.$transaction([
+      prisma.item.create({
+        data: {
+          id: newId,
+          name,
+          description,
+          price,
+          currency,
+          Profile: {
+            connect: {
+              id: profileId
+            }
+          },
+          Tag: tag
+            ? {
+                connect: {
+                  id: tag
+                }
+              }
+            : undefined
+        }
+      }),
+      prisma.itemComment.create({
+        data: {
+          body,
+          score,
+          regret,
+          Item: {
+            connect: {
+              id: newId
+            }
+          }
+        }
+      })
+    ]);
+  } catch (error) {
+    throw new Error(`Failed to create item`);
+  }
+
+  return { open: false, profile: profileId };
+}

app/components/Dashboard/Dashboard.tsx

@@ -0,0 +1,5 @@
+import ItemsTable from './Items/ItemsTable';
+
+export default function Dashboard() {
+  return <ItemsTable />;
+}

app/components/Dashboard/ItemDialog/CreateComment/CreateComment.tsx

@@ -0,0 +1,44 @@
+import { CreateButton } from '@/components/UI/CreateButton';
+import { Checkbox, FormControlLabel, Stack, TextField } from '@mui/material';
+import { nanoid } from 'nanoid';
+import { useEffect } from 'react';
+import { useFormState } from 'react-dom';
+import { CreateCommentAction } from './actions/CreateCommentAction';
+
+interface CreateCommentProps {
+  itemId: string;
+  setFormKey: (key: string) => void;
+}
+
+export default function CreateComment({
+  itemId,
+  setFormKey
+}: CreateCommentProps) {
+  const [formState, formAction] = useFormState(CreateCommentAction, {
+    itemId,
+    clear: false
+  });
+
+  useEffect(() => {
+    if (formState.clear) {
+      setFormKey(nanoid());
+    }
+  }, [setFormKey, formState]);
+
+  return (
+    <form action={formAction}>
+      <Stack spacing={2} marginY={2}>
+        <TextField name="body" label="Comment" variant="outlined" required />
+        <TextField
+          name="score"
+          label="Score"
+          variant="outlined"
+          type="number"
+          inputProps={{ step: 1, min: 0, max: 10 }}
+        />
+        <FormControlLabel name="regret" control={<Checkbox />} label="Regret" />
+        <CreateButton />
+      </Stack>
+    </form>
+  );
+}

app/components/Dashboard/ItemDialog/CreateComment/actions/CreateCommentAction.ts

@@ -0,0 +1,44 @@
+'use server';
+
+import { CreateCommentFormSchema } from '../../../../../../data/types';
+import prisma from '../../../../../../prisma/prisma';
+
+interface ItemDialogActionProps {
+  clear: boolean;
+  itemId: string;
+  error?: string;
+}
+
+export async function CreateCommentAction(
+  { itemId }: ItemDialogActionProps,
+  formData: FormData
+) {
+  const formDataObj = Object.fromEntries(formData.entries());
+
+  const validatedBody = CreateCommentFormSchema.safeParse(formDataObj);
+
+  if (!validatedBody.success) {
+    throw new Error('Bad request');
+  }
+
+  const { body, score, regret } = validatedBody.data;
+
+  try {
+    await prisma.itemComment.create({
+      data: {
+        body,
+        score,
+        regret,
+        Item: {
+          connect: {
+            id: itemId
+          }
+        }
+      }
+    });
+  } catch (error) {
+    throw new Error(`Failed to create comment`);
+  }
+
+  return { clear: true, itemId };
+}

app/components/Dashboard/ItemDialog/ItemData.tsx

@@ -0,0 +1,39 @@
+import { Card, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import { Item, ItemComment } from '../../../../data/types';
+
+interface ItemDataProps {
+  item: Item;
+  comments: ItemComment[];
+}
+
+export default function ItemData({ item, comments }: ItemDataProps) {
+  return (
+    <Box>
+      <Typography>Description: {item.description}</Typography>
+      <Typography>
+        Price: {Number(item.price).toFixed(2)} {item.currency}
+      </Typography>
+      <Box
+        sx={{
+          height: 250,
+          overflowY: 'auto'
+        }}
+      >
+        {comments &&
+          comments.map((comment) => (
+            <Card key={comment.id} sx={{ margin: '5px', padding: '10px' }}>
+              <Typography>Comment: {comment.body}</Typography>
+              <Typography>Score: {comment.score}</Typography>
+              <Typography>Regret: {comment.regret ? 'Yes' : 'No'}</Typography>
+              <Typography>
+                Created:{' '}
+                {comment.createdAt &&
+                  new Date(comment.createdAt).toLocaleString()}
+              </Typography>
+            </Card>
+          ))}
+      </Box>
+    </Box>
+  );
+}

app/components/Dashboard/ItemDialog/ItemDialog.tsx

@@ -0,0 +1,53 @@
+import { Button, Dialog, DialogContent, DialogTitle } from '@mui/material';
+import { nanoid } from 'nanoid';
+import { useCallback, useEffect, useState } from 'react';
+import { Item, ItemComment } from '../../../../data/types';
+import { ItemsTableRowAction } from '../Items/ItemsTableRowAction';
+import CreateComment from './CreateComment/CreateComment';
+import ItemData from './ItemData';
+
+interface ItemDialogProps {
+  item: Item;
+  open: boolean;
+  handleClose: () => void;
+}
+
+export default function ItemDialog({
+  item,
+  open,
+  handleClose
+}: ItemDialogProps) {
+  const [comments, setComments] = useState<ItemComment[]>([]);
+  const [formKey, setFormKey] = useState(() => nanoid());
+
+  const fetchData = useCallback(async () => {
+    try {
+      const comments = await ItemsTableRowAction(item.id);
+      setComments(comments);
+    } catch (error) {
+      console.error("Couldn't fetch comments.");
+    }
+  }, [item]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData, formKey]);
+
+  return (
+    <Dialog open={open} onClose={handleClose}>
+      <DialogTitle sx={{ alignSelf: 'center' }}>Item: {item.name}</DialogTitle>
+      <DialogContent sx={{ width: 400 }}>
+        <ItemData item={item} comments={comments} />
+        <CreateComment key={formKey} itemId={item.id} setFormKey={setFormKey} />
+        <Button
+          variant="outlined"
+          color="primary"
+          onClick={handleClose}
+          sx={{ width: '100%' }}
+        >
+          Close
+        </Button>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/components/Dashboard/Items/ItemsTable.tsx

@@ -0,0 +1,202 @@
+import { ProfilesAction } from '@/components/Settings/Profiles/actions/ProfilesAction';
+import { ProfileContext } from '@/contexts/ProfileContext';
+import {
+  Box,
+  Button,
+  MenuItem,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow
+} from '@mui/material';
+import { nanoid } from 'nanoid';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Item, Items, Profiles } from '../../../../data/types';
+import CreateItemDialog from '../CreateItem/CreateItemDialog';
+import ItemDialog from '../ItemDialog/ItemDialog';
+import { ItemsTableAction } from './actions/ItemsTableAction';
+import ItemsTableRow from './ItemsTableRow';
+
+export default function ItemsTable() {
+  const [items, setItems] = useState<Items>([]);
+  const [take, setTake] = useState<number>(20);
+  const tableRef = useRef<HTMLDivElement>(null);
+  const [openCreateDialog, setOpenCreateDialog] = useState(false);
+  const [openItemDialog, setOpenItemDialog] = useState(false);
+  const [formKey, setFormKey] = useState(() => nanoid());
+  const [profiles, setProfiles] = useState<Profiles>([]);
+  const { profile, setProfile } = useContext(ProfileContext);
+  const [currentItem, setCurrentItem] = useState<Item | null>(null);
+
+  const handleUpdateProfiles = useCallback(async () => {
+    const updatedProfiles = await ProfilesAction();
+    setProfiles(updatedProfiles);
+  }, []);
+
+  useEffect(() => {
+    handleUpdateProfiles();
+  }, [handleUpdateProfiles]);
+
+  const handleUpdateItems = useCallback(
+    async (id: string) => {
+      try {
+        const updatedItems = await ItemsTableAction({
+          take,
+          profile: id
+        });
+        setItems(updatedItems);
+      } catch (error) {
+        console.error("Couldn't fetch items.");
+      }
+    },
+    [take]
+  );
+
+  const handleFetchItems = useCallback(
+    (event: SelectChangeEvent<string>) => {
+      handleUpdateItems(event.target.value);
+      setFormKey(nanoid());
+      setProfile(event.target.value);
+    },
+    [handleUpdateItems, setProfile]
+  );
+
+  useEffect(() => {
+    if (profile) {
+      handleUpdateItems(profile);
+      setFormKey(nanoid());
+    }
+  }, [profile, handleUpdateItems]);
+
+  useEffect(() => {
+    const handleScroll = (event: Event) => {
+      const target = event.target as HTMLDivElement;
+      const bottom =
+        target.scrollHeight - target.scrollTop === target.clientHeight;
+      if (bottom) {
+        setTake((prevTake) => prevTake + 20);
+      }
+    };
+
+    const tableElement = tableRef.current;
+    if (tableElement) {
+      tableElement.addEventListener('scroll', handleScroll);
+
+      return () => {
+        tableElement.removeEventListener('scroll', handleScroll);
+      };
+    }
+  }, [take]);
+
+  const handleCreateItemDialog = () => {
+    setOpenCreateDialog(true);
+  };
+
+  const handleCloseCreateDialog = async (created: boolean) => {
+    setFormKey(nanoid());
+    setOpenCreateDialog(false);
+
+    if (created) {
+      const updatedItems = await ItemsTableAction({
+        take,
+        profile
+      });
+
+      setItems(updatedItems);
+    }
+  };
+
+  const handleOpenItemDialog = (item: Item) => {
+    setCurrentItem(item);
+    setOpenItemDialog(true);
+  };
+
+  const handleCloseItemDialog = async () => {
+    setOpenItemDialog(false);
+  };
+
+  return (
+    <Paper sx={{ width: '100%' }}>
+      <Stack direction="row" spacing={2} padding={2}>
+        {profiles.length > 0 && (
+          <Select
+            labelId="profile-label"
+            sx={{ width: '200px' }}
+            onChange={handleFetchItems}
+            value={profile ?? ''}
+          >
+            {profiles.map((profile) => (
+              <MenuItem key={profile.id} value={profile.id}>
+                {profile.name}
+              </MenuItem>
+            ))}
+          </Select>
+        )}
+        <Button
+          variant="outlined"
+          color="primary"
+          type="submit"
+          onClick={handleCreateItemDialog}
+          sx={{ width: '200px' }}
+        >
+          Create Item
+        </Button>
+      </Stack>
+      <Box
+        sx={{
+          height: 'calc(100vh - 50px)',
+          overflowY: 'scroll',
+          padding: 2,
+          paddingTop: 0
+        }}
+        ref={tableRef}
+      >
+        <Table
+          stickyHeader
+          sx={{
+            width: '100%'
+          }}
+        >
+          <TableHead>
+            <TableRow sx={{ '& th': { textAlign: 'center' } }}>
+              <TableCell>Name</TableCell>
+              <TableCell>Description</TableCell>
+              <TableCell>Price</TableCell>
+              <TableCell>Currency</TableCell>
+              <TableCell>Tag</TableCell>
+              <TableCell>Date</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {items &&
+              items.map((item) => (
+                <ItemsTableRow
+                  key={item.id}
+                  item={item}
+                  onClick={handleOpenItemDialog}
+                />
+              ))}
+          </TableBody>
+        </Table>
+      </Box>
+      {currentItem && (
+        <ItemDialog
+          item={currentItem}
+          open={openItemDialog}
+          handleClose={handleCloseItemDialog}
+        />
+      )}
+      <CreateItemDialog
+        key={formKey}
+        open={openCreateDialog}
+        close={handleCloseCreateDialog}
+        profile={profile}
+      />
+    </Paper>
+  );
+}

app/components/Dashboard/Items/ItemsTableRow.tsx

@@ -0,0 +1,26 @@
+import { TableCell, TableRow } from '@mui/material';
+import { Item } from '../../../../data/types';
+
+interface ItemsTableRowProps {
+  item: Item;
+  onClick: (item: Item) => void;
+}
+
+export default function ItemsTableRow({ item, onClick }: ItemsTableRowProps) {
+  return (
+    <TableRow
+      sx={{ '& td': { textAlign: 'center' } }}
+      key={item.id}
+      onClick={() => onClick(item)}
+    >
+      <TableCell>{item.name}</TableCell>
+      <TableCell>{item.description}</TableCell>
+      <TableCell>{Number(item.price).toFixed(2)}</TableCell>
+      <TableCell>{item.currency}</TableCell>
+      <TableCell>{item.tag}</TableCell>
+      <TableCell>
+        {item.createdAt && new Date(item.createdAt).toLocaleDateString()}
+      </TableCell>
+    </TableRow>
+  );
+}

app/components/Dashboard/Items/ItemsTableRowAction.ts

@@ -0,0 +1,28 @@
+'use server';
+
+import { z } from 'zod';
+import { ItemComment } from '../../../../data/types';
+import prisma from '../../../../prisma/prisma';
+
+export async function ItemsTableRowAction(id: string) {
+  const validatedId = z.string().safeParse(id);
+
+  if (!validatedId.success) {
+    throw new Error('Bad request');
+  }
+
+  try {
+    const itemWithComments = await prisma.item.findFirstOrThrow({
+      where: {
+        id: validatedId.data
+      },
+      include: {
+        ItemComment: true
+      }
+    });
+
+    return itemWithComments.ItemComment as ItemComment[];
+  } catch (error) {
+    throw new Error('Failed to find item comments');
+  }
+}

app/components/Dashboard/Items/actions/ItemsTableAction.ts

@@ -0,0 +1,48 @@
+'use server';
+
+import { Items } from '../../../../../data/types';
+import prisma from '../../../../../prisma/prisma';
+
+interface ItemsTableActionProps {
+  take: number;
+  profile: string | undefined;
+}
+
+export async function ItemsTableAction({
+  take,
+  profile
+}: ItemsTableActionProps) {
+  if (!profile) {
+    return [] as Items;
+  }
+
+  try {
+    const items = await prisma.item.findMany({
+      where: {
+        profileId: profile
+      },
+      orderBy: {
+        createdAt: 'desc'
+      },
+      include: {
+        Tag: {
+          select: {
+            name: true
+          }
+        }
+      },
+      take
+    });
+
+    const itemsWithTag = items.map((item) => {
+      return {
+        ...item,
+        tag: item?.Tag?.name
+      };
+    });
+
+    return itemsWithTag as Items;
+  } catch (error) {
+    throw new Error('Failed to find items');
+  }
+}

app/components/Settings/Profiles/ProfilesTable.tsx

@@ -0,0 +1,101 @@
+import {
+  Box,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography
+} from '@mui/material';
+import { nanoid } from 'nanoid';
+import { Dispatch, useEffect, useState } from 'react';
+import { useFormState } from 'react-dom';
+import { Profiles } from '../../../../data/types';
+import { CreateProfileAction } from './actions/CreateProfileAction';
+import { ProfilesAction } from './actions/ProfilesAction';
+import ProfilesTableRow from './ProfilesTableRow';
+
+interface ProfilesTableProps {
+  selectedProfile: string | undefined;
+  setSelectedProfile: Dispatch<string | undefined>;
+}
+
+export default function ProfilesTable({
+  selectedProfile,
+  setSelectedProfile
+}: ProfilesTableProps) {
+  const [profiles, setProfiles] = useState<Profiles>([]);
+  const [formKey, setFormKey] = useState(() => nanoid());
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const [formState, formAction] = useFormState(CreateProfileAction, {
+    clear: false
+  });
+
+  useEffect(() => {
+    const fetchProfiles = async () => {
+      try {
+        const profiles = await ProfilesAction();
+        setProfiles(profiles);
+      } catch (error) {
+        console.error("Couldn't fetch profiles.");
+      }
+    };
+
+    if (formState.clear) {
+      setFormKey(nanoid());
+    }
+
+    fetchProfiles();
+  }, [formState, refreshKey]);
+
+  return (
+    <Stack
+      sx={{
+        spacing: 2,
+        padding: 2
+      }}
+    >
+      <Typography variant="h6">Profiles</Typography>
+      <Box>
+        <form key={formKey} action={formAction}>
+          <TextField fullWidth name="name" placeholder="Add new profile" />
+        </form>
+        <Box
+          sx={{
+            maxHeight: 'calc(100vh - 200px)',
+            overflow: 'auto'
+          }}
+        >
+          <Table
+            stickyHeader
+            sx={{
+              width: '100%'
+            }}
+          >
+            <TableHead>
+              <TableRow sx={{ '& th': { textAlign: 'center' } }}>
+                <TableCell>Name</TableCell>
+                <TableCell>Delete</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {profiles &&
+                profiles.map((profile) => (
+                  <ProfilesTableRow
+                    key={profile.id}
+                    profile={profile}
+                    selected={selectedProfile}
+                    setSelected={setSelectedProfile}
+                    onDelete={() => setRefreshKey((prevKey) => prevKey + 1)}
+                  />
+                ))}
+            </TableBody>
+          </Table>
+        </Box>
+      </Box>
+    </Stack>
+  );
+}

app/components/Settings/Profiles/ProfilesTableRow.tsx

@@ -0,0 +1,81 @@
+import { Button, TableCell, TableRow, TextField } from '@mui/material';
+import { Dispatch, useState } from 'react';
+import { Profile } from '../../../../data/types';
+import { DeleteProfileAction } from './actions/DeleteProfileAction';
+import { UpdateProfileAction } from './actions/UpdateProfileAction';
+
+interface ProfilesTableRowProps {
+  profile: Profile;
+  selected: string | undefined;
+  setSelected: Dispatch<string | undefined>;
+  onDelete: () => void;
+}
+
+export default function ProfilesTableRow({
+  profile,
+  selected,
+  setSelected,
+  onDelete
+}: ProfilesTableRowProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [name, setName] = useState(profile.name);
+
+  const handleClick = () => {
+    setSelected(profile.id);
+  };
+
+  const handleDoubleClick = () => {
+    setIsEditing(true);
+  };
+
+  const handleBlur = async () => {
+    setIsEditing(false);
+
+    try {
+      await UpdateProfileAction({
+        id: profile.id,
+        name
+      });
+    } catch (error) {
+      console.error("Couldn't update profile.");
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const handleDelete = async () => {
+    try {
+      await DeleteProfileAction(profile.id);
+      onDelete();
+    } catch (error) {
+      console.error("Couldn't delete profile.");
+    }
+  };
+
+  return (
+    <TableRow key={profile.id}>
+      <TableCell
+        align="center"
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+        sx={{ bgcolor: profile.id === selected ? 'lightblue' : 'inherit' }}
+      >
+        {isEditing ? (
+          <TextField
+            value={name}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            autoFocus
+          />
+        ) : (
+          name
+        )}
+      </TableCell>
+      <TableCell align="center">
+        <Button onClick={handleDelete}>Delete</Button>
+      </TableCell>
+    </TableRow>
+  );
+}

app/components/Settings/Profiles/actions/CreateProfileAction.ts

@@ -0,0 +1,53 @@
+'use server';
+
+import { initializeUser } from '../../../../../data/initializeUser';
+import { CreateProfileFormSchema } from '../../../../../data/types';
+import prisma from '../../../../../prisma/prisma';
+
+interface CreateItemActionProps {
+  clear: boolean;
+  error?: string;
+}
+
+export async function CreateProfileAction(
+  _: CreateItemActionProps,
+  formData: FormData
+) {
+  const formDataObj = Object.fromEntries(formData.entries());
+
+  const validatedBody = CreateProfileFormSchema.safeParse(formDataObj);
+
+  if (!validatedBody.success) {
+    throw new Error('Bad request');
+  }
+
+  const user = await initializeUser();
+
+  try {
+    const existingProfile = await prisma.profile.findFirst({
+      where: {
+        userId: user.id,
+        name: validatedBody.data.name
+      }
+    });
+
+    if (existingProfile) {
+      return { clear: false };
+    }
+  } catch (error) {
+    throw new Error(`Failed to find profile`);
+  }
+
+  try {
+    await prisma.profile.create({
+      data: {
+        userId: user.id,
+        name: validatedBody.data.name
+      }
+    });
+
+    return { clear: true };
+  } catch (error) {
+    throw new Error(`Failed to create profile`);
+  }
+}

app/components/Settings/Profiles/actions/DeleteProfileAction.ts

@@ -0,0 +1,22 @@
+'use server';
+
+import { z } from 'zod';
+import prisma from '../../../../../prisma/prisma';
+
+export async function DeleteProfileAction(id: string) {
+  const validatedBody = z.string().safeParse(id);
+
+  if (!validatedBody.success) {
+    throw new Error('Bad request');
+  }
+
+  try {
+    await prisma.profile.delete({
+      where: {
+        id
+      }
+    });
+  } catch (error) {
+    throw new Error(`Failed to delete profile`);
+  }
+}

app/components/Settings/Profiles/actions/ProfilesAction.ts

@@ -0,0 +1,23 @@
+'use server';
+
+import { initializeUser } from '../../../../../data/initializeUser';
+import prisma from '../../../../../prisma/prisma';
+
+export async function ProfilesAction() {
+  const user = await initializeUser();
+
+  try {
+    const profiles = await prisma.profile.findMany({
+      where: {
+        userId: user.id
+      },
+      orderBy: {
+        createdAt: 'desc'
+      }
+    });
+
+    return profiles;
+  } catch (error) {
+    throw new Error('Failed to find profiles');
+  }
+}

app/components/Settings/Profiles/actions/UpdateProfileAction.ts

@@ -0,0 +1,31 @@
+'use server';
+
+import { z } from 'zod';
+import prisma from '../../../../../prisma/prisma';
+
+interface ProfileActionProps {
+  id: string;
+  name: string;
+  error?: string;
+}
+
+export async function UpdateProfileAction({ id, name }: ProfileActionProps) {
+  const validatedBody = z.string().safeParse(name);
+
+  if (!validatedBody.success) {
+    throw new Error('Bad request');
+  }
+
+  try {
+    await prisma.profile.update({
+      where: {
+        id
+      },
+      data: {
+        name: validatedBody.data
+      }
+    });
+  } catch (error) {
+    throw new Error(`Failed to update profile`);
+  }
+}

app/components/Settings/Settings.tsx

@@ -0,0 +1,33 @@
+import { ProfileContext } from '@/contexts/ProfileContext';
+import { Card, Paper, Stack } from '@mui/material';
+import { nanoid } from 'nanoid';
+import { useContext, useEffect, useState } from 'react';
+import ProfilesTable from './Profiles/ProfilesTable';
+import TagsTable from './Tags/TagsTable';
+
+export default function Settings() {
+  const { profile, setProfile } = useContext(ProfileContext);
+  const [formKey, setFormKey] = useState(() => nanoid());
+
+  useEffect(() => {
+    if (profile) {
+      setFormKey(nanoid());
+    }
+  }, [profile]);
+
+  return (
+    <Paper sx={{ width: '100%', height: 'calc(100vh - 50px)' }}>
+      <Stack direction="row" spacing={2} padding={2}>
+        <Card sx={{ width: '50%', height: '100%' }}>
+          <ProfilesTable
+            selectedProfile={profile}
+            setSelectedProfile={setProfile}
+          />
+        </Card>
+        <Card sx={{ width: '50%', height: '100%' }}>
+          <TagsTable key={formKey} selectedProfile={profile} />
+        </Card>
+      </Stack>
+    </Paper>
+  );
+}

app/components/Settings/Tags/TagsTable.tsx

@@ -0,0 +1,103 @@
+import {
+  Box,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography
+} from '@mui/material';
+import { nanoid } from 'nanoid';
+import { useEffect, useState } from 'react';
+import { useFormState } from 'react-dom';
+import { Tags } from '../../../../data/types';
+import { CreateTagAction } from './actions/CreateTagAction';
+import { TagsAction } from './actions/TagsAction';
+import TagsTableRow from './TagsTableRow';
+
+interface TagsTableProps {
+  selectedProfile: string | undefined;
+}
+
+export default function TagsTable({ selectedProfile }: TagsTableProps) {
+  const [tags, setTags] = useState<Tags>([]);
+  const [formKey, setFormKey] = useState(() => nanoid());
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const [formState, formAction] = useFormState(CreateTagAction, {
+    clear: false,
+    profileId: selectedProfile
+  });
+
+  useEffect(() => {
+    const fetchTags = async () => {
+      if (selectedProfile) {
+        try {
+          const tags = await TagsAction({ selectedProfile });
+          setTags(tags);
+        } catch (error) {
+          console.error("Couldn't fetch tags.");
+        }
+      }
+    };
+
+    if (formState.clear) {
+      setFormKey(nanoid());
+    }
+
+    fetchTags();
+  }, [formState, selectedProfile, refreshKey]);
+
+  return (
+    <Stack
+      sx={{
+        spacing: 2,
+        padding: 2
+      }}
+    >
+      <Typography variant="h6">Tags</Typography>
+      <Box>
+        <form key={formKey} action={formAction}>
+          <TextField
+            fullWidth
+            disabled={!selectedProfile}
+            name="name"
+            placeholder="Add new tag"
+          />
+        </form>
+        <Box
+          sx={{
+            maxHeight: 'calc(100vh - 200px)',
+            overflow: 'auto'
+          }}
+        >
+          <Table
+            stickyHeader
+            sx={{
+              width: '100%'
+            }}
+          >
+            <TableHead>
+              <TableRow sx={{ '& th': { textAlign: 'center' } }}>
+                <TableCell>Name</TableCell>
+                <TableCell>Delete</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {tags &&
+                tags.map((tag) => (
+                  <TagsTableRow
+                    key={tag.id}
+                    tag={tag}
+                    onDelete={() => setRefreshKey((prevKey) => prevKey + 1)}
+                  />
+                ))}
+            </TableBody>
+          </Table>
+        </Box>
+      </Box>
+    </Stack>
+  );
+}

app/components/Settings/Tags/TagsTableRow.tsx

@@ -0,0 +1,65 @@
+import { Button, TableCell, TableRow, TextField } from '@mui/material';
+import { useState } from 'react';
+import { Tag } from '../../../../data/types';
+import { DeleteTagAction } from './actions/DeleteTagAction';
+import { UpdateTagAction } from './actions/UpdateTagAction';
+
+interface TagsTableRowProps {
+  tag: Tag;
+  onDelete: () => void;
+}
+
+export default function TagsTableRow({ tag, onDelete }: TagsTableRowProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [name, setName] = useState(tag.name);
+
+  const handleDoubleClick = () => {
+    setIsEditing(true);
+  };
+
+  const handleBlur = async () => {
+    setIsEditing(false);
+
+    try {
+      await UpdateTagAction({
+        id: tag.id,
+        name
+      });
+    } catch (error) {
+      console.error("Couldn't update tag.");
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const handleDelete = async () => {
+    try {
+      await DeleteTagAction(tag.id);
+      onDelete();
+    } catch (error) {
+      console.error("Couldn't delete tag.");
+    }
+  };
+
+  return (
+    <TableRow sx={{ '& td': { textAlign: 'center' } }} key={tag.id}>
+      <TableCell onDoubleClick={handleDoubleClick}>
+        {isEditing ? (
+          <TextField
+            value={name}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            autoFocus
+          />
+        ) : (
+          name
+        )}
+      </TableCell>
+      <TableCell>
+        <Button onClick={handleDelete}>Delete</Button>
+      </TableCell>
+    </TableRow>
+  );
+}

app/components/Settings/Tags/actions/CreateTagAction.ts

@@ -0,0 +1,53 @@
+'use server';
+
+import { CreateProfileFormSchema } from '../../../../../data/types';
+import prisma from '../../../../../prisma/prisma';
+
+interface CreateItemActionProps {
+  clear: boolean;
+  profileId: string | undefined;
+  error?: string;
+}
+
+export async function CreateTagAction(
+  { profileId }: CreateItemActionProps,
+  formData: FormData
+) {
+  const formDataObj = Object.fromEntries(formData.entries());
+
+  const validatedBody = CreateProfileFormSchema.safeParse(formDataObj);
+
+  if (!validatedBody.success || !profileId) {
+    throw new Error('Bad request');
+  }
+
+  const { name } = validatedBody.data;
+
+  try {
+    const existingTag = await prisma.tag.findFirst({
+      where: {
+        profileId,
+        name
+      }
+    });
+
+    if (existingTag) {
+      return { clear: false, profileId };
+    }
+  } catch (error) {
+    throw new Error(`Failed to find tag`);
+  }
+
+  try {
+    await prisma.tag.create({
+      data: {
+        profileId,
+        name
+      }
+    });
+
+    return { clear: true, profileId };
+  } catch (error) {
+    throw new Error(`Failed to create tag`);
+  }
+}

app/components/Settings/Tags/actions/DeleteTagAction.ts

@@ -0,0 +1,22 @@
+'use server';
+
+import { z } from 'zod';
+import prisma from '../../../../../prisma/prisma';
+
+export async function DeleteTagAction(id: string) {
+  const validatedBody = z.string().safeParse(id);
+
+  if (!validatedBody.success) {
+    throw new Error('Bad request');
+  }
+
+  try {
+    await prisma.tag.delete({
+      where: {
+        id
+      }
+    });
+  } catch (error) {
+    throw new Error(`Failed to delete tag`);
+  }
+}

app/components/Settings/Tags/actions/TagsAction.ts

@@ -0,0 +1,40 @@
+'use server';
+
+import { z } from 'zod';
+import { initializeUser } from '../../../../../data/initializeUser';
+import { Profiles } from '../../../../../data/types';
+import prisma from '../../../../../prisma/prisma';
+
+interface TagsActionProps {
+  selectedProfile: string | undefined;
+}
+
+export async function TagsAction({ selectedProfile }: TagsActionProps) {
+  const validatedBody = z.string().safeParse(selectedProfile);
+
+  if (!validatedBody.success) {
+    throw new Error('Bad request');
+  }
+
+  const user = await initializeUser();
+
+  try {
+    const profiles = await prisma.tag.findMany({
+      where: {
+        Profile: {
+          User: {
+            id: user.id
+          },
+          id: selectedProfile
+        }
+      },
+      orderBy: {
+        createdAt: 'desc'
+      }
+    });
+
+    return profiles as Profiles;
+  } catch (error) {
+    throw new Error('Failed to find tags');
+  }
+}

app/components/Settings/Tags/actions/UpdateTagAction.ts

@@ -0,0 +1,31 @@
+'use server';
+
+import { z } from 'zod';
+import prisma from '../../../../../prisma/prisma';
+
+interface TagActionProps {
+  id: string;
+  name: string;
+  error?: string;
+}
+
+export async function UpdateTagAction({ id, name }: TagActionProps) {
+  const validatedBody = z.string().safeParse(name);
+
+  if (!validatedBody.success) {
+    throw new Error('Bad request');
+  }
+
+  try {
+    await prisma.tag.update({
+      where: {
+        id
+      },
+      data: {
+        name: validatedBody.data
+      }
+    });
+  } catch (error) {
+    throw new Error(`Failed to update tag`);
+  }
+}

app/components/UI/CreateButton.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { Button } from '@mui/material';
+import { useFormStatus } from 'react-dom';
+
+export const CreateButton = () => {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button variant="outlined" color="primary" type="submit">
+      {pending ? 'Please wait...' : 'Submit'}
+    </Button>
+  );
+};

app/globals.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Budget app',
+  description: 'Track your expenses'
+};
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { TabContext, TabList, TabPanel } from '@mui/lab';
+import { Paper, Tab } from '@mui/material';
+import { Suspense, useState } from 'react';
+import { ProfileContextProvider } from '../contexts/ProfileContextProvider';
+import Dashboard from './components/Dashboard/Dashboard';
+import Settings from './components/Settings/Settings';
+
+function Analytics() {
+  return (
+    <Paper sx={{ width: '100%', height: 'calc(100vh - 50px)' }}>
+      Analytics
+    </Paper>
+  );
+}
+
+enum TabValue {
+  DASHBOARD = 'DASHBOARD',
+  ANALYTICS = 'ANALYTICS',
+  SETTINGS = 'SETTINGS'
+}
+
+const tabPanelStyle = { margin: 0, padding: 0 };
+
+export default function Home() {
+  const [value, setValue] = useState<TabValue>(TabValue.DASHBOARD);
+
+  const handleChange = (_: React.SyntheticEvent, newValue: TabValue) => {
+    setValue(newValue);
+  };
+
+  const tabStyle = {
+    color: (tabValue: TabValue) =>
+      value === tabValue ? { color: "'primary.main'" } : { color: 'inherit' }
+  };
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <ProfileContextProvider>
+        <TabContext value={value}>
+          <TabList onChange={handleChange} sx={{ backgroundColor: 'navy' }}>
+            <Tab
+              label="Dashboard"
+              value={TabValue.DASHBOARD}
+              sx={tabStyle.color(TabValue.DASHBOARD)}
+            />
+            <Tab
+              label="Analytics"
+              value={TabValue.ANALYTICS}
+              sx={tabStyle.color(TabValue.ANALYTICS)}
+            />
+            <Tab
+              label="Settings"
+              value={TabValue.SETTINGS}
+              sx={tabStyle.color(TabValue.SETTINGS)}
+            />
+          </TabList>
+          <TabPanel sx={tabPanelStyle} value={TabValue.DASHBOARD}>
+            <Dashboard />
+          </TabPanel>
+          <TabPanel sx={tabPanelStyle} value={TabValue.ANALYTICS}>
+            <Analytics />
+          </TabPanel>
+          <TabPanel sx={tabPanelStyle} value={TabValue.SETTINGS}>
+            <Settings />
+          </TabPanel>
+        </TabContext>
+      </ProfileContextProvider>
+    </Suspense>
+  );
+}

commitlint.config.ts

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

contexts/ProfileContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+interface ProfileContextProps {
+  profile: string | undefined;
+  setProfile: (profile: string | undefined) => void;
+}
+
+export const ProfileContext = createContext<ProfileContextProps>({
+  profile: undefined,
+  setProfile: () => {}
+});

contexts/ProfileContextProvider.tsx

@@ -0,0 +1,16 @@
+import { useState } from 'react';
+import { ProfileContext } from './ProfileContext';
+
+export function ProfileContextProvider({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const [profile, setProfile] = useState<string | undefined>(undefined);
+
+  return (
+    <ProfileContext.Provider value={{ profile, setProfile }}>
+      {children}
+    </ProfileContext.Provider>
+  );
+}

data/initializeUser.ts

@@ -0,0 +1,20 @@
+import prisma from '../prisma/prisma';
+
+export async function initializeUser() {
+  return await prisma.user.upsert({
+    where: {
+      email: process.env.EMAIL!
+    },
+    update: {},
+    create: {
+      email: process.env.EMAIL!,
+      password: process.env.EMAIL!,
+      name: process.env.EMAIL!,
+      Profiles: {
+        create: {
+          name: 'Default profile'
+        }
+      }
+    }
+  });
+}

data/types.ts

@@ -0,0 +1,95 @@
+import { z } from 'zod';
+import { zfd } from 'zod-form-data';
+
+const currency = ['DKK', 'EUR', 'SGD', 'USD'] as const;
+
+export const IdSchema = z.object({
+  params: z.object({
+    id: z.string()
+  })
+});
+
+export const CreateItemFormSchema = zfd.formData({
+  name: z.string(),
+  description: z.string().optional(),
+  price: zfd.numeric(z.number()),
+  currency: z.enum(currency),
+  tag: z.string().optional(),
+  body: z.string().optional(),
+  score: zfd.numeric(z.number().min(0).max(10).optional()),
+  regret: z
+    .union([z.literal('on'), z.literal('off')])
+    .transform((value) => value === 'on')
+    .optional()
+});
+
+export const ItemSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  description: z.string().optional(),
+  price: z.number(),
+  currency: z.enum(currency),
+  tag: z.string().optional(),
+  createdAt: z.date().optional()
+});
+
+export type Item = z.infer<typeof ItemSchema>;
+
+export const ItemsSchema = z.array(ItemSchema);
+
+export type Items = z.infer<typeof ItemsSchema>;
+
+export const CreateCommentFormSchema = zfd.formData({
+  body: z.string(),
+  score: zfd.numeric(z.number().min(0).max(10).optional()),
+  regret: z
+    .union([z.literal('on'), z.literal('off')])
+    .transform((value) => value === 'on')
+    .optional()
+});
+
+export const ItemCommentSchema = z.object({
+  id: z.string(),
+  body: z.string(),
+  score: z.number(),
+  regret: z.boolean(),
+  createdAt: z.date().optional()
+});
+
+export type ItemComment = z.infer<typeof ItemCommentSchema>;
+
+export const ItemCommentsSchema = z.array(ItemCommentSchema);
+
+export type ItemComments = z.infer<typeof ItemCommentsSchema>;
+
+export const CreateProfileFormSchema = z.object({
+  name: z.string()
+});
+
+export const ProfileSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  createdAt: z.date().optional()
+});
+
+export type Profile = z.infer<typeof ProfileSchema>;
+
+export const ProfilesSchema = z.array(ProfileSchema);
+
+export type Profiles = z.infer<typeof ProfilesSchema>;
+
+export const CreateTagFormSchema = z.object({
+  name: z.string()
+});
+
+export const TagSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  createdAt: z.date().optional()
+});
+
+export type Tag = z.infer<typeof TagSchema>;
+
+export const TagsSchema = z.array(TagSchema);
+
+export type Tags = z.infer<typeof TagsSchema>;

docker-compose.yml

@@ -0,0 +1,32 @@
+version: '3.8'
+
+services:
+  # app:
+  #   build:
+  #     context: ./
+  #     dockerfile: Dockerfile
+  #   image: app
+  #   container_name: backend
+  #   restart: unless-stopped
+  #   ports:
+  #     - '3000:3000'
+  #   environment:
+  #     - PORT=3000
+  #     - DATABASE_URL=postgresql://postgres:postgres@postgres:5432/postgres
+  #   depends_on:
+  #     - postgres
+  postgres:
+    image: postgres:latest
+    container_name: postgres
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: postgres
+    ports:
+      - '5432:5432'
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+
+volumes:
+  pgdata:

next.config.mjs

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    serverActions: {
+      allowedOrigins: ['localhost']
+    }
+  }
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,61 @@
+{
+  "name": "budgetapp",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "prisma generate && next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier --config .prettierrc 'app/' --write",
+    "audit": "npm audit",
+    "typecheck": "tsc --noEmit",
+    "prepare": "husky install",
+    "migrate": "npx prisma migrate dev",
+    "push": "npx prisma db push",
+    "generate": "npx prisma generate",
+    "reset": "npx prisma db push --force-reset"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/lab": "^5.0.0-alpha.170",
+    "@mui/material": "^5.15.6",
+    "@prisma/client": "5.8.1",
+    "@vercel/analytics": "^1.1.2",
+    "nanoid": "^5.0.4",
+    "next": "^14.2.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "zod": "^3.22.4",
+    "zod-form-data": "^2.0.2"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18.5.0",
+    "@commitlint/config-conventional": "^18.5.0",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.2.0",
+    "postcss": "^8",
+    "prettier": "3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "prisma": "5.8.1",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --quiet --fix"
+    ],
+    "*.{json,ts}": [
+      "prettier --write --ignore-unknown"
+    ]
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

prisma/migrations/20240123185308_add_initial_tables/migration.sql

@@ -0,0 +1,101 @@
+-- CreateEnum
+CREATE TYPE "Currency" AS ENUM ('EUR', 'DKK', 'SGD', 'USD');
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "name" TEXT,
+    "password" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Profile" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "userId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Profile_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Item" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "price" DOUBLE PRECISION NOT NULL,
+    "currency" "Currency" NOT NULL,
+    "deleted" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "profileId" TEXT NOT NULL,
+    "tagId" TEXT,
+
+    CONSTRAINT "Item_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ItemComment" (
+    "id" TEXT NOT NULL,
+    "body" TEXT NOT NULL,
+    "score" INTEGER NOT NULL,
+    "regret" BOOLEAN NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "itemId" TEXT NOT NULL,
+
+    CONSTRAINT "ItemComment_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Tag" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Tag_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_id_key" ON "User"("id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Profile_id_key" ON "Profile"("id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Profile_userId_key" ON "Profile"("userId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Item_id_key" ON "Item"("id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ItemComment_id_key" ON "ItemComment"("id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Tag_id_key" ON "Tag"("id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Tag_name_key" ON "Tag"("name");
+
+-- AddForeignKey
+ALTER TABLE "Profile" ADD CONSTRAINT "Profile_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Item" ADD CONSTRAINT "Item_profileId_fkey" FOREIGN KEY ("profileId") REFERENCES "Profile"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Item" ADD CONSTRAINT "Item_tagId_fkey" FOREIGN KEY ("tagId") REFERENCES "Tag"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ItemComment" ADD CONSTRAINT "ItemComment_itemId_fkey" FOREIGN KEY ("itemId") REFERENCES "Item"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20240123202859_added_exchange_rates_table_and_fields/migration.sql

@@ -0,0 +1,15 @@
+-- AlterTable
+ALTER TABLE "Item" ADD COLUMN     "priceEuro" DOUBLE PRECISION;
+
+-- CreateTable
+CREATE TABLE "CurrencyRate" (
+    "id" TEXT NOT NULL,
+    "currency" "Currency" NOT NULL,
+    "rate" DOUBLE PRECISION NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "CurrencyRate_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "CurrencyRate_id_key" ON "CurrencyRate"("id");

prisma/migrations/20240124161110_change_item_and_comment_tables/migration.sql

@@ -0,0 +1,15 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `updatedAt` on the `Item` table. All the data in the column will be lost.
+  - You are about to drop the column `updatedAt` on the `ItemComment` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Item" DROP COLUMN "updatedAt";
+
+-- AlterTable
+ALTER TABLE "ItemComment" DROP COLUMN "updatedAt",
+ALTER COLUMN "body" DROP NOT NULL,
+ALTER COLUMN "score" DROP NOT NULL,
+ALTER COLUMN "regret" SET DEFAULT false;

prisma/migrations/20240127091602_connect_tag_to_profile/migration.sql

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - Added the required column `profileId` to the `Tag` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Tag" ADD COLUMN     "profileId" TEXT NOT NULL;
+
+-- AddForeignKey
+ALTER TABLE "Tag" ADD CONSTRAINT "Tag_profileId_fkey" FOREIGN KEY ("profileId") REFERENCES "Profile"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20240127100044_remove_constraint_to_profile_user_id/migration.sql

@@ -0,0 +1,2 @@
+-- DropIndex
+DROP INDEX "Profile_userId_key";

prisma/migrations/20240127113811_make_profile_names_unique/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[name]` on the table `Profile` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Profile_name_key" ON "Profile"("name");

prisma/migrations/20240127121159_add_cascade_deletion/migration.sql

@@ -0,0 +1,23 @@
+-- DropForeignKey
+ALTER TABLE "Item" DROP CONSTRAINT "Item_profileId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "ItemComment" DROP CONSTRAINT "ItemComment_itemId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Profile" DROP CONSTRAINT "Profile_userId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Tag" DROP CONSTRAINT "Tag_profileId_fkey";
+
+-- AddForeignKey
+ALTER TABLE "Profile" ADD CONSTRAINT "Profile_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Item" ADD CONSTRAINT "Item_profileId_fkey" FOREIGN KEY ("profileId") REFERENCES "Profile"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ItemComment" ADD CONSTRAINT "ItemComment_itemId_fkey" FOREIGN KEY ("itemId") REFERENCES "Item"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Tag" ADD CONSTRAINT "Tag_profileId_fkey" FOREIGN KEY ("profileId") REFERENCES "Profile"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

prisma/prisma.ts

@@ -0,0 +1,9 @@
+import { PrismaClient } from '@prisma/client';
+
+const globalForPrisma = global as unknown as { prisma: PrismaClient };
+
+export const prisma = globalForPrisma.prisma || new PrismaClient();
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
+
+export default prisma;

prisma/schema.prisma

@@ -0,0 +1,80 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+enum Currency {
+  EUR
+  DKK
+  SGD
+  USD
+}
+
+model User {
+  id        String    @id @unique @default(uuid())
+  email     String    @unique
+  name      String?
+  password  String
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+  Profiles  Profile[]
+}
+
+model Profile {
+  id          String   @id @unique @default(uuid())
+  name        String   @unique
+  description String?
+  User        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  userId      String
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  Items       Item[]
+  Tag         Tag[]
+}
+
+model Item {
+  id          String        @id @unique @default(uuid())
+  name        String
+  description String?
+  price       Float
+  currency    Currency
+  priceEuro   Float?
+  deleted     Boolean       @default(false)
+  createdAt   DateTime      @default(now())
+  Profile     Profile       @relation(fields: [profileId], references: [id], onDelete: Cascade)
+  profileId   String
+  ItemComment ItemComment[]
+  Tag         Tag?          @relation(fields: [tagId], references: [id])
+  tagId       String?
+}
+
+model ItemComment {
+  id        String   @id @unique @default(uuid())
+  body      String?
+  score     Int?
+  regret    Boolean  @default(false)
+  createdAt DateTime @default(now())
+  Item      Item     @relation(fields: [itemId], references: [id], onDelete: Cascade)
+  itemId    String
+}
+
+model Tag {
+  id        String   @id @unique @default(uuid())
+  name      String   @unique
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  Profile   Profile  @relation(fields: [profileId], references: [id], onDelete: Cascade)
+  profileId String
+  Items     Item[]
+}
+
+model CurrencyRate {
+  id        String   @id @unique @default(uuid())
+  currency  Currency
+  rate      Float
+  createdAt DateTime @default(now())
+}

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>

public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

tailwind.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

tsconfig.json

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

utils/ApiResponse.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from 'next/server';
+
+export function ApiResponse(status: number, message: string) {
+  const response = new NextResponse(message, { status });
+  response.headers.set('Access-Control-Allow-Origin', process.env.HOME_URL!);
+
+  return response;
+}

vercel.json

@@ -0,0 +1,34 @@
+{
+  "crons": [],
+  "headers": [
+    {
+      "source": "/api/(.*)",
+      "headers": [
+        {
+          "key": "Access-Control-Allow-Methods",
+          "value": "GET, POST, OPTIONS"
+        },
+        {
+          "key": "Access-Control-Allow-Headers",
+          "value": "Content-Type, Accept"
+        },
+        {
+          "key": "Strict-Transport-Security",
+          "value": "max-age=63072000; includeSubDomains; preload"
+        },
+        {
+          "key": "Content-Security-Policy",
+          "value": "default-src 'none'"
+        },
+        {
+          "key": "X-Content-Type-Options",
+          "value": "nosniff"
+        },
+        {
+          "key": "X-Frame-Options",
+          "value": "DENY"
+        }
+      ]
+    }
+  ]
+}