init

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": ["next", "next/core-web-vitals"],
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
+}

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+.idea

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

Dockerfile

@@ -0,0 +1,60 @@
+FROM node:18 AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Uncomment the following lines if you want to use a secret at buildtime, 
+# for example to access your private npm packages
+# RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true \
+#     $(cat /run/secrets/HF_EXAMPLE_SECRET)
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN yarn build
+
+# If you use yarn, comment out this line and use the line above
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000

README.md

@@ -1,10 +1,26 @@
----
-title: Open Codetree
-emoji: 💻
-colorFrom: pink
-colorTo: pink
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<p align="center">
+  Next-gen online editor Playground, built with <a href="https://nextjs.org/" target="_blank">Next</a> and hosted with <a href="https://vercel.com/" target="_blank">Vercel</a>
+</p>
+<p align="center">
+    <img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat" alt="Netlify Status" />
+</p>
+
+![](public/preview-image.png)
+
+# Codetree : Standalone version 
+
+Codetree is a lightning fast ⚡️⚡️⚡️ code playground with automatic module detection as main feature. Unlike https://codepen.io/, Codetree is built on top of WebAssembly using esbuild, the code is compiled directly in your browser, without any backend and converted into machine language, allowing extremely fast execution and offline-mode.
+
+## Usage
+
+No need to install any npm package manually, codetree automatically detects the presence of import/require syntax in your file, downloads and installs npm package for you, for example just type `import React from "react"` for installing React library.
+
+## Features
+
+- Instant code compilation and preview (15x faster than codepen/codesanbox).
+
+- Automatic import of external library.
+
+- Auto-completion and intelliSense.
+
+- Offline mode.

_types/compilerTypes.ts

@@ -0,0 +1,9 @@
+export interface CompilerStatus {
+  isReady: boolean;
+  error: string;
+}
+
+export interface CompilerOutput {
+  code: string;
+  error: string;
+}

_types/editorTypes.ts

@@ -0,0 +1,23 @@
+export interface LanguagePropsInterface {
+  title: string;
+  entryPoints: string;
+  monacoLanguage: string;
+  data: string;
+}
+
+export interface IObjectKeys {
+  [key: string]: LanguagePropsInterface;
+}
+
+export interface LanguagesInterface extends IObjectKeys {
+  javascript: LanguagePropsInterface;
+  css: LanguagePropsInterface;
+  html: LanguagePropsInterface;
+}
+
+export interface EditorValueInterface {
+  name: string;
+  description: string;
+  public: boolean;
+  tabs: LanguagesInterface;
+}

additional.d.ts

@@ -0,0 +1,21 @@
+import "iron-session";
+import { User } from "./graphql/generated/graphql";
+import { OauthInput, OauthProvider } from "./store/features/authSlice";
+
+declare global {
+  interface Window {
+    withOauth: (input: OauthInput, provider: OauthProvider) => void;
+  }
+}
+
+declare module "iron-session" {
+  interface IronSessionData {
+    user?: {
+      message?: string;
+      token?: string | null;
+      status: boolean;
+      data: User;
+      isLoggedIn?: boolean;
+    };
+  }
+}

codegen.yml

@@ -0,0 +1,12 @@
+overwrite: true
+schema: "http://localhost:4000/graphql"
+documents: null
+generates:
+  graphql/generated/graphql.d.ts:
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+      - "typescript-react-apollo"
+  ./graphql.schema.json:
+    plugins:
+      - "introspection"

components/Avatar.tsx

@@ -0,0 +1,57 @@
+import Image from "next/image";
+import React from "react";
+
+interface AvatarProps {
+  image?: string;
+  username?: string;
+  size?: number;
+  gradient?: boolean;
+  className?: string;
+  placeholderType?: "blur" | "empty" | undefined;
+}
+
+export const Avatar = ({
+  image,
+  username,
+  size = 45,
+  gradient,
+  className,
+  placeholderType = "blur",
+}: AvatarProps) => {
+  if (image)
+    return (
+      <div
+        className={` ${
+          gradient && `bg-gradient-to-t from-violet-400 to-violet-100 p-0.5`
+        } relative flex justify-center items-center rounded-full shadow-xl overflow-hidden ${className}`}
+      >
+        <div className="flex">
+          <Image
+            src={image}
+            alt="avatar"
+            className="cursor-pointer rounded-full"
+            objectFit="cover"
+            width={size}
+            height={size}
+            placeholder={placeholderType}
+            quality={100}
+            blurDataURL={placeholderType === "blur" ? image : undefined}
+          />
+        </div>
+      </div>
+    );
+
+  return (
+    <div className="flex justify-center items-center relative">
+      <div
+        style={{
+          width: size,
+          height: size,
+        }}
+        className={`flex items-center justify-center bg-zinc-50 max-w-xs rounded-full mb-1 cursor-pointer border ${className}`}
+      >
+        {username?.charAt(0).toUpperCase()}
+      </div>
+    </div>
+  );
+};

components/Dropdown.tsx

@@ -0,0 +1,77 @@
+import React, { ReactNode, useEffect, useRef, useState } from "react";
+import { motion, Variants } from "framer-motion";
+import useOutsideRef from "../hooks/useOutsideRef";
+import Router from "next/router";
+import { useAppSelector } from "../store/hook";
+import { theme_state } from "../store/features/themeSlice";
+
+interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  classname: string;
+}
+
+export const Dropdown = ({ trigger, children, classname }: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const { theme } = useAppSelector(theme_state);
+
+  const { isOutsideRef } = useOutsideRef(dropdownRef);
+
+  useEffect(() => {
+    if (isOutsideRef) {
+      setIsOpen(false);
+    }
+  }, [isOutsideRef]);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  Router.events.on("routeChangeStart", () => {
+    setIsOpen(false);
+  });
+
+  const animation: Variants = {
+    enter: {
+      opacity: 1,
+      scale: 1,
+      transformOrigin: "top right",
+      transition: {
+        duration: 0.25,
+      },
+      display: "block",
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.7,
+      transformOrigin: "top right",
+      transition: {
+        duration: 0.2,
+        delay: 0.1,
+      },
+      transitionEnd: {
+        display: "none",
+      },
+    },
+  };
+
+  return (
+    <div ref={dropdownRef}>
+      <motion.div className="menu-item relative">
+        <div className="cursor-pointer" onClick={toggleMenu}>
+          {trigger}
+        </div>
+
+        <motion.div
+          className={`${classname} absolute shadow rounded-lg z-50 mt-3 glassmorphism`}
+          initial="exit"
+          animate={isOpen ? "enter" : "exit"}
+          variants={animation}
+        >
+          <div>{children}</div>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+};

components/Header.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useAppDispatch, useAppSelector } from "../store/hook";
+import { theme_state } from "../store/features/themeSlice";
+
+export const Header = () => {
+  const dispatch = useAppDispatch();
+  const { theme } = useAppSelector(theme_state);
+  return (
+    <div
+      style={{ height: "3rem", background: theme.background }}
+      className="flex items-center pl-5 pr-12 justify-between"
+    >
+      <div>
+        <div className="text-2xl font-medium text-gray-200">
+          Codetree AI
+        </div>
+      </div>
+    </div>
+  );
+};

components/Loader.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+interface LoaderProps {
+  size?: number;
+  color?: string;
+}
+
+const Loader = ({ size = 50, color = "#FFFFFF" }: LoaderProps) => {
+  return (
+    <div>
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 16 16"
+        color={color}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3.05022 3.05026 C 2.65969 3.44078 2.65969 4.07394 3.05022 4.46447 C 3.44074 4.85499 4.07391 4.85499 4.46443 4.46447 L 3.05022 3.05026Z M 4.46443 4.46447 C 5.16369 3.76521 6.05461 3.289 7.02451 3.09608 L 6.63433 1.13451 C 5.27647 1.4046 4.02918 2.07129 3.05022 3.05026 L 4.46443 4.46447Z M 7.02451 3.09608 C 7.99442 2.90315 8.99975 3.00217 9.91338 3.3806 L 10.6787 1.53285C9.39967 1.00303 7.9922 0.864409 6.63433 1.13451 L 7.02451 3.09608ZM9.91338 3.3806C10.827 3.75904 11.6079 4.39991 12.1573 5.22215L13.8203 4.11101C13.0511 2.95987 11.9578 2.06266 10.6787 1.53285L9.91338 3.3806ZM12.1573 5.22215C12.7067 6.0444 13 7.01109 13 8L15 8C15 6.61553 14.5894 5.26215 13.8203 4.11101L12.1573 5.22215Z"
+          fill="url(#paint0_linear_11825_47664)"
+        />
+        <path
+          d="M3 8C3 7.44772 2.55228 7 2 7C1.44772 7 1 7.44772 1 8L3 8ZM1 8C1 8.91925 1.18106 9.82951 1.53284 10.6788L3.3806 9.91342C3.12933 9.30679 3 8.65661 3 8L1 8ZM1.53284 10.6788C1.88463 11.5281 2.40024 12.2997 3.05025 12.9497L4.46447 11.5355C4.00017 11.0712 3.63188 10.52 3.3806 9.91342L1.53284 10.6788ZM3.05025 12.9497C3.70026 13.5998 4.47194 14.1154 5.32122 14.4672L6.08658 12.6194C5.47996 12.3681 4.92876 11.9998 4.46447 11.5355L3.05025 12.9497ZM5.32122 14.4672C6.1705 14.8189 7.08075 15 8 15L8 13C7.34339 13 6.69321 12.8707 6.08658 12.6194L5.32122 14.4672ZM8 15C8.91925 15 9.82951 14.8189 10.6788 14.4672L9.91342 12.6194C9.30679 12.8707 8.65661 13 8 13L8 15ZM10.6788 14.4672C11.5281 14.1154 12.2997 13.5998 12.9497 12.9497L11.5355 11.5355C11.0712 11.9998 10.52 12.3681 9.91342 12.6194L10.6788 14.4672ZM12.9497 12.9497C13.5998 12.2997 14.1154 11.5281 14.4672 10.6788L12.6194 9.91342C12.3681 10.52 11.9998 11.0712 11.5355 11.5355L12.9497 12.9497ZM14.4672 10.6788C14.8189 9.8295 15 8.91925 15 8L13 8C13 8.65661 12.8707 9.30679 12.6194 9.91342L14.4672 10.6788Z"
+          fill="url(#paint1_linear_11825_47664)"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_11825_47664"
+            x1="14"
+            y1="8"
+            x2="2"
+            y2="8"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="currentColor" stopOpacity="0.5" />
+            <stop offset="1" stopColor="currentColor" stopOpacity="0" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_11825_47664"
+            x1="2"
+            y1="8"
+            x2="14"
+            y2="8"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="currentColor" />
+            <stop offset="1" stopColor="currentColor" stopOpacity="0.5" />
+          </linearGradient>
+        </defs>
+        <animateTransform
+          from="0 0 0"
+          to="360 0 0"
+          attributeName="transform"
+          type="rotate"
+          repeatCount="indefinite"
+          dur="1300ms"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default Loader;

components/Modals/AuthModal.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { useAppDispatch } from "../../store/hook";
+import { getGithubOAuthURL, getGoogleOAuthURL } from "../../utils/getOAuthUrl";
+import { nativePopup } from "../../utils/nativePopup";
+import { close_modal } from "../../store/features/modalSlice";
+import { modalVariant } from "./config";
+import { RiGithubFill, RiGoogleFill } from "react-icons/ri";
+
+const AuthModal = () => {
+  const dispatch = useAppDispatch();
+
+  return (
+    <motion.div
+      className="sm:mt-10 mx-auto h-full sm:h-auto sm:w-8/12 lg:w-6/12 xl:w-4/12"
+      variants={modalVariant}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      transition={{ ease: "easeOut", duration: 0.3 }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="h-full flex flex-col shadow-xl sm:rounded-xl overflow-hidden">
+        <div
+          className="h-64 w-full"
+          style={{
+            backgroundImage: `url(https://cdn.dribbble.com/userupload/3396431/file/original-d865684d8f3afbc99fcab7ab38f9ee9e.png?compress=1&resize=1504x1128)`,
+            backgroundPosition: "center",
+            backgroundSize: "cover",
+          }}
+        />
+
+        <div className="flex h-52 flex-col justify-center items-center gap-7 glassmorphism">
+          <button
+            onClick={() => {
+              nativePopup({
+                pageURL: getGoogleOAuthURL(),
+                pageTitle: "Codetree authentication",
+                popupWinWidth: 490,
+                popupWinHeight: 600,
+              });
+
+              dispatch(close_modal());
+            }}
+            className="px-5 border border-gray-400 flex gap-x-5 items-center justify-center w-80 h-12 rounded-xl text-gray-300"
+          >
+            <RiGoogleFill size={24} />
+            <div>Sign in with google</div>
+          </button>
+
+          <button
+            onClick={() => {
+              nativePopup({
+                pageURL: getGithubOAuthURL(),
+                pageTitle: "Codetree authentication",
+                popupWinWidth: 490,
+                popupWinHeight: 600,
+              });
+
+              dispatch(close_modal());
+            }}
+            className="px-5 border border-gray-400  flex gap-x-5 items-center justify-center w-80 h-12 rounded-xl text-gray-300"
+          >
+            <RiGithubFill size={24} />
+            <div>Sign in with github</div>
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default AuthModal;

components/Modals/RootModal.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+import { useAppDispatch, useAppSelector } from "../../store/hook";
+import {
+  modal_state,
+  close_modal,
+  ModalEnum,
+} from "../../store/features/modalSlice";
+
+import AuthModal from "./AuthModal";
+import TemplateModal from "./TemplateModal";
+import SettingsModal from "./SettingsModal";
+
+export const RootModal = () => {
+  const { type, visible } = useAppSelector(modal_state);
+  const dispatch = useAppDispatch();
+
+  const renderModal = (type: ModalEnum) => {
+    switch (type) {
+      case ModalEnum.AUTH:
+        return <AuthModal />;
+
+      case ModalEnum.TEMPLATE:
+        return <TemplateModal />;
+
+      case ModalEnum.SETTINGS:
+        return <SettingsModal />;
+
+      case ModalEnum.IDLE:
+        return <div />;
+    }
+  };
+
+  return (
+    <AnimatePresence exitBeforeEnter onExitComplete={() => null}>
+      {visible && (
+        <motion.div
+          className="backdrop"
+          onClick={() => dispatch(close_modal())}
+        >
+          {renderModal(type)}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

components/Modals/SettingsModal.tsx

@@ -0,0 +1,196 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { useForm } from "react-hook-form";
+import { useAppDispatch, useAppSelector } from "../../store/hook";
+import { editor_state, set_options } from "../../store/features/editorSlice";
+import { modalVariant } from "./config";
+import { theme_state } from "../../store/features/themeSlice";
+
+const SettingsModal = () => {
+  const dispatch = useAppDispatch();
+  const { options } = useAppSelector(editor_state);
+  const { theme } = useAppSelector(theme_state);
+
+  const { register, handleSubmit } = useForm();
+
+  const onChangeOptions = ({
+    fontSize,
+    fontWeight,
+    minimapEnabled,
+    minimapScale,
+    wordWrap,
+    autoClosingBrackets,
+  }: any) => {
+    const custom = {
+      fontSize: parseInt(fontSize),
+      fontWeight: fontWeight,
+      minimap: {
+        enabled: minimapEnabled,
+        scale: parseInt(minimapScale),
+      },
+      wordWrap: wordWrap,
+      autoClosingBrackets: { autoClosingBrackets },
+      showUnused: true,
+      automaticLayout: true,
+      tabSize: 2,
+      renderLineHighlight: "none",
+      scrollbar: { verticalScrollbarSize: 10, verticalSliderSize: 10 },
+    };
+
+    dispatch(set_options(custom));
+  };
+
+  return (
+    <motion.div
+      className="sm:mt-10 mx-auto h-full sm:h-auto sm:w-8/12 lg:w-6/12 sm:rounded-xl overflow-hidden glassmorphism"
+      variants={modalVariant}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      transition={{ ease: "easeOut", duration: 0.3 }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div
+        style={{ backgroundColor: theme.foreground }}
+        className="border-b border-black h-10 flex items-center px-7"
+      >
+        <h1 className="text-xl"> Settings</h1>
+      </div>
+
+      <div className="overflow-auto h-full">
+        <div className="pt-6 px-7 ">
+          <form
+            className=" mb-12 overflow-auto"
+            onSubmit={handleSubmit(onChangeOptions)}
+          >
+            {/* Fonts */}
+            <div className="editor-sub-settings">
+              <div className="title">Font size : </div>
+              <div className="description">Set the font size in pixels.</div>
+              <select
+                {...register("fontSize")}
+                id="fontSize"
+                className="editor-select"
+                defaultValue={options.fontSize}
+                style={{
+                  backgroundColor: theme.foreground,
+                }}
+              >
+                <option value={9}>9</option>
+                <option value={10}>10</option>
+                <option value={11}>11</option>
+                <option value={12}>12</option>
+                <option value={13}>13</option>
+                <option value={14}>14</option>
+                <option value={15}>15</option>
+                <option value={16}>16</option>
+                <option value={17}>17</option>
+              </select>
+            </div>
+
+            <div className="editor-sub-settings">
+              <div className="title">Font weight : </div>
+              <div className="description">Defines how bold you text are.</div>
+              <select
+                {...register("fontWeight")}
+                id="fontWeight"
+                className="editor-select"
+                defaultValue={options.fontWeight}
+                style={{
+                  backgroundColor: theme.foreground,
+                }}
+              >
+                <option value="500">Regular</option>
+                <option value="600">Bold</option>
+              </select>
+            </div>
+
+            {/* Minimap */}
+            <div className="editor-sub-settings">
+              <div className="title">Enabled minimap : </div>
+              <div className="description">
+                Control if the minimap should be shown.
+              </div>
+              <div className="flex items-center">
+                <input
+                  {...register("minimapEnabled")}
+                  id="minimap-enabled"
+                  className="editor-select mr-2"
+                  type="checkbox"
+                  defaultChecked={options.minimap?.enabled}
+                  style={{
+                    backgroundColor: theme.foreground,
+                  }}
+                />
+                <label>On </label>
+              </div>
+            </div>
+
+            <div className="editor-sub-settings">
+              <div className="title">Scale : </div>
+              <div className="description">Set the size of the minimap.</div>
+              <select
+                {...register("minimapScale")}
+                id="minimap-scale"
+                className="editor-select"
+                defaultValue={options.minimap?.scale}
+                style={{
+                  backgroundColor: theme.foreground,
+                }}
+              >
+                <option value={1}>1</option>
+                <option value={2}>2</option>
+                <option value={3}>3</option>
+              </select>
+            </div>
+
+            {/* Others */}
+            <div className="editor-sub-settings">
+              <div className="title">Word wrap : </div>
+              <div className="description">Control if lines should wrap.</div>
+              <select
+                {...register("wordWrap")}
+                id="wordWrap"
+                className="editor-select"
+                defaultValue={options.wordWrap}
+                style={{
+                  backgroundColor: theme.foreground,
+                }}
+              >
+                <option value="on">On</option>
+                <option value="off">Off</option>
+              </select>
+            </div>
+
+            <div className="editor-sub-settings">
+              <div className="title">Auto Closing Brackets : </div>
+              <div className="description">
+                Controls if brackets should close automatically
+              </div>
+              <select
+                {...register("autoClosingBrackets")}
+                id="autoClosingBrackets"
+                className="editor-select"
+                defaultValue={options.autoClosingBrackets}
+                style={{
+                  backgroundColor: theme.foreground,
+                }}
+              >
+                <option value="always">always</option>
+                <option value="languageDefined">languageDefined</option>
+                <option value="beforeWhitespace">beforeWhitespace</option>
+                <option value="never">never</option>
+              </select>
+            </div>
+
+            <button className="editor-button h-9 mt-6" type="submit">
+              Save settings
+            </button>
+          </form>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default SettingsModal;

components/Modals/TemplateModal.tsx

@@ -0,0 +1,65 @@
+import { motion } from "framer-motion";
+import { useTree } from "../../hooks";
+import { treeTemplates } from "../../constants";
+import { useAppSelector } from "../../store/hook";
+import { theme_state } from "../../store/features/themeSlice";
+import { compiler_state } from "../../store/features/compilerSlice";
+import { TemplateSelectionSkeleton } from "../Skeleton/TemplateSelectionSkeleton";
+import { modalVariant } from "./config";
+
+const TemplateModal = () => {
+  const { theme } = useAppSelector(theme_state);
+  const { esbuildStatus } = useAppSelector(compiler_state);
+  const { setTree } = useTree();
+
+  let arr = [];
+
+  for (const item of Object.entries(treeTemplates)) {
+    arr.push(item);
+  }
+
+  const templates = arr.map((template, key) => (
+    <button
+      key={key}
+      name={template[1].name}
+      onClick={() => setTree(template[1])}
+      className="p-2 rounded-sm"
+    >
+      <div className="flex pointer-events-none">
+        <img
+          alt={template[1].name}
+          src={template[1].iconSrc}
+          className="h-9 w-9 rounded-sm"
+        />
+        <div className="flex flex-col items-start justify-start pl-4">
+          <div>{template[1].name}</div>
+          <div className="text-xs text-gray-400">{template[1].description}</div>
+        </div>
+      </div>
+    </button>
+  ));
+
+  return (
+    <motion.div
+      className="sm:mt-44 mx-auto h-full sm:h-auto sm:w-8/12 lg:w-6/12 sm:pb-20 sm:rounded-xl overflow-hidden glassmorphism"
+      variants={modalVariant}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      transition={{ ease: "easeOut", duration: 0.3 }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div
+        style={{ backgroundColor: theme.foreground }}
+        className="border-b border-black h-10 flex items-center px-7"
+      >
+        <h1 className="text-xl">Templates</h1>
+      </div>
+      <div className="pt-6 px-7 flex flex-wrap gap-x-14 gap-y-8">
+        {esbuildStatus.isReady ? templates : <TemplateSelectionSkeleton />}
+      </div>
+    </motion.div>
+  );
+};
+
+export default TemplateModal;

components/Modals/config.ts

@@ -0,0 +1,7 @@
+import { Variants } from "framer-motion";
+
+export const modalVariant: Variants = {
+  initial: { scale: 0.95, opacity: 0 },
+  animate: { scale: 1, opacity: 1 },
+  exit: { scale: 0.98, opacity: 0 },
+};

components/Playground/ConsoleLog.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import dynamic from "next/dynamic";
+import { useAppDispatch, useAppSelector } from "../../store/hook";
+import { clear_logs } from "../../store/features/editorSlice";
+
+import { theme_state } from "../../store/features/themeSlice";
+
+const Console = dynamic(import("console-feed/lib/Component"), { ssr: false });
+
+interface LogsProps {
+  logs: any;
+}
+
+const Logs = ({ logs }: LogsProps) => {
+  const { theme } = useAppSelector(theme_state);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="text-gray-300 relative h-full">
+      <div className="flex items-center justify-between px-3 h-9">
+        <button
+          onClick={() => dispatch(clear_logs())}
+          className="editor-button h-5 mr-3"
+        >
+          Clear
+        </button>
+      </div>
+
+      <div className="h-80 overflow-auto">
+        <Console
+          styles={{
+            BASE_FONT_FAMILY: '"Rubik", sans-serif;',
+            BASE_FONT_SIZE: 14,
+            BASE_BACKGROUND_COLOR: theme.background,
+            LOG_BORDER: theme.border,
+          }}
+          logs={logs}
+          variant="dark"
+        />
+      </div>
+    </div>
+  );
+};
+
+const ConsoleLog = React.memo(Logs);
+
+export default ConsoleLog;

components/Playground/Footer.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { useAppDispatch, useAppSelector } from "../../store/hook";
+import {
+  editor_state,
+  toggle_logs_tab,
+} from "../../store/features/editorSlice";
+import { compiler_state } from "../../store/features/compilerSlice";
+import { RiTerminalLine } from "react-icons/ri";
+
+const Footer = () => {
+  const { logs } = useAppSelector(editor_state);
+  const { isCompiling } = useAppSelector(compiler_state);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div
+      style={{ height: "2rem" }}
+      className="h-full w-full flex items-center justify-between bg-tree-hard border-t-2 border-black text-gray-300 pl-5 pb-0.5 flex-shrink-0 z-50"
+    >
+      <div className="flex items-center">
+        {isCompiling && (
+          <div className="ml-10">
+            <span className="loader --1" />
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-center items-center">
+        <div
+          onClick={() => dispatch(toggle_logs_tab())}
+          className="flex items-center cursor-pointer text-gray-400"
+        >
+          <RiTerminalLine size={20} />
+        </div>
+
+        <div className="ml-2  w-6">
+          {logs.length > 0 && (
+            <div className="h-5 w-5 flex justify-center items-center">
+              <div className="absolute p-1.5 bg-teal-400 rounded-full animate-ping" />
+              <div className="absolute p-1 bg-teal-400  border-white rounded-full" />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

components/Playground/Header.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { RiAddFill, RiSettings3Fill } from "react-icons/ri";
+import { useAppDispatch } from "../../store/hook";
+import { ModalEnum, open_modal } from "../../store/features/modalSlice";
+
+const Header = () => {
+  const dispatch = useAppDispatch();
+
+  return (
+    <div style={{ height: "3rem" }} className="flex justify-end px-12">
+      <div className="flex gap-4 items-center ">
+        <RiAddFill
+          size={24}
+          className="cursor-pointer text-gray-400"
+          onClick={() => dispatch(open_modal(ModalEnum.TEMPLATE))}
+        />
+        <RiSettings3Fill
+          size={20}
+          className="cursor-pointer text-gray-400"
+          onClick={() => dispatch(open_modal(ModalEnum.SETTINGS))}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Header;

components/Playground/Iframe.tsx

@@ -0,0 +1,101 @@
+import React, { useRef, useEffect } from "react";
+
+import { useAppDispatch } from "../../store/hook";
+import { update_logs } from "../../store/features/editorSlice";
+import { getCompileCode } from "../../store/features/compilerSlice";
+import { createIframeContent } from "../../utils/createIframeContent";
+import { IframeLoaderScreen } from "./IframeLoaderScreen";
+import { IframeErrorScreen } from "./IframeErrorScreen";
+import { LanguagesInterface } from "../../_types/editorTypes";
+import { CompilerOutput, CompilerStatus } from "../../_types/compilerTypes";
+
+interface IframeProps {
+  tabs: LanguagesInterface;
+  output: CompilerOutput;
+  isCompiling: boolean;
+  esbuildStatus: CompilerStatus;
+}
+
+const IframePanel = ({
+  tabs,
+  output,
+  isCompiling,
+  esbuildStatus,
+}: IframeProps) => {
+  const iframe = useRef<any>();
+  const dispatch = useAppDispatch();
+
+  const htmlFrameContent = createIframeContent(tabs.css?.data, tabs.html?.data);
+
+  //=== incoming message
+  useEffect(() => {
+    window.onmessage = function (response: MessageEvent) {
+      if (response.data && response.data.source === "iframe") {
+        let errorObject = {
+          method: "error",
+          id: Date.now(),
+          data: [`${response.data.message}`],
+        };
+        dispatch(update_logs(errorObject));
+      }
+    };
+
+    if (tabs.javascript && esbuildStatus.isReady) {
+      setTimeout(async () => {
+        dispatch(
+          getCompileCode(tabs.javascript.data, tabs.javascript.entryPoints)
+        );
+      }, 50);
+    }
+  }, [dispatch, tabs, esbuildStatus.isReady]);
+
+  //=== outgoing massage
+  useEffect(() => {
+    iframe.current.srcdoc = htmlFrameContent;
+
+    setTimeout(async () => {
+      iframe?.current?.contentWindow?.postMessage(output.code, "*");
+    }, 40);
+  }, [htmlFrameContent, output]);
+
+  return (
+    <div className="iframe-container">
+      {/* build error */}
+      {output.error ? <IframeErrorScreen err={output.error} /> : ""}
+
+      {/* Loading screen */}
+      {isCompiling ? (
+        <div className="absolute h-full w-full bg-gray-50 z-40">
+          <IframeLoaderScreen />
+        </div>
+      ) : (
+        ""
+      )}
+
+      <iframe
+        id="super-iframe"
+        sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
+        allow="accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write"
+        scrolling="auto"
+        frameBorder="0"
+        ref={iframe}
+        title="previewWindow"
+        srcDoc={htmlFrameContent}
+        onLoad={async () => {
+          const Hook = (await import("console-feed")).Hook;
+          Hook(
+            iframe.current.contentWindow.console,
+            (log) => {
+              dispatch(update_logs(log));
+            },
+            false
+          );
+        }}
+      />
+    </div>
+  );
+};
+
+const Iframe = React.memo(IframePanel);
+
+export default Iframe;

components/Playground/IframeErrorScreen.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const IframeErrorScreen = ({ err }: any) => {
+  return (
+    <div className="px-5 pt-10 text-red-600 tracking-wide absolute h-full w-full z-50 backdrop-filter backdrop-blur">
+      {err}
+    </div>
+  );
+};

components/Playground/IframeLoaderScreen.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+export const IframeLoaderScreen = () => {
+  return (
+    <div className="boxes">
+      <div className="box">
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+      <div className="box">
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+      <div className="box">
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+      <div className="box">
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  );
+};

components/Playground/InputCodeTab.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react";
+import Tabs, { TabPane } from "rc-tabs";
+import { Monaco } from "./Monaco";
+import { EditorValueInterface } from "../../_types/editorTypes";
+
+const InputCode = ({ editorValue: parentEditorValue }: { editorValue: EditorValueInterface }) => {
+  const [editorValue, setEditorValue] = useState(parentEditorValue);
+  
+  // Update local state when parent state updates
+  useEffect(() => {
+    setEditorValue(parentEditorValue);
+  }, [parentEditorValue]);
+
+  const dataToMap = Object.entries(editorValue.tabs);
+
+  const tabPane = dataToMap.map((item, key) => (
+    <TabPane tab={<div>{item[1].title}</div>} key={key}>
+      <Monaco tab={item[0]} monacoLanguage={item[1].monacoLanguage} />
+    </TabPane>
+  ));
+
+  return (
+    <Tabs
+      className="editor-input-tabs"
+      tabPosition="top"
+      tabBarGutter={16}
+      defaultActiveKey="javascript"
+    >
+      {tabPane}
+    </Tabs>
+  );
+};
+
+const InputCodeTab = React.memo(InputCode);
+
+export default InputCodeTab;

components/Playground/Monaco.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from "react";
+import MonacoEditor from "@monaco-editor/react";
+import { useMonaco } from "../../hooks";
+import { useAppDispatch, useAppSelector } from "../../store/hook";
+import {
+  editor_state,
+  update_editor_code,
+} from "../../store/features/editorSlice";
+
+type MonacoType = { monacoLanguage: string | undefined; tab: string };
+
+export const Monaco = ({ monacoLanguage, tab }: MonacoType) => {
+  const dispatch = useAppDispatch();
+  const { monacoInputValue, options } = useAppSelector(editor_state);
+  const { onChange, onMount, code } = useMonaco();
+
+  useEffect(() => {
+    if (code && code?.length >= 1)
+      dispatch(update_editor_code({ type: tab, content: code }));
+  }, [code, dispatch, tab]);
+
+  return (
+    <MonacoEditor
+      onChange={onChange}
+      onMount={onMount}
+      language={monacoLanguage}
+      theme="vs-dark"
+      options={options}
+      className="h-full"
+      // @ts-ignore
+      value={monacoInputValue.tabs[tab]?.data || ''}
+    />
+  );
+};

components/Playground/Pane.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from "react";
+import { Allotment } from "allotment";
+import { LayoutPriority } from "allotment/dist/types/src/split-view";
+
+interface Pane {
+  panelA: ReactNode;
+  panelB: ReactNode;
+  panelC: ReactNode;
+  lastPanelVisibility: boolean;
+}
+
+const EditorPanel = ({ panelA, panelB, panelC, lastPanelVisibility }: Pane) => {
+  return (
+    <div style={{ height: "calc(100vh - 8rem)" }}>
+      <Allotment>
+        <Allotment.Pane>{panelA}</Allotment.Pane>
+
+        <Allotment onVisibleChange={function noRefCheck() {}} vertical={true}>
+          <Allotment.Pane
+            priority={"HIGH" as LayoutPriority}
+            preferredSize="70%"
+            visible
+          >
+            {panelB}
+          </Allotment.Pane>
+
+          <Allotment.Pane
+            preferredSize="30%"
+            priority={"LOW" as LayoutPriority}
+            snap
+            visible={lastPanelVisibility}
+          >
+            {panelC}
+          </Allotment.Pane>
+        </Allotment>
+      </Allotment>
+    </div>
+  );
+};
+
+export default EditorPanel;

components/Playground/index.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo, useRef, useEffect, useState, ChangeEvent, FormEvent } from "react";
+import { useChat, Message } from "ai/react";
+import { FunctionCallHandler, nanoid } from "ai";
+import { useAppDispatch, useAppSelector } from "../../store/hook";
+import {
+  compiler_state,
+  initEsbuild,
+} from "../../store/features/compilerSlice";
+import { editor_state, set_monaco_input_value, update_editor_code } from "../../store/features/editorSlice";
+import { theme_state } from "../../store/features/themeSlice";
+import { ModalEnum, open_modal } from "../../store/features/modalSlice";
+
+import ConsoleLog from "./ConsoleLog";
+import Iframe from "./Iframe";
+import InputCodeTab from "./InputCodeTab";
+import Footer from "./Footer";
+import Pane from "./Pane";
+import { SendIcon } from "../../constants/icon";
+import ReactMarkdown from "react-markdown";
+
+const Playground = () => {
+  const dispatch = useAppDispatch();
+  const formRef = useRef<HTMLFormElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const { theme } = useAppSelector(theme_state);
+  const { esbuildStatus, isCompiling, output } = useAppSelector(compiler_state);
+  const { logs, editorValue, isLogTabOpen } = useAppSelector(editor_state);
+  const [markdownCode, setMarkdownCode] = useState('');
+  const [prevMarkdownCode, setPrevMarkdownCode] = useState(markdownCode);
+
+  const isValidCodeBlock = (markdownCode: string) => {
+    return markdownCode && markdownCode.length > 10 && markdownCode.includes('\n');
+  }
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (isValidCodeBlock(markdownCode) && markdownCode !== prevMarkdownCode) {
+        dispatch(update_editor_code({ type: 'javascript', content: markdownCode }));
+        setPrevMarkdownCode(markdownCode);
+      }
+    }, 2000);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [markdownCode, prevMarkdownCode, dispatch]);
+
+
+  const { messages, input, setInput, handleSubmit } = useChat({
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  useEffect(() => {
+    if (!esbuildStatus.isReady) {
+      dispatch(initEsbuild());
+    }
+  }, [dispatch, esbuildStatus]);
+
+  useEffect(() => {
+    dispatch(open_modal(ModalEnum.TEMPLATE));
+  }, [dispatch]);
+
+  useEffect(() => {
+    if(isValidCodeBlock(markdownCode)) {
+      const newEditorValue = {
+        name: "React",
+        description: "By codetree",
+        public: true,
+        iconSrc: "/icons/reactjs.svg",
+        tabs: {
+          javascript: {
+            title: "JS/JSX",
+            entryPoints: "index.js",
+            monacoLanguage: "javascript",
+            data: markdownCode
+          },
+          html: {
+            title: "index.html",
+            entryPoints: "index.html",
+            monacoLanguage: "html",
+            data: ""
+          },
+          css: {
+            title: "main.css",
+            entryPoints: "main.css",
+            monacoLanguage: "css",
+            data: ""
+          }
+        }
+      };
+      
+      dispatch(set_monaco_input_value(newEditorValue as any));
+    }
+  }, [markdownCode, dispatch]);
+
+  return (
+    <div style={{ background: theme.background }}>
+      <div className="flex flex-col">
+        <div className="px-4 pb-2 pt-3 shadow-lg sm:pb-3 sm:pt-4">
+          <form
+              ref={formRef}
+              onSubmit={handleSubmit}
+              className="relative w-full"
+            >
+            <textarea ref={inputRef} onChange={(e) => setInput(e.target.value)}
+              placeholder="Chat with GPT-4 and code blocks will automatically render in the editor! Codetree uses WebAssembly and Esbuild to compile in the browser."
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  formRef.current?.requestSubmit();
+                  e.preventDefault();
+                }
+              }}
+              spellCheck={false} className="textarea" value={input} />
+            <button 
+                type="submit"
+                className="absolute inset-y-0 right-3 my-auto flex h-8 w-8 items-center justify-center rounded-md transition-all"
+            >
+              <SendIcon
+                  className={"h-4 w-4"}
+              />
+            </button>
+          </form>
+        </div>
+        <div className="flex flex-col items-start space-y-4 overflow-y-auto max-h-[20vh]">
+          {messages?.map((message, index) => (
+            <p key={index} className="messages-text">
+              <ReactMarkdown
+                className="prose mt-1 w-full break-words prose-p:leading-relaxed" 
+                components={{
+                  a: (props) => (
+                    <a {...props} target="_blank" rel="noopener noreferrer" />
+                  ),
+                  // @ts-ignore
+                  code: ({node, ...props}) => {
+                    const codeValue = props.children[0] || '';
+                    setMarkdownCode(codeValue as any);
+                    
+                    return null;
+                  }                    
+                }}
+              >
+                {message.content}
+              </ReactMarkdown>
+            </p>
+          ))}
+        </div>
+      </div>
+      <Pane
+        panelA={<InputCodeTab editorValue={editorValue} />}
+        panelB={
+          <Iframe
+            tabs={editorValue.tabs}
+            output={output}
+            isCompiling={isCompiling}
+            esbuildStatus={esbuildStatus}
+          />
+        }
+        panelC={<ConsoleLog logs={logs} />}
+        lastPanelVisibility={isLogTabOpen}
+      />
+
+      <Footer />
+    </div>
+
+  );
+};
+
+export default Playground;

components/Skeleton/TemplateSelectionSkeleton.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export const TemplateSelectionSkeleton = () => {
+  let items = [];
+
+  for (let i = 0; i < 10; i++) {
+    items.push(
+      <div key={i} className="flex animate-pulse">
+        <div className="h-9 w-9 bg-gray-400 rounded-sm" />
+        <div className="flex flex-col items-start justify-start pl-4 space-y-2.5 mt-1.5">
+          <div className="h-2 w-12 bg-gray-400 rounded-sm" />
+          <div className="h-2 w-20 bg-gray-400 rounded-sm" />
+        </div>
+      </div>
+    );
+  }
+
+  return <>{items}</>;
+};

constants/icon.tsx

@@ -0,0 +1,18 @@
+
+
+export const SendIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="none"
+      className={className}
+      strokeWidth="2"
+    >
+      <path
+        d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};

constants/index.ts

@@ -0,0 +1,2 @@
+export * from "./templates";
+export * from "./monacoOptions";

constants/monacoOptions.ts

@@ -0,0 +1,16 @@
+import { editor } from "monaco-editor";
+
+export const monacoOptions: editor.IStandaloneEditorConstructionOptions = {
+  fontSize: 12,
+  fontWeight: "500",
+  minimap: {
+    enabled: false,
+  },
+  wordWrap: "on",
+  autoClosingBrackets: "always",
+  showUnused: true,
+  automaticLayout: true,
+  tabSize: 2,
+  renderLineHighlight: "none",
+  scrollbar: { verticalScrollbarSize: 10, verticalSliderSize: 10 },
+};

constants/templates.ts

@@ -0,0 +1,271 @@
+export const treeTemplates = {
+  _empty: {
+    name: "Empty",
+    description: "By codetree",
+    public: true,
+    iconSrc: "/icons/vanilla.svg",
+    tabs: {
+      javascript: {
+        title: "app.jsx",
+        entryPoints: "index.js",
+        monacoLanguage: "javascript",
+        data: ``,
+      },
+      html: {
+        title: "index.html",
+        entryPoints: "index.html",
+        monacoLanguage: "html",
+        data: ``,
+      },
+      css: {
+        title: "main.css",
+        entryPoints: "main.css",
+        monacoLanguage: "css",
+        data: ``,
+      },
+    },
+  },
+  _vanilla: {
+    name: "Vanilla",
+    description: "By codetree",
+    public: true,
+    iconSrc: "/icons/vanilla.svg",
+    tabs: {
+      javascript: {
+        title: "JS/JSX",
+        entryPoints: "index.js",
+        monacoLanguage: "javascript",
+        data: `document.getElementById("app").innerHTML = \`
+<h1>Vanilla</h1>
+<div>
+  Bare minimal javascript template
+</div>
+\`;
+`,
+      },
+      html: {
+        title: "html",
+        entryPoints: "index.html",
+        monacoLanguage: "html",
+        data: `<div id="app"></div>`,
+      },
+      css: {
+        title: "Css",
+        entryPoints: "main.css",
+        monacoLanguage: "css",
+        data: `body {
+  font-family: sans-serif;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+`,
+      },
+    },
+  },
+  _typescript: {
+    name: "Typescript",
+    description: "By codetree",
+    public: true,
+    iconSrc: "/icons/typescript.svg",
+    tabs: {
+      javascript: {
+        title: "Ts/Tsx",
+        entryPoints: "index.ts",
+        monacoLanguage: "typescript",
+        data: `function add(x: number, y: number): number {
+  return x + y;
+}
+
+const result = add(2,5)
+
+console.log(result)`,
+      },
+      html: {
+        title: "Html",
+        entryPoints: "index.html",
+        monacoLanguage: "html",
+        data: `<div id="app">
+  <h1>Typescript</h1>
+  <div>Bare minimal Typescript template 🚀</div>
+</div>
+`,
+      },
+      css: {
+        title: "Css",
+        entryPoints: "main.css",
+        monacoLanguage: "css",
+        data: `body {
+  font-family: sans-serif;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+`,
+      },
+    },
+  },
+  _p5: {
+    name: "P5js",
+    description: "By codetree",
+    public: true,
+    iconSrc: "/icons/p5-dot-js.svg",
+    tabs: {
+      javascript: {
+        title: "JS/JSX",
+        entryPoints: "index.js",
+        monacoLanguage: "javascript",
+        data: `import p5 from "p5";
+
+let sketch = function (p) {
+  p.setup = function () {
+    p.createCanvas(window.innerWidth, window.innerHeight);
+    p.background(0);
+  };
+  p.draw = () => {
+    // sketch.background(100);
+    p.fill(255);
+    p.ellipse(p.mouseX, p.mouseY, 50, 50);
+  };
+};
+ 
+new p5(sketch, window.document.getElementById("container"));
+`,
+      },
+      html: {
+        title: "Html",
+        entryPoints: "index.html",
+        monacoLanguage: "html",
+        data: ``,
+      },
+      css: {
+        title: "Css",
+        entryPoints: "main.css",
+        monacoLanguage: "css",
+        data: `body {
+  margin: 0px;
+  font-family: sans-serif;
+}
+canvas {
+  margin: 0px;
+}
+`,
+      },
+    },
+  },
+  _react: {
+    name: "React",
+    description: "By codetree",
+    public: true,
+    iconSrc: "/icons/reactjs.svg",
+    tabs: {
+      javascript: {
+        title: "JS/JSX",
+        entryPoints: "index.js",
+        monacoLanguage: "javascript",
+        data: `import React, { useState } from "react";
+import ReactDOM from "react-dom";
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="App">
+      <h1>Hello ReactTree</h1>
+      <h2>You clicked {count} times!</h2>
+
+      <button onClick={() => setCount(count - 1)}>Decrement</button>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<App />, rootElement);
+`,
+      },
+      html: {
+        title: "index.html",
+        entryPoints: "index.html",
+        monacoLanguage: "html",
+        data: ``,
+      },
+      css: {
+        title: "main.css",
+        entryPoints: "main.css",
+        monacoLanguage: "css",
+        data: `.App {
+  font-family: sans-serif;
+  text-align: center;
+}
+`,
+      },
+    },
+  },
+  _gsap: {
+    name: "Gsap",
+    description: "By codetree",
+    public: true,
+    iconSrc: "/icons/gsap-greensock.svg",
+    tabs: {
+      javascript: {
+        title: "JS/JSX",
+        entryPoints: "index.js",
+        monacoLanguage: "javascript",
+        data: `import gsap from "gsap"
+
+var tl = gsap.timeline({ repeat: -1 });
+tl.to("h1", 30, { backgroundPosition: "-960px 0" });
+`,
+      },
+      html: {
+        title: "Html",
+        entryPoints: "index.html",
+        monacoLanguage: "html",
+        data: `<div class="wrapper">
+  <h1 class="title">Codetree<h1>
+</div> `,
+      },
+      css: {
+        title: "Css",
+        entryPoints: "main.css",
+        monacoLanguage: "css",
+        data: `body {
+  background-color: #1d1d1d;
+  margin: 0;
+  padding: 0;
+}
+
+.wrapper {
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+}
+
+h1 {
+  max-width: 75%;
+  font-size: 100px;
+  text-align: center;
+  font-family: "Montserrat", sans-serif;
+  color: #540032;
+}
+
+.title {
+  background-image: url(https://cdn.pixabay.com/photo/2017/07/03/20/17/abstract-2468874_960_720.jpg);
+  background-attachment: fixed;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+}`,
+      },
+    },
+  },
+};

editor.d.ts

@@ -0,0 +1,2 @@
+declare module "react-split";
+declare module "monaco-jsx-highlighter";

esbuild/plugins/index.ts

@@ -0,0 +1,2 @@
+export * from "./unpkg-fecth-plugin";
+export * from "./unpkg-path-plugin";

esbuild/plugins/unpkg-fecth-plugin.ts

@@ -0,0 +1,85 @@
+import * as esbuild from "esbuild-wasm";
+import axios from "axios";
+import localForage from "localforage";
+
+const fileCache = localForage.createInstance({
+  name: "fileCache",
+});
+
+export const unpkgFetchPlugin = (
+  inputCode: string | undefined,
+  entryPoint: string
+): esbuild.Plugin => {
+  return {
+    name: "unpkg-fetch-plugin",
+    setup(build: esbuild.PluginBuild) {
+      //match entrypoint
+      if (entryPoint === "index.ts") {
+        build.onLoad({ filter: /(^index\.ts$)/ }, () => {
+          return {
+            loader: "tsx",
+            contents: inputCode,
+          };
+        });
+      } else {
+        build.onLoad({ filter: /(^index\.js$)/ }, () => {
+          return {
+            loader: "jsx",
+            contents: inputCode,
+          };
+        });
+      }
+
+      build.onLoad({ filter: /.*/ }, async (args: esbuild.OnLoadArgs) => {
+        const cacheResult = await fileCache.getItem<esbuild.OnLoadResult>(
+          args.path
+        );
+        if (cacheResult) {
+          return cacheResult;
+        }
+      });
+
+      //match css file
+      build.onLoad({ filter: /.css$/ }, async (args: esbuild.OnLoadArgs) => {
+        const { data, request } = await axios.get(args.path);
+
+        const escapedData = data
+          .replace(/\n/g, "")
+          .replace(/"/g, '\\"')
+          .replace(/'/g, "\\'");
+
+        const contents = `const style = document.createElement("style");
+               style.innerText = '${escapedData}';
+               document.head.appendChild(style);`;
+
+        const result: esbuild.OnLoadResult = {
+          loader: "jsx",
+          contents,
+          //specify the place where the content was found
+          resolveDir: new URL("./", request.responseURL).pathname,
+        };
+        //store response in cache
+        await fileCache.setItem(args.path, result);
+        return result;
+      });
+
+      //=================================================
+
+      build.onLoad({ filter: /.*/ }, async (args: esbuild.OnLoadArgs) => {
+        console.log(`...fetching ${args.path}`);
+        const { data, request } = await axios.get(args.path);
+
+        const result: esbuild.OnLoadResult = {
+          loader: "jsx",
+          contents: data,
+          //specify the place where the content was found
+          resolveDir: new URL("./", request.responseURL).pathname,
+        };
+        //store response in cache
+        await fileCache.setItem(args.path, result);
+        console.log("end of fetching");
+        return result;
+      });
+    },
+  };
+};

esbuild/plugins/unpkg-path-plugin.ts

@@ -0,0 +1,31 @@
+import * as esbuild from "esbuild-wasm";
+
+export const unpkgPathPlugin = (): esbuild.Plugin => {
+  return {
+    name: "unpkg-path-plugin",
+    setup(build: esbuild.PluginBuild) {
+      //
+      build.onResolve({ filter: /.*/ }, (args) => {
+        if (args.kind === "entry-point") {
+          return { path: args.path, namespace: "a" };
+        }
+      });
+
+      //match relative path in a module "./" or "../"
+      build.onResolve({ filter: /^\.+\// }, (args: esbuild.OnResolveArgs) => {
+        return {
+          namespace: "a",
+          path: new URL(args.path, `https://unpkg.com${args.resolveDir}/`).href,
+        };
+      });
+
+      //match main file in a module
+      build.onResolve({ filter: /.*/ }, async (args: esbuild.OnResolveArgs) => {
+        return {
+          namespace: "a",
+          path: `https://unpkg.com/${args.path}`,
+        };
+      });
+    },
+  };
+};

graphql/definitions/auth.definition.ts

@@ -0,0 +1,152 @@
+import { gql } from "@apollo/client";
+
+export const meQuery = gql(`query Me {
+  me {
+    data {
+      id
+      username
+      email
+      avatar
+      bio
+      website
+      verifiedAt
+      createdAt
+      updatedAt
+      showProfession
+      projects {
+        id
+        title
+        description
+      }
+      firstname
+      lastname
+      jobTitle
+      country
+    }
+    message
+    status
+  }
+}`);
+
+export const registerMutation =
+  gql(`mutation Register($input: UserRegisterInput!) {
+  register(input: $input) {
+    data {
+      id
+      email
+      username
+      avatar
+      bio
+      website
+      verifiedAt
+      createdAt
+      updatedAt
+    }
+    token
+    message
+    status
+  }
+}`);
+
+export const loginMutation = gql(`mutation Login($input: UserLoginInput!) {
+  login(input: $input) {
+    data {
+      id
+      email
+      username
+      avatar
+      bio
+      website
+      verifiedAt
+      createdAt
+      updatedAt
+    }
+    token
+    message
+    status
+  }
+}`);
+
+export const verifiedUserMutation =
+  gql(`mutation VerifyUser($input: UserVerifyInput!) {
+  verifyUser(input: $input) {
+    message
+    status
+  }
+}`);
+
+export const googleOauthMutation =
+  gql(`mutation Mutation($input: GoogleAuthInput!) {
+  googleOauth(input: $input) {
+    data {
+      id
+      email
+      username
+      avatar
+      bio
+      website
+      verifiedAt
+      createdAt
+      updatedAt
+    }
+    token
+    message
+    status
+  }
+}`);
+
+export const githubOauthMutation =
+  gql(`mutation Mutation($input: GithubAuthInput!) {
+  githubOauth(input: $input) {
+    data {
+      id
+      email
+      username
+      avatar
+      bio
+      website
+      verifiedAt
+      createdAt
+      updatedAt
+    }
+    token
+    message
+    status
+  }
+}`);
+
+export const updateProfileMutation =
+  gql(`mutation UpdateProfile($input: UpdateProfileInput) {
+  updateProfile(input: $input) {
+    data {
+      avatar
+      username
+    }
+    message
+    status
+  }
+}`);
+
+export const resetPasswordMutation =
+  gql(`mutation ResetPassword($input: UserResetPasswordInput!) {
+  resetPassword(input: $input) {
+    status
+    message
+    data {
+      id
+      email
+      token
+      expiredAt
+      createdAt
+      updatedAt
+    }
+  }
+}`);
+
+export const forgotPasswordMutation =
+  gql(`mutation ForgotPassword($input: UserForgotPasswordInput!) {
+  forgotPassword(input: $input) {
+    message
+    status
+  }
+}`);

graphql/definitions/comment.definition.ts

@@ -0,0 +1,97 @@
+import { gql } from "@apollo/client";
+
+export const CommentsQuery = gql(`query Comments($input: CommentsInput!) {
+  comments(input: $input) {
+    data {
+      id
+      message
+      parentId
+      authorId
+      createdAt
+      updatedAt
+      author {
+        id
+        email
+        username
+        avatar
+      }
+    }
+    message
+    status
+  }
+}`);
+
+export const CreateCommentMutation =
+  gql(`mutation CreateComment($input: CreateCommentInput!) {
+  createComment(input: $input) {
+    data {
+      id
+      message
+      parentId
+      authorId
+      createdAt
+      updatedAt
+      author {
+        id
+        email
+        username
+        avatar
+      }
+    }
+    message
+    status
+  }
+}`);
+
+export const UpdateCommentMutation =
+  gql(`mutation UpdateComment($input: UpdateCommentInput!) {
+  updateComment(input: $input) {
+    data {
+      id
+      message
+      parentId
+      authorId
+      createdAt
+      updatedAt
+      author {
+        id
+        email
+        username
+        avatar
+      }
+    }
+    message
+    status
+  }
+}`);
+
+export const DeleteCommentMutation =
+  gql(`mutation DeleteComment($input: DeleteCommentInput!) {
+  deleteComment(input: $input) {
+    data {
+      id
+    }
+    message
+    status
+  }
+}`);
+
+export const CommentCreatedSubscription = gql(`subscription CommentCreated {
+  commentCreated {
+    type
+    message
+    data {
+      id
+      type
+      receiverId
+      projectId
+      content
+      viewed
+      createdAt
+      sender {
+        avatar
+        username
+      }
+    }
+  }
+}`);

graphql/definitions/notification.definition.ts

@@ -0,0 +1,31 @@
+import { gql } from "@apollo/client";
+
+export const NotificationQuery =
+  gql(`query Notifications($input: NotificationInput!) {
+  notifications(input: $input) {
+    message
+    status
+    data {
+      id
+      type
+      receiverId
+      projectId
+      projectSlug
+      content
+      viewed
+      createdAt
+      sender {
+        avatar
+        username
+      }
+    }
+  }
+}`);
+
+export const ViewNotificationMutation =
+  gql(`mutation ViewNotification($input: ViewNotificationInput!) {
+  viewNotification(input: $input) {
+    message
+    status
+  }
+}`);

graphql/definitions/pageView.definition.ts

@@ -0,0 +1,14 @@
+import { gql } from "@apollo/client";
+
+export const PageViewQuery = gql(`query pageViews {
+  pageViews {
+    data {
+      id
+      ip
+      createdAt
+      updatedAt
+    }
+    message
+    status
+  }
+}`);

graphql/definitions/project.definition.ts

@@ -0,0 +1,148 @@
+import { gql } from "@apollo/client";
+
+export const ProjectsQuery = gql(`query Projects($input: ProjectsInput!) {
+  projects(input: $input) {
+    data {
+      id
+      createdAt
+      title
+      slug
+      description
+      content
+      updatedAt
+      hasvoted
+      isProjectOwner
+      files
+      tags {
+        id
+        value
+      }
+      _count {
+        votes
+        comments
+      }
+      author {
+        id
+        username
+        avatar
+      }
+      comments {
+        author {
+          id
+          username
+          avatar
+        }
+      }
+    }
+    message
+    status
+  }
+}`);
+
+export const ProjectsIDsQuery = gql(`query Projects($input: ProjectsInput!) {
+  projects(input: $input) {
+    data {
+      id
+    }
+    message
+    status
+  }
+}`);
+
+export const ProjectQuery = gql(`query Project($input: ProjectInput!) {
+  project(input: $input) {
+    message
+    status
+    data {
+      id
+      title
+      slug
+      description
+      content
+      files
+      author {
+        id
+        username
+        avatar
+      }
+      tags {
+        id
+        value
+      }
+      _count {
+        votes
+        comments
+      }
+      createdAt
+      updatedAt
+      hasvoted
+      isProjectOwner
+      votes {
+        author {
+          id
+          username
+          avatar
+        }
+      }
+    }
+  }
+  usersWhoComment(input: $input) {
+    data {
+      id
+      email
+      username
+      avatar
+    }
+    message
+    status
+  }
+}`);
+
+export const HasVotedProjectQuery =
+  gql(`query HasVotedProjectQuery($input: ProjectInput!) {
+  project(input: $input) {
+    data {
+      hasvoted
+      _count {
+        votes
+      }
+    }
+    message
+    status
+  }
+}`);
+
+export const CreateProjectMutation =
+  gql(`mutation CreateProject($input: CreateProjectInput!) {
+  createProject(input: $input) {
+    message
+    status
+    data {
+      id
+      title
+      slug
+      description
+      content
+      files
+    }
+  }
+}`);
+
+export const UpdateProjectMutation =
+  gql(`mutation UpdateProject($input: UpdateProjectInput!) {
+  updateProject(input: $input) {
+    message
+    status
+  }
+}`);
+
+export const DeleteProjectMutation =
+  gql(`mutation DeleteProject($input: DeleteProjectInput!) {
+  deleteProject(input: $input) {
+    data {
+      id
+    }
+    message
+    status
+  }
+}`);

graphql/definitions/tag.definition.ts

@@ -0,0 +1,12 @@
+import { gql } from "@apollo/client";
+
+export const TagsQuery = gql(`query Tags {
+  tags {
+    data {
+      id
+      value
+    }
+    message
+    status
+  }
+}`);

graphql/definitions/upload.definition.ts

@@ -0,0 +1,10 @@
+import { gql } from "@apollo/client";
+
+export const uploadFileMutation =
+  gql(`mutation UploadFile($input: UploadInput!) {
+  uploadFile(input: $input) {
+    url
+    message
+    status
+  }
+}`);

graphql/definitions/user.definitions.ts

@@ -0,0 +1,54 @@
+import { gql } from "@apollo/client";
+
+export const UsersIDsQuery = gql(`query UsersIDsQuery($input: UsersInput!) {
+  users(input: $input) {
+    message
+    status
+    data {
+      username
+    }
+  }
+}`);
+
+export const UserQuery = gql(`query User($input: UserInput!) {
+  user(input: $input) {
+    message
+    status
+    data {
+      id
+      email
+      username
+      firstname
+      lastname
+      avatar
+      bio
+      website
+      jobTitle
+      country
+      showProfession
+      points
+      projects {
+        id
+        title
+        slug
+        tags {
+          id
+          value
+        }
+      }
+    }
+  }
+}`);
+
+export const MostActiveUsersQuery = gql(`query MostActiveUsers {
+  mostActiveUsers {
+    status
+    message
+    data {
+      id
+      avatar
+      username
+      bio
+    }
+  }
+}`);

graphql/generated/graphql.d.ts

@@ -0,0 +1,563 @@
+import { gql } from '@apollo/client';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  DateTime: any;
+  JSON: any;
+  Upload: any;
+};
+
+export type Account = {
+  __typename?: 'Account';
+  createdAt: Scalars['DateTime'];
+  email: Scalars['String'];
+  id: Scalars['String'];
+  token: Scalars['String'];
+  updatedAt: Scalars['DateTime'];
+};
+
+export type AuthResponse = Response & {
+  __typename?: 'AuthResponse';
+  data?: Maybe<User>;
+  exp?: Maybe<Scalars['DateTime']>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+  token?: Maybe<Scalars['String']>;
+};
+
+export type Comment = {
+  __typename?: 'Comment';
+  author?: Maybe<User>;
+  authorId: Scalars['String'];
+  createdAt?: Maybe<Scalars['DateTime']>;
+  id: Scalars['Int'];
+  message?: Maybe<Scalars['String']>;
+  parentId?: Maybe<Scalars['Int']>;
+  project?: Maybe<Project>;
+  projectId?: Maybe<Scalars['String']>;
+  updatedAt?: Maybe<Scalars['DateTime']>;
+};
+
+export type CommentResponse = Response & {
+  __typename?: 'CommentResponse';
+  data?: Maybe<Comment>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type CommentSubscriptionResponse = {
+  __typename?: 'CommentSubscriptionResponse';
+  data?: Maybe<Notification>;
+  message?: Maybe<Scalars['String']>;
+  type?: Maybe<PushNotificationType>;
+};
+
+export type CommentsInput = {
+  projectId: Scalars['String'];
+};
+
+export type CommentsResponse = Response & {
+  __typename?: 'CommentsResponse';
+  data?: Maybe<Array<Maybe<Comment>>>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type CreateCommentInput = {
+  mentions?: InputMaybe<Array<InputMaybe<MentionsInput>>>;
+  message?: InputMaybe<Scalars['String']>;
+  parentId?: InputMaybe<Scalars['Int']>;
+  projectId: Scalars['String'];
+};
+
+export type CreatePageViewInput = {
+  ip: Scalars['String'];
+};
+
+export type CreateProjectInput = {
+  content?: InputMaybe<Scalars['JSON']>;
+  description?: InputMaybe<Scalars['String']>;
+  file?: InputMaybe<Scalars['Upload']>;
+  tags?: InputMaybe<Array<InputMaybe<TagInput>>>;
+  title?: InputMaybe<Scalars['String']>;
+};
+
+export type DeleteCommentInput = {
+  commentId: Scalars['Int'];
+};
+
+export type DeleteProjectInput = {
+  projectId: Scalars['String'];
+};
+
+export type GithubAuthInput = {
+  code?: InputMaybe<Scalars['String']>;
+};
+
+export type GoogleAuthInput = {
+  authuser?: InputMaybe<Scalars['String']>;
+  code?: InputMaybe<Scalars['String']>;
+  prompt?: InputMaybe<Scalars['String']>;
+  scope?: InputMaybe<Scalars['String']>;
+};
+
+export type MentionsInput = {
+  email?: InputMaybe<Scalars['String']>;
+  userId?: InputMaybe<Scalars['String']>;
+};
+
+export type Mutation = {
+  __typename?: 'Mutation';
+  createComment: CommentResponse;
+  createProject: ProjectResponse;
+  deleteComment: CommentResponse;
+  deleteProject: ProjectResponse;
+  forgotPassword: SimpleAuthResponse;
+  githubOauth: AuthResponse;
+  googleOauth: AuthResponse;
+  login: AuthResponse;
+  register: AuthResponse;
+  resetPassword: ResetPasswordResponse;
+  toggleVote: VoteResponse;
+  updateComment: CommentResponse;
+  updateProfile: UserResponse;
+  updateProject: ProjectResponse;
+  uploadFile: UploadResponse;
+  verifyUser: AuthResponse;
+  viewNotification?: Maybe<Response>;
+};
+
+
+export type MutationCreateCommentArgs = {
+  input: CreateCommentInput;
+};
+
+
+export type MutationCreateProjectArgs = {
+  input: CreateProjectInput;
+};
+
+
+export type MutationDeleteCommentArgs = {
+  input: DeleteCommentInput;
+};
+
+
+export type MutationDeleteProjectArgs = {
+  input: DeleteProjectInput;
+};
+
+
+export type MutationForgotPasswordArgs = {
+  input: UserForgotPasswordInput;
+};
+
+
+export type MutationGithubOauthArgs = {
+  input: GithubAuthInput;
+};
+
+
+export type MutationGoogleOauthArgs = {
+  input: GoogleAuthInput;
+};
+
+
+export type MutationLoginArgs = {
+  input: UserLoginInput;
+};
+
+
+export type MutationRegisterArgs = {
+  input: UserRegisterInput;
+};
+
+
+export type MutationResetPasswordArgs = {
+  input: UserResetPasswordInput;
+};
+
+
+export type MutationToggleVoteArgs = {
+  input?: InputMaybe<ToggleVoteInput>;
+};
+
+
+export type MutationUpdateCommentArgs = {
+  input: UpdateCommentInput;
+};
+
+
+export type MutationUpdateProfileArgs = {
+  input?: InputMaybe<UpdateProfileInput>;
+};
+
+
+export type MutationUpdateProjectArgs = {
+  input: UpdateProjectInput;
+};
+
+
+export type MutationUploadFileArgs = {
+  input: UploadInput;
+};
+
+
+export type MutationVerifyUserArgs = {
+  input: UserVerifyInput;
+};
+
+
+export type MutationViewNotificationArgs = {
+  input: ViewNotificationInput;
+};
+
+export type Notification = {
+  __typename?: 'Notification';
+  content?: Maybe<Scalars['String']>;
+  createdAt?: Maybe<Scalars['DateTime']>;
+  id: Scalars['Int'];
+  projectId?: Maybe<Scalars['String']>;
+  projectSlug?: Maybe<Scalars['String']>;
+  receiverId?: Maybe<Scalars['String']>;
+  sender?: Maybe<User>;
+  senderId?: Maybe<Scalars['String']>;
+  type?: Maybe<Scalars['String']>;
+  updatedAt?: Maybe<Scalars['DateTime']>;
+  viewed?: Maybe<Scalars['Boolean']>;
+};
+
+export type NotificationInput = {
+  limit?: InputMaybe<Scalars['Int']>;
+  offset?: InputMaybe<Scalars['Int']>;
+  userId?: InputMaybe<Scalars['String']>;
+};
+
+export type NotificationResponse = Response & {
+  __typename?: 'NotificationResponse';
+  data?: Maybe<Notification>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type NotificationsResponse = Response & {
+  __typename?: 'NotificationsResponse';
+  data?: Maybe<Array<Maybe<Notification>>>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type PageView = {
+  __typename?: 'PageView';
+  createdAt?: Maybe<Scalars['DateTime']>;
+  id: Scalars['Int'];
+  ip: Scalars['String'];
+  updatedAt?: Maybe<Scalars['DateTime']>;
+};
+
+export type PageViewResponse = {
+  __typename?: 'PageViewResponse';
+  data?: Maybe<Array<Maybe<PageView>>>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type Project = {
+  __typename?: 'Project';
+  _count?: Maybe<ProjectCountPayload>;
+  author?: Maybe<User>;
+  comments?: Maybe<Array<Maybe<Comment>>>;
+  content?: Maybe<Scalars['JSON']>;
+  createdAt?: Maybe<Scalars['DateTime']>;
+  description?: Maybe<Scalars['String']>;
+  files?: Maybe<Array<Maybe<Scalars['String']>>>;
+  hasvoted?: Maybe<Scalars['Boolean']>;
+  id: Scalars['String'];
+  isProjectOwner?: Maybe<Scalars['Boolean']>;
+  rank?: Maybe<Scalars['Int']>;
+  slug?: Maybe<Scalars['String']>;
+  tags?: Maybe<Array<Maybe<Tag>>>;
+  title?: Maybe<Scalars['String']>;
+  updatedAt?: Maybe<Scalars['DateTime']>;
+  votes?: Maybe<Array<Maybe<Vote>>>;
+};
+
+export type ProjectCountPayload = {
+  __typename?: 'ProjectCountPayload';
+  comments?: Maybe<Scalars['Int']>;
+  votes?: Maybe<Scalars['Int']>;
+};
+
+export type ProjectInput = {
+  id: Scalars['String'];
+  vote_limit?: InputMaybe<Scalars['Int']>;
+  vote_offset?: InputMaybe<Scalars['Int']>;
+};
+
+export type ProjectResponse = Response & {
+  __typename?: 'ProjectResponse';
+  data?: Maybe<Project>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type ProjectsInput = {
+  limit?: InputMaybe<Scalars['Int']>;
+  offset?: InputMaybe<Scalars['Int']>;
+};
+
+export type ProjectsResponse = Response & {
+  __typename?: 'ProjectsResponse';
+  data: Array<Project>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export enum PushNotificationType {
+  Comment = 'COMMENT',
+  Mention = 'MENTION',
+  Reply = 'REPLY',
+  Upvote = 'UPVOTE'
+}
+
+export type Query = {
+  __typename?: 'Query';
+  comments?: Maybe<CommentsResponse>;
+  me?: Maybe<UserResponse>;
+  mostActiveUsers?: Maybe<UsersResponse>;
+  notifications?: Maybe<NotificationsResponse>;
+  pageViews?: Maybe<PageViewResponse>;
+  project?: Maybe<ProjectResponse>;
+  projects?: Maybe<ProjectsResponse>;
+  tags?: Maybe<TagsResponse>;
+  user?: Maybe<UserResponse>;
+  users?: Maybe<UsersResponse>;
+  usersWhoComment?: Maybe<UsersResponse>;
+};
+
+
+export type QueryCommentsArgs = {
+  input: CommentsInput;
+};
+
+
+export type QueryNotificationsArgs = {
+  input: NotificationInput;
+};
+
+
+export type QueryProjectArgs = {
+  input: ProjectInput;
+};
+
+
+export type QueryProjectsArgs = {
+  input: ProjectsInput;
+};
+
+
+export type QueryUserArgs = {
+  input: UserInput;
+};
+
+
+export type QueryUsersArgs = {
+  input: UsersInput;
+};
+
+
+export type QueryUsersWhoCommentArgs = {
+  input: ProjectInput;
+};
+
+export type ResetPasswordResponse = Response & {
+  __typename?: 'ResetPasswordResponse';
+  data?: Maybe<Account>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type Response = {
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type SimpleAuthResponse = Response & {
+  __typename?: 'SimpleAuthResponse';
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type Subscription = {
+  __typename?: 'Subscription';
+  commentCreated?: Maybe<CommentSubscriptionResponse>;
+  mentionCreated?: Maybe<CommentSubscriptionResponse>;
+  replyCreated?: Maybe<CommentSubscriptionResponse>;
+  upvoteCreated?: Maybe<UpvoteSubscriptionResponse>;
+};
+
+export type Tag = {
+  __typename?: 'Tag';
+  id: Scalars['Int'];
+  projects?: Maybe<Array<Maybe<Project>>>;
+  value: Scalars['String'];
+};
+
+export type TagInput = {
+  id?: InputMaybe<Scalars['Int']>;
+  value: Scalars['String'];
+};
+
+export type TagsResponse = Response & {
+  __typename?: 'TagsResponse';
+  data?: Maybe<Array<Tag>>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type ToggleVoteInput = {
+  id: Scalars['String'];
+};
+
+export type UpdateCommentInput = {
+  commentId: Scalars['Int'];
+  message?: InputMaybe<Scalars['String']>;
+};
+
+export type UpdateProfileInput = {
+  banner?: InputMaybe<Scalars['String']>;
+  bio?: InputMaybe<Scalars['String']>;
+  country?: InputMaybe<Scalars['String']>;
+  file?: InputMaybe<Scalars['Upload']>;
+  firstname?: InputMaybe<Scalars['String']>;
+  id: Scalars['String'];
+  jobTitle?: InputMaybe<Scalars['String']>;
+  lastname?: InputMaybe<Scalars['String']>;
+  showProfession?: InputMaybe<Scalars['Boolean']>;
+  username?: InputMaybe<Scalars['String']>;
+  website?: InputMaybe<Scalars['String']>;
+};
+
+export type UpdateProjectInput = {
+  content?: InputMaybe<Scalars['JSON']>;
+  description?: InputMaybe<Scalars['String']>;
+  file?: InputMaybe<Scalars['Upload']>;
+  projectId: Scalars['String'];
+  tags?: InputMaybe<Array<InputMaybe<TagInput>>>;
+  title?: InputMaybe<Scalars['String']>;
+};
+
+export type UploadInput = {
+  file?: InputMaybe<Scalars['Upload']>;
+};
+
+export type UploadResponse = Response & {
+  __typename?: 'UploadResponse';
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+  url?: Maybe<Scalars['String']>;
+};
+
+export type UpvoteSubscriptionResponse = {
+  __typename?: 'UpvoteSubscriptionResponse';
+  data?: Maybe<Notification>;
+  message?: Maybe<Scalars['String']>;
+  type?: Maybe<PushNotificationType>;
+};
+
+export type User = {
+  __typename?: 'User';
+  avatar?: Maybe<Scalars['String']>;
+  banner?: Maybe<Scalars['String']>;
+  bio?: Maybe<Scalars['String']>;
+  country?: Maybe<Scalars['String']>;
+  createdAt?: Maybe<Scalars['DateTime']>;
+  email: Scalars['String'];
+  firstname?: Maybe<Scalars['String']>;
+  id: Scalars['String'];
+  jobTitle?: Maybe<Scalars['String']>;
+  lastname?: Maybe<Scalars['String']>;
+  projects?: Maybe<Array<Maybe<Project>>>;
+  showProfession?: Maybe<Scalars['Boolean']>;
+  updatedAt?: Maybe<Scalars['DateTime']>;
+  username: Scalars['String'];
+  verifiedAt?: Maybe<Scalars['DateTime']>;
+  votes?: Maybe<Array<Maybe<Vote>>>;
+  website?: Maybe<Scalars['String']>;
+};
+
+export type UserForgotPasswordInput = {
+  email: Scalars['String'];
+};
+
+export type UserInput = {
+  username: Scalars['String'];
+};
+
+export type UserLoginInput = {
+  email: Scalars['String'];
+  password: Scalars['String'];
+};
+
+export type UserRegisterInput = {
+  email: Scalars['String'];
+  password: Scalars['String'];
+  username: Scalars['String'];
+};
+
+export type UserResetPasswordInput = {
+  password: Scalars['String'];
+  token: Scalars['String'];
+};
+
+export type UserResponse = Response & {
+  __typename?: 'UserResponse';
+  data?: Maybe<User>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type UserVerifyInput = {
+  token: Scalars['String'];
+};
+
+export type UsersInput = {
+  limit?: InputMaybe<Scalars['Int']>;
+  offset?: InputMaybe<Scalars['Int']>;
+};
+
+export type UsersResponse = Response & {
+  __typename?: 'UsersResponse';
+  data?: Maybe<Array<Maybe<User>>>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};
+
+export type ViewNotificationInput = {
+  notificationId: Scalars['Int'];
+};
+
+export type Vote = {
+  __typename?: 'Vote';
+  author?: Maybe<User>;
+  createdAt?: Maybe<Scalars['DateTime']>;
+  id: Scalars['Int'];
+  project?: Maybe<Project>;
+  updatedAt?: Maybe<Scalars['DateTime']>;
+};
+
+export type VoteResponse = Response & {
+  __typename?: 'VoteResponse';
+  data?: Maybe<Vote>;
+  message?: Maybe<Scalars['String']>;
+  status: Scalars['Boolean'];
+};

hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useMonaco";
+export * from "./useTree";

hooks/useMonaco.ts

@@ -0,0 +1,117 @@
+import { useRef, useState } from "react";
+import { IKeyboardEvent } from "monaco-editor";
+import { useDebounce } from "use-debounce";
+import { OnChange, OnMount } from "@monaco-editor/react";
+import parserHtml from "prettier/parser-html";
+import parserCss from "prettier/parser-postcss";
+import parserBabel from "prettier/parser-babel";
+import prettier from "prettier";
+import { useAppSelector } from "../store/hook";
+import { theme_state } from "../store/features/themeSlice";
+
+export const useMonaco = () => {
+  const { theme } = useAppSelector(theme_state);
+  const codeEditor = useRef<any>();
+
+  const [input, setInput] = useState<string | undefined>("");
+  const [code] = useDebounce(input, 1000);
+
+  const onChange: OnChange = (value) => {
+    setInput(value);
+  };
+
+  const onMount: OnMount = async (monacoEditor, monaco) => {
+    codeEditor.current = monacoEditor;
+
+    monaco.editor.defineTheme("myTheme", {
+      base: "vs-dark",
+      inherit: true,
+      rules: [{ background: theme.background, token: "" }],
+      colors: {
+        "editor.background": theme.foreground,
+      },
+    });
+
+    monaco.editor.setTheme("myTheme");
+
+    const { default: traverse } = await import("@babel/traverse");
+    const { parse } = await import("@babel/parser");
+    const { default: MonacoJSXHighlighter } = await import(
+      "monaco-jsx-highlighter"
+    );
+
+    //jsx syntax highlight
+    const babelParse = (code: any) =>
+      parse(code, { sourceType: "module", plugins: ["jsx"] });
+
+    const monacoJSXHighlighter = new MonacoJSXHighlighter(
+      //@ts-ignore
+      monaco,
+      babelParse,
+      traverse,
+      monacoEditor
+    );
+
+    monacoJSXHighlighter.highLightOnDidChangeModelContent(
+      0,
+      () => {},
+      () => {},
+      undefined,
+      () => {}
+    );
+
+    //format code
+    function formatOnSave() {
+      const unformattedCode = codeEditor.current.getModel().getValue();
+      const lang = codeEditor.current.getModel()._languageIdentifier.language;
+
+      let config;
+
+      switch (lang) {
+        case "html":
+          config = { parser: "html", plugin: [parserHtml] };
+          break;
+
+        case "css":
+          config = { parser: "css", plugin: [parserCss] };
+          break;
+
+        case "javascript":
+          config = { parser: "babel", plugin: [parserBabel] };
+          break;
+
+        default:
+          break;
+      }
+
+      const formattedCode = prettier.format(unformattedCode, {
+        parser: config && config.parser,
+        plugins: config && config.plugin,
+        useTabs: false,
+        semi: true,
+      });
+
+      codeEditor.current.setValue(formattedCode);
+    }
+
+    //save command
+    let handleOnKeyDown = codeEditor.current.onKeyDown(
+      (event: IKeyboardEvent) => {
+        if (
+          (window.navigator.platform.match("Mac")
+            ? event.metaKey
+            : event.ctrlKey) &&
+          event.code === "KeyS"
+        ) {
+          event.preventDefault();
+          formatOnSave();
+        }
+      }
+    );
+
+    //cleaning up
+    return () => handleOnKeyDown.dispose();
+  };
+
+  return { onMount, onChange, code };
+};

hooks/useOutsideRef.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+const UseOutsideRef = (ref: any) => {
+  const [isOutsideRef, setIsOutsideRef] = useState(false);
+
+  useEffect(() => {
+    function handleClickOutside(event: any) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setIsOutsideRef(true);
+
+        setTimeout(() => {
+          setIsOutsideRef(false);
+        }, 200);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
+
+  return { isOutsideRef };
+};
+
+export default UseOutsideRef;