src/util/array.ts

+export function removeDuplicateObjects<T>(arr: T[], key: keyof T): T[] {
+  const tagMap = new Map(arr.map((item: T) => [item[key], item]));
+  return [...tagMap.values()];
+}

src/util/color.ts

+export function generateRandomHslColor(saturation = 100, lightness = 50, distinctValues = 20): string {
+  const randomColorIndex = getRandomIntInclusive(0, distinctValues);
+  const color = `hsl(${Math.floor(randomColorIndex * (360 / distinctValues))},${saturation}%,${lightness}%)`;
+  return color;
+}
+
+function getRandomIntInclusive(min: number, max: number) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}

src/util/fetcher.ts

+import { request } from 'graphql-request';
+import type { Variables } from 'graphql-request/dist/types';
+
+const fetcher = <T, V extends Variables>(query: string, variables?: V): Promise<T> =>
+  request(import.meta.env.SNOWPACK_PUBLIC_API_URL, query, variables);
+
+export default fetcher;

src/util/file.ts

+export const validateFile = (
+  file: File,
+  allowedSize = 5000000,
+  allowedExtensions = ['jpg', 'jpeg', 'png'],
+): boolean => {
+  const { name: fileName, size: fileSize } = file;
+
+  const fileExtension = fileName.split('.').pop();
+  if (fileExtension && !allowedExtensions.includes(fileExtension.toLowerCase())) {
+    return false;
+  } else if (fileSize > allowedSize) {
+    return false;
+  }
+  return true;
+};

tailwind.config.js

 module.exports = {
-  purge: [],
+  mode: 'jit',
+  purge: ['./src/**/*.html', './src/**/*.tsx'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
@@ -7,5 +8,9 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [],
-}
+  plugins: [
+    require('@tailwindcss/forms')({
+      strategy: 'class',
+    }),
+  ],
+};