- initial commit

.drone.yml

@@ -0,0 +1,16 @@
+---
+kind: pipeline
+name: backend
+type: docker
+
+steps:
+  - name: deploy web
+    image: node:alpine
+    environment:
+      NETLIFY_AUTH_TOKEN:
+        from_secret: NETLIFY_TOKEN
+      NETLIFY_SITE_ID: 753cd3b7-e235-439a-a7a0-6aee33e0c445
+    commands:
+      - yarn install
+      - yarn build
+      - yarn netlify deploy --dir=dist --prod

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

README.md

@@ -1,2 +1,3 @@
-# gen
+# random-team-generator
 
+Website for random team generation

commitlint.config.js

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

dist/assets/index.87f7909d.css

@@ -0,0 +1 @@
+@font-face{font-family:Raleway;font-style:normal;font-display:swap;font-weight:100;src:url(/assets/raleway-latin-100-normal.3565940a.woff2) format("woff2"),url(/assets/raleway-latin-100-normal.923018d1.woff) format("woff")}@font-face{font-family:Raleway;font-style:normal;font-display:swap;font-weight:200;src:url(/assets/raleway-latin-200-normal.919ff40b.woff2) format("woff2"),url(/assets/raleway-latin-200-normal.a70a67a5.woff) format("woff")}@font-face{font-family:Raleway;font-style:normal;font-display:swap;font-weight:300;src:url(/assets/raleway-latin-300-normal.154d56d0.woff2) format("woff2"),url(/assets/raleway-latin-300-normal.7b413ab9.woff) format("woff")}@font-face{font-family:Raleway;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/raleway-latin-400-normal.1d94fd1a.woff2) format("woff2"),url(/assets/raleway-latin-400-normal.a02462a6.woff) format("woff")}@font-face{font-family:Raleway;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/raleway-latin-500-normal.789a5712.woff2) format("woff2"),url(/assets/raleway-latin-500-normal.fe83ac58.woff) format("woff")}@font-face{font-family:Raleway;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/raleway-latin-600-normal.4012fdcb.woff2) format("woff2"),url(/assets/raleway-latin-600-normal.63ec19e1.woff) format("woff")}@font-face{font-family:Raleway;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/raleway-latin-700-normal.0d3b3a3f.woff2) format("woff2"),url(/assets/raleway-latin-700-normal.5d9d2c02.woff) format("woff")}@font-face{font-family:Raleway;font-style:normal;font-display:swap;font-weight:800;src:url(/assets/raleway-latin-800-normal.22c96a94.woff2) format("woff2"),url(/assets/raleway-latin-800-normal.a0cab968.woff) format("woff")}@font-face{font-family:Raleway;font-style:normal;font-display:swap;font-weight:900;src:url(/assets/raleway-latin-900-normal.3606260e.woff2) format("woff2"),url(/assets/raleway-latin-900-normal.2e318c98.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100;src:url(/assets/inter-latin-100-normal.cdb79ee9.woff2) format("woff2"),url(/assets/inter-latin-100-normal.2e3599b6.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:200;src:url(/assets/inter-latin-200-normal.7a4f6878.woff2) format("woff2"),url(/assets/inter-latin-200-normal.0f7d708e.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:300;src:url(/assets/inter-latin-300-normal.8f400eb2.woff2) format("woff2"),url(/assets/inter-latin-300-normal.15aaf7be.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/inter-latin-400-normal.d56fec21.woff2) format("woff2"),url(/assets/inter-latin-400-normal.9ec803ce.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/inter-latin-500-normal.aa5a5a7a.woff2) format("woff2"),url(/assets/inter-latin-500-normal.c8015ce3.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/inter-latin-600-normal.ff769fa6.woff2) format("woff2"),url(/assets/inter-latin-600-normal.d4339a04.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/inter-latin-700-normal.3ced3f55.woff2) format("woff2"),url(/assets/inter-latin-700-normal.61d7a719.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:800;src:url(/assets/inter-latin-800-normal.5eea1309.woff2) format("woff2"),url(/assets/inter-latin-800-normal.98c540b2.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:900;src:url(/assets/inter-latin-900-normal.a467db7b.woff2) format("woff2"),url(/assets/inter-latin-900-normal.d92bf628.woff) format("woff")}

dist/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>played - Random Team Generator</title>
+  <script type="module" crossorigin src="/assets/index.3030d437.js"></script>
+  <link rel="stylesheet" href="/assets/index.87f7909d.css">
+</head>
+
+<body>
+  <div id="root"></div>
+  
+</body>
+
+</html>

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>played - Random Team Generator</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from="/*"
+  to="/index.html"
+  status=200

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@played/gen",
+  "version": "0.1.0",
+  "private": true,
+  "author": "sozonome",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix && yarn format",
+    "type-check": "tsc --noEmit",
+    "format": "prettier --write src",
+    "up": "yarn upgrade-interactive",
+    "up-latest": "yarn up --latest",
+    "release": "standard-version",
+    "push-release": "git push --follow-tags origin main",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^1.8.8",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@fontsource/inter": "^4.5.7",
+    "@fontsource/raleway": "^4.5.5",
+    "framer-motion": "^6.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
+    "react-hook-form": "^7.30.0",
+    "react-icons": "^4.3.1",
+    "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^16.2.1",
+    "@types/node": "^17.0.23",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^17.0.15",
+    "@types/react-helmet": "^6.1.5",
+    "@vitejs/plugin-react": "^1.3.0",
+    "commitlint": "^16.2.3",
+    "eslint": "^8.13.0",
+    "eslint-config-sznm": "^0.2.1",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
+    "netlify-cli": "^10.0.0",
+    "prettier": "^2.6.2",
+    "standard-version": "^9.3.2",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.1",
+    "vite-tsconfig-paths": "^3.4.1"
+  }
+}

src/App.tsx

@@ -0,0 +1,30 @@
+/**
+ * @note
+ * for hook alternative of route element composition:
+ * - https://reactrouter.com/docs/en/v6/upgrading/v5#use-useroutes-instead-of-react-router-config
+ * - https://reactrouter.com/docs/en/v6/examples/route-objects
+ *
+ * might need to take notes on:
+ * - https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-link-to-values
+ */
+
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+
+import Layout from "Components/Layout";
+import Page404 from "Sites/404";
+import { routes } from "Sites";
+
+const App = () => (
+  <Router>
+    <Layout>
+      <Routes>
+        {routes.map((routeProps) => (
+          <Route {...routeProps} key={routeProps.path as string} />
+        ))}
+        <Route path="*" element={<Page404 />} />
+      </Routes>
+    </Layout>
+  </Router>
+);
+
+export default App;

src/Components/Cards/Team/index.tsx

@@ -0,0 +1,33 @@
+import { Box, Text, Heading, useStyleConfig, chakra } from "@chakra-ui/react";
+import { motion, isValidMotionProp } from "framer-motion";
+import { VFC } from "react";
+
+type CardTeamProps = {
+  players: string[];
+  index: number;
+};
+
+const Container = chakra(motion.div, {
+  shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === "children",
+});
+
+const CardTeam: VFC<CardTeamProps> = ({ players, index }) => {
+  const styles = useStyleConfig("Card", { variant: "smooth" });
+  return (
+    <Container
+      animate="enter"
+      initial="from"
+      variants={{ enter: { scale: 1 }, from: { scale: 0 } }}
+      __css={styles}
+    >
+      <Heading size="md" as="h3">
+        Team {index + 1}
+      </Heading>
+      {players.map((player, index) => (
+        <Text key={index}>{player}</Text>
+      ))}
+    </Container>
+  );
+};
+
+export default CardTeam;

src/Components/Layout/Footer.tsx

@@ -0,0 +1,15 @@
+import { Flex, Link, Text } from "@chakra-ui/react";
+
+const Footer = () => {
+  return (
+    <Flex
+      as="footer"
+      width="full"
+      align="center"
+      alignSelf="flex-end"
+      justifyContent="center"
+    ></Flex>
+  );
+};
+
+export default Footer;

src/Components/Layout/Header.tsx

@@ -0,0 +1,28 @@
+import { Box, Flex, Heading } from "@chakra-ui/react";
+import Logo from "Components/Logo";
+import { Link } from "react-router-dom";
+
+import ThemeToggle from "./ThemeToggle";
+
+const Header = () => {
+  return (
+    <Flex
+      as="header"
+      width="full"
+      align="center"
+      alignSelf="flex-start"
+      justifyContent="center"
+      gridGap={2}
+    >
+      <Link to="/">
+        <Logo />
+      </Link>
+
+      <Box marginLeft="auto">
+        <ThemeToggle />
+      </Box>
+    </Flex>
+  );
+};
+
+export default Header;

src/Components/Layout/Meta.tsx

@@ -0,0 +1,11 @@
+import { Helmet } from "react-helmet";
+
+const Meta = () => {
+  return (
+    <Helmet>
+      <title>Project Name</title>
+    </Helmet>
+  );
+};
+
+export default Meta;

src/Components/Layout/ThemeToggle.tsx

@@ -0,0 +1,16 @@
+import { IconButton, useColorMode } from "@chakra-ui/react";
+import { RiMoonFill, RiSunLine } from "react-icons/ri";
+
+const ThemeToggle = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  return (
+    <IconButton
+      aria-label="theme toggle"
+      icon={colorMode === "light" ? <RiMoonFill /> : <RiSunLine />}
+      onClick={toggleColorMode}
+    />
+  );
+};
+
+export default ThemeToggle;

src/Components/Layout/index.tsx

@@ -0,0 +1,27 @@
+import { Box, Flex } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+import Footer from "./Footer";
+import Header from "./Header";
+import Meta from "./Meta";
+
+type LayoutProps = {
+  children: ReactNode;
+};
+
+const Layout = ({ children }: LayoutProps) => {
+  return (
+    <Box margin="0 auto" maxWidth={800} transition="0.5s ease-out">
+      <Meta />
+      <Flex wrap="wrap" margin="8" minHeight="90vh">
+        <Header />
+        <Box width="full" as="main" marginY={22}>
+          {children}
+        </Box>
+        <Footer />
+      </Flex>
+    </Box>
+  );
+};
+
+export default Layout;

src/Components/Logo/index.tsx

@@ -0,0 +1,57 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+
+const Logo = () => {
+  return (
+    <Box maxW="200px">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 798.92 453.49">
+        <defs>
+          <style>
+            {`   .b,
+      .c {
+        fill: none;
+        stroke: #5300f9;
+        stroke-miterlimit: 10;
+        stroke-width: 40px;
+      }
+
+      .d {
+        fill: #333;
+      }
+
+      .e {
+        fill: #ffca22;
+      }
+
+      .played {
+          fill: white;
+      }
+
+      .c {
+        stroke-linecap: round;
+      }`}
+          </style>
+        </defs>
+        <path
+          d="M56.19 101.61c266.27-71.11 171.63 434.9 399.46-31.49 61.99-126.9-79.84 503.13 12.99 302.97C531.18 238.26 682 186.15 706.22 356.36"
+          className="b"
+        ></path>
+        <path
+          d="M315.73 169.2l.75 20.36c1.08 29.53-7.23 56.08-25.21 80.02-17.7 23.57-41.19 39.88-70.75 48.73-31.28 9.37-57.48 7.07-78.59-6.89-20.83-14.05-31.77-35.7-32.86-65.23s8.06-57.2 27.4-83.57c19.34-26.37 43.94-43.89 73.5-52.74 18.65-5.59 36.03-6.45 51.83-2.77 16.09 3.59 28.55 11.16 37.97 22.54l-42.71 38.01c-8.5-10.21-25.16-13.62-44.68-7.78-15.78 4.73-28.8 13.84-38.46 27.17-9.67 13.33-14.35 28.07-13.76 44.12s5.93 27.21 16.36 34.81c10.43 7.6 24.98 8.75 43.06 3.33 23.25-6.96 38.42-20.49 45.24-40.22l-48.79 14.61-1.62-44.15 101.31-30.35zM391.34 304.36l78.16 35.59v48.46l-129.79-59.1v-201.9l128.35 58.44v48.17l-76.72-34.93v27.98l69.51 31.65v47.59l-69.51-31.65v29.71zM606.36 52.68l51.34-24.49v201.9l-39.8 18.99-71.24-67.54v101.53l-51.63 24.63V105.79l40.09-19.13 71.24 67.54V52.68z"
+          className="e"
+        ></path>
+        <path
+          d="M759.76 308.57L714.51 378.92 637.05 333.59"
+          className="c"
+        ></path>
+        <path d="M108.52 155.94L38.17 110.7 83.5 33.23" className="c"></path>
+        <path
+          d="M256.3 210.31l1.47 5.29.18-.05c3.57-6.6 7.64-8.91 13.21-10.46 12.95-3.6 25.16.37 28.95 13.96 3.48 12.5-3.97 23.51-16.56 27.02-7.39 2.06-13.52 1.21-17.04-1.55l-.18.05 5.51 19.79-13.13 3.66-15.08-54.18 12.68-3.53zm20.89 27.4c6.66-1.85 11.34-7.28 9.28-14.67-2.06-7.39-8.87-9.62-15.53-7.77-6.57 1.83-11.25 7.26-9.19 14.65 2.06 7.39 8.87 9.62 15.44 7.79zM329.61 193.54l-11.34 53.25-13.33-2.84 11.34-53.25 13.33 2.84zM353.23 248.28c-10.77 1.62-18.81-.91-20.2-10.18-1.45-9.64 7.04-13.03 15.2-14.83l14.18-3.09c4.08-.9 5.37-1.86 4.89-5.04s-3.42-4.27-11.28-3.09c-5.71.86-8.65 1.68-9.79 7.5l-13.01 1.96c-.25-12.5 11.24-15.67 22.29-17.33 19.29-2.9 24.32 2.57 25.43 9.96l4.18 27.81-12.83 1.93-.63-4.21c-4.02 5.1-12.34 7.7-18.43 8.61zm8.26-20.87l-7.77 1.84c-4.72 1.09-6.86 2.76-6.33 6.31s4.29 5 9.35 4.24c6.83-1.03 13.94-5.35 12.94-12l-.49-3.28c-2.34 1.6-5.11 2.3-7.71 2.88zM410.7 262.01c-4.03 6.47-7.99 7.61-15.5 6.7-3.2-.39-6.37-.97-9.54-1.54l1.14-9.4c1.95.43 3.91.76 5.89 1 3.29.4 4.95-.73 6.89-3.36l1.67-2.75-14.58-41.64 14.66 1.79 8.57 28.32 14.65-25.5 14.47 1.76-28.33 44.62zM470.33 259.52c-16.19 3.07-28.18-1.2-31-16.09-2.84-14.98 6.75-23.35 22.93-26.42 17.67-3.36 27.87 3.67 30.7 18.55l.23 1.21-39.35 7.47.02.09c.72 3.81 5.82 8.82 14.93 7.09 5.4-1.02 8.87-3.52 10.17-7.33l14.33-2.72c-2.12 10.14-10.68 15.81-22.96 18.14zm7.52-27.93c-.41-2.14-4.56-8.29-14.33-6.44-10.6 2.01-11.35 10.25-11.16 11.27l.02.09 25.49-4.84-.02-.09zM512.39 236.55c-12.59-3.13-20.78-12.58-17.4-26.18 3.15-12.68 15.04-18.51 27.72-15.36 7.44 1.85 12.39 5.52 14.09 9.65l.09.02 4.61-18.56 13.32 3.31-13.13 52.84-12.86-3.2 1.21-4.87-.09-.02c-5.55 3.89-11.5 3.87-17.56 2.37zm6.03-8.55c6.62 1.64 13.36-.78 15.21-8.22 1.85-7.44-2.98-12.74-9.6-14.38-6.71-1.67-13.46.75-15.3 8.2-1.85 7.44 2.98 12.74 9.69 14.41z"
+          className="played"
+        ></path>
+      </svg>
+    </Box>
+  );
+};
+
+export default Logo;

src/Sections/TeamGenerator/index.tsx

@@ -0,0 +1,97 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Text,
+  Input,
+  Stack,
+  SimpleGrid,
+} from "@chakra-ui/react";
+import CardTeam from "Components/Cards/Team";
+import { useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+
+const getRandom = (list: Array<any>) => {
+  return list[Math.floor(Math.random() * list.length)];
+};
+
+const SectionTeamGenerator = () => {
+  const [teams, setTeams] = useState<Array<Array<string>>>([]);
+  const {
+    handleSubmit,
+    register,
+    control,
+    getValues,
+    formState: { errors, isSubmitting },
+  } = useForm({ defaultValues: { players: [{ value: "" }], teamCount: 2 } });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "players",
+  });
+
+  return (
+    <Box>
+      <form
+        onSubmit={handleSubmit((values) => {
+          const shuffledPlayers = [...values.players]
+            .sort(() => (Math.random() > 0.5 ? 1 : -1))
+            .map((value) => value.value);
+
+          const teams = [];
+
+          const range = Math.ceil(values.players.length / values.teamCount);
+          while (shuffledPlayers.length > 0) {
+            teams.push(shuffledPlayers.splice(0, range));
+          }
+
+          setTeams(teams);
+        })}
+      >
+        <Stack spacing={3}>
+          {fields.map((field, index) => (
+            <Input
+              placeholder={`Player ${index + 1} name`}
+              key={field.id}
+              size="md"
+              type="name"
+              {...register(`players.${index}.value`)}
+              autoFocus={index === fields.length}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && index === fields.length - 1) {
+                  e.preventDefault();
+                  const value = getValues(`players.${index}.value`);
+                  if (value !== "") {
+                    append({ value: "" });
+                  } else {
+                    remove(index);
+                  }
+                }
+              }}
+            />
+          ))}
+          <FormControl>
+            <FormLabel htmlFor="team-count">Team count</FormLabel>
+            <Input
+              id="team-count"
+              placeholder="Team Count"
+              type="number"
+              {...register(`teamCount`, { valueAsNumber: true })}
+              defaultValue={2}
+            />
+          </FormControl>
+          <Button type="submit">Generate</Button>
+        </Stack>
+      </form>
+
+      <SimpleGrid columns={2} mt="1rem" spacing="1.5rem">
+        {teams.map((team, index) => (
+          <CardTeam players={team} index={index} key={index} />
+        ))}
+      </SimpleGrid>
+    </Box>
+  );
+};
+
+export default SectionTeamGenerator;

src/Sites/404/index.tsx

@@ -0,0 +1,36 @@
+import {
+  Box,
+  Button,
+  Grid,
+  Heading,
+  Image,
+  Link,
+  Text,
+} from "@chakra-ui/react";
+import { useNavigate } from "react-router-dom";
+
+const Page404 = () => {
+  const navigate = useNavigate();
+
+  const handleBackToHome = () => navigate("/");
+
+  return (
+    <Grid gap={4} textAlign="center">
+      <Heading>Page not Found</Heading>
+
+      <Box maxWidth={[280, 400]} marginX="auto">
+        <Image width={400} src="/assets/404 Error-rafiki.svg" />
+        <Link fontSize="xs" href="https://stories.freepik.com/web" isExternal>
+          Illustration by Freepik Stories
+        </Link>
+      </Box>
+
+      <Box>
+        <Text>It&apos;s Okay!</Text>
+        <Button onClick={handleBackToHome}>Let&apos;s Head Back</Button>
+      </Box>
+    </Grid>
+  );
+};
+
+export default Page404;

src/Sites/Start/index.tsx

@@ -0,0 +1,12 @@
+import { Grid, Text } from "@chakra-ui/react";
+import SectionTeamGenerator from "Sections/TeamGenerator";
+
+const Home = () => {
+  return (
+    <Grid gap={4}>
+      <SectionTeamGenerator />
+    </Grid>
+  );
+};
+
+export default Home;

src/Sites/index.tsx

@@ -0,0 +1,12 @@
+import type { PathRouteProps } from "react-router-dom";
+
+import Start from "Sites/Start";
+
+export const routes: Array<PathRouteProps> = [
+  {
+    path: "/",
+    element: <Start />,
+  },
+];
+
+export const privateRoutes: Array<PathRouteProps> = [];

src/Styles/customTheme.ts

@@ -0,0 +1,76 @@
+import { extendTheme } from "@chakra-ui/react";
+
+const Card = {
+  baseStyle: {
+    display: "flex",
+    flexDirection: "column",
+    background: "neutral",
+    alignItems: "center",
+    gap: 6,
+  },
+  // Two variants: rounded and smooth
+  variants: {
+    rounded: {
+      padding: 8,
+      borderRadius: "xl",
+      boxShadow: "xl",
+    },
+    smooth: {
+      padding: 6,
+      borderRadius: "base",
+      boxShadow: "md",
+    },
+  },
+  // The default variant value
+  defaultProps: {
+    variant: "smooth",
+  },
+};
+
+export const theme = extendTheme({
+  fonts: {
+    heading: "Raleway, sans-serif",
+    body: "Inter, sans-serif",
+  },
+  config: {
+    initialColorMode: "dark",
+  },
+  semanticTokens: {
+    color: {
+      neutral: {
+        default: "white.50",
+        _dark: "black.50",
+      },
+    },
+  },
+  components: {
+    Card,
+  },
+  styles: {
+    global: (props: any) => ({
+      "html, body": {
+        fontSize: "sm",
+        color: props.colorMode === "dark" ? "white" : "gray.600",
+        background: props.colorMode === "dark" ? "black" : "white",
+        lineHeight: "tall",
+      },
+      a: {
+        color: props.colorMode === "dark" ? "teal.300" : "teal.500",
+      },
+    }),
+  },
+  colors: {
+    gray: {
+      "50": "#F2F2F2",
+      "100": "#DBDBDB",
+      "200": "#C4C4C4",
+      "300": "#ADADAD",
+      "400": "#969696",
+      "500": "#808080",
+      "600": "#666666",
+      "700": "#4D4D4D",
+      "800": "#333333",
+      "900": "#1A1A1A",
+    },
+  },
+});

src/index.tsx

@@ -0,0 +1,19 @@
+import { ChakraProvider } from "@chakra-ui/react";
+import { StrictMode } from "react";
+import ReactDOM from "react-dom";
+
+// fonts
+import "@fontsource/raleway/latin.css";
+import "@fontsource/inter/latin.css";
+
+import App from "./App";
+import { theme } from "Styles/customTheme";
+
+ReactDOM.render(
+  <StrictMode>
+    <ChakraProvider theme={theme}>
+      <App />
+    </ChakraProvider>
+  </StrictMode>,
+  document.getElementById("root")
+);

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": "./src",
+  },
+  "include": ["./src"]
+}

vercel.json

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}

vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [tsconfigPaths(), react()],
+});