feat: Add backend validation!

Author: PartMan7

bun.lock

@@ -20,6 +20,7 @@
         "react-dom": "^19",
         "react-error-boundary": "^6.0.0",
         "react-hook-form": "^7.54.2",
+        "react-spinners": "^0.17.0",
         "tailwind-merge": "^3.0.1",
         "tailwindcss": "^4.0.6",
         "tailwindcss-animate": "^1.0.7",
@@ -177,6 +178,8 @@
 
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
 
+    "react-spinners": ["react-spinners@0.17.0", "", { "peerDependencies": { "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-L/8HTylaBmIWwQzIjMq+0vyaRXuoAevzWoD35wKpNTxxtYXWZp+xtgkfD7Y4WItuX0YvdxMPU79+7VhhmbmuTQ=="],
+
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
     "scheduler": ["scheduler@0.26.0", "", {}, "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="],

package.json

@@ -27,6 +27,7 @@
     "react-dom": "^19",
     "react-error-boundary": "^6.0.0",
     "react-hook-form": "^7.54.2",
+    "react-spinners": "^0.17.0",
     "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",

src/checker/index.ts

@@ -0,0 +1,16 @@
+import path from 'path';
+import { tsCheck } from './tsCheck';
+
+export async function validate(input: string, template: string): Promise<boolean> {
+  const templateData = await Bun.file(path.join(__dirname, '..', '..', 'templates', `${template}.template.ts`)).text();
+  const parts = templateData.split(/\/\* (?:SHORT|LONG)_INPUT \*\//);
+  if (!input.startsWith(parts[0]) || !input.endsWith(parts.at(-1))) return false;
+
+  let remainingText = input;
+  while (parts.length > 0) {
+    const nextIndex = remainingText.indexOf(parts.shift());
+    if (nextIndex === -1) return false;
+    remainingText = remainingText.slice(nextIndex);
+  }
+  return tsCheck(input);
+}

src/checker/check.ts src/checker/tsCheck.tssrc/checker/check.ts renamed to src/checker/tsCheck.ts

@@ -3,14 +3,17 @@ import path from 'path';
 
 const inputsDir = path.join(__dirname, '..', '..', 'inputs');
 
-async function check(input: string): Promise<boolean> {
+export async function tsCheck(input: string): Promise<boolean> {
   if (!input) throw new Error('Input not found.');
   const id = Bun.randomUUIDv7();
   const fileName = `${id}.template.ts`;
   await Bun.write(path.join(inputsDir, fileName), input);
   let success: boolean;
   try {
-    await $`bunx tsc --noEmit --strict --strictNullChecks ${fileName}`.cwd(inputsDir);
+    await $`bunx tsc --noEmit --strict --strictNullChecks --skipLibCheck ${fileName}`
+      .cwd(inputsDir)
+      .env({ NODE_OPTIONS: '--max-old-space-size=100' })
+      .quiet();
     success = true;
   } catch {
     success = false;

src/components/molecules/NameInput.tsx

@@ -0,0 +1,24 @@
+import { type ReactElement, useState } from 'react';
+import { Input } from '@/components/ui/input';
+
+const NAME_KEY = '%%%NAME%%%';
+
+export function getName(): string | undefined {
+  return localStorage.getItem(NAME_KEY);
+}
+
+export function NameInput({}): ReactElement {
+  const [value, setValue] = useState(() => localStorage.getItem(NAME_KEY) || '');
+  return (
+    <Input
+      value={value}
+      onChange={e => {
+        localStorage.setItem(NAME_KEY, e.target.value);
+        setValue(e.target.value);
+      }}
+      className="inline-flex max-w-54"
+      required
+      placeholder="Your name?"
+    />
+  );
+}

src/components/molecules/TemplateRenderer.tsx

@@ -1,31 +1,16 @@
-import {
-  type ReactElement,
-  type ReactNode,
-  Suspense,
-  use,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { type ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { groupSub } from 'group-sub';
-import { ErrorBoundary } from 'react-error-boundary';
 
 import { ShortInput } from '@/components/ui/ShortInput';
 import { LongInput } from '@/components/ui/LongInput';
 import { ContentCard } from '@/components/atoms/ContentCard';
 import { Button } from '@/components/ui/button';
 import { StaticEditor } from '@/components/molecules/StaticEditor';
 import { useFetch } from '@/hooks/useFetch';
+import { getName, NameInput } from '@/components/molecules/NameInput';
+import { ClimbingBoxLoader, PacmanLoader } from 'react-spinners';
 
-function BaseTemplateRenderer({
-  templateCode,
-  onSubmit,
-}: {
-  templateCode: string;
-  onSubmit: (code: string) => void;
-}): ReactElement {
+function BaseTemplateRenderer({ templateCode, template }: { templateCode: string; template: string }): ReactElement {
   const [currentCode, setCurrentCode] = useState(() => templateCode);
 
   const onChange = useRef<() => void | null>(null);
@@ -66,14 +51,63 @@ function BaseTemplateRenderer({
     };
   }, [getCurrentCode]);
 
+  const [submitting, setSubmitting] = useState(false);
+  const [status, setStatus] = useState<boolean | null>(null);
+
+  const handleSubmit = useCallback<() => void>(() => {
+    const code = getCurrentCode();
+    const name = getName();
+
+    if (!code || !name) return;
+
+    setSubmitting(true);
+    fetch(`/api/submit/${template}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, code }),
+    }).then(res => {
+      if (!res.ok) {
+        setStatus(false);
+        setSubmitting(false);
+      } else {
+        setStatus(true);
+        setSubmitting(false);
+        // TODO: Store in localStorage
+      }
+    });
+  }, [getCurrentCode, template]);
+
   return (
     <div className="flex gap-24 w-full justify-around m-12 max-w-full">
       <ContentCard className="grow shrink basis-0 min-w-0">
         <pre className="text-start">
           {parts.map(part => (part === '\n' ? <br /> : typeof part === 'string' ? part : part.component))}
         </pre>
         <hr className="m-6 border-zinc-300 dark:border-zinc-600" />
-        <Button onClick={() => console.log(getCurrentCode())}>Submit!</Button>
+        <form className="flex gap-4 justify-center" action={handleSubmit}>
+          <NameInput />
+          <Button disabled={submitting} className="w-32">
+            {submitting ? 'Submitting...' : 'Submit!'}
+          </Button>
+          {/*TODO*/}
+          <div className="w-3 h-3">
+            {submitting ? (
+              <PacmanLoader
+                size={12}
+                color="var(--foreground)"
+                className="mt-1"
+                speedMultiplier={1.5}
+                cssOverride={{ width: 0 }}
+              />
+            ) : typeof status === 'boolean' ? (
+              status ? (
+                ':D'
+              ) : (
+                ':<'
+              )
+            ) : null}
+          </div>
+        </form>
       </ContentCard>
       <ContentCard className="grow shrink basis-0 min-w-0">
         <StaticEditor code={currentCode} />
@@ -82,19 +116,13 @@ function BaseTemplateRenderer({
   );
 }
 
-export function TemplateRenderer({
-  template,
-  onSubmit,
-}: {
-  template: string;
-  onSubmit: (code: string) => void;
-}): ReactElement {
+export function TemplateRenderer({ template }: { template: string; onSubmit: (code: string) => void }): ReactElement {
   const { data, loading, error } = useFetch<{ template: string }>(`/api/templates/${template}`);
 
   return (
     <>
       {loading ? <ContentCard>Loading...</ContentCard> : null}
-      {data ? <BaseTemplateRenderer onSubmit={onSubmit} templateCode={data.template} /> : null}
+      {data ? <BaseTemplateRenderer templateCode={data.template} template={template} /> : null}
       {error ? <ContentCard>Template not found.</ContentCard> : null}
     </>
   );

src/index.tsx

@@ -1,7 +1,9 @@
 import { serve } from 'bun';
+import z from 'zod';
 import path from 'path';
 import index from '@/index.html';
 import { readdir } from 'fs/promises';
+import { validate } from '@/checker';
 
 const server = serve({
   routes: {
@@ -19,7 +21,7 @@ const server = serve({
       try {
         const templateData = await Bun.file(path.join(__dirname, '..', 'templates', `${template}.template.ts`)).text();
         return Response.json({ template: templateData });
-      } catch (e) {
+      } catch {
         return Response.json({ message: 'Not found' }, { status: 404 });
       }
     },
@@ -32,6 +34,24 @@ const server = serve({
       return Response.json({ exercises });
     },
 
+    '/api/submit/:exercise': {
+      POST: async req => {
+        const exercise = req.params.exercise;
+        const reqData = z.object({ code: z.string(), name: z.string() }).safeParse(await req.json());
+        if (!reqData.success) return Response.json({ message: 'Invalid input' }, { status: 400 });
+
+        try {
+          const success = await validate(reqData.data.code, exercise);
+          if (success) {
+            // TODO: Dispatch to socket and store in state
+            return Response.json({ message: 'Valid input!' });
+          } else return Response.json({ message: 'Failed.' }, { status: 400 });
+        } catch {
+          return Response.json({ message: 'Not found' }, { status: 404 });
+        }
+      },
+    },
+
     '/favicon.ico': new Response(await Bun.file(path.join(__dirname, '..', 'assets', 'logo.png')).bytes(), {
       headers: { 'Content-Type': 'image/x-icon' },
     }),