first commit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.github/workflows/docker-image.yml

@@ -0,0 +1,50 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches: ['main', 'develop']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          tags: |
+            ghcr.io/${{ github.repository_owner }}/hosted-gateway-frontend:${{ github.ref_name }}
+            ghcr.io/${{ github.repository_owner }}/hosted-gateway-frontend:${{ github.sha }}
+          build-args: |
+            VITE_API_URL=https://api.t4t-gateway.com
+            VITE_GOOGLE_CLIENT_ID=${{ secrets.VITE_GOOGLE_CLIENT_ID }}
+            VITE_COMMIT_SHA=${{ github.sha }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: docker stack deploy
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          username: root
+          host: ${{ secrets.SSH_KNOWN_HOSTS }}
+          key: ${{ secrets.SSH_PRIV_KEY }}
+          script: |
+            echo ${{ secrets.GITHUB_TOKEN }} | docker login ghcr.io -u ${{ github.actor }} --password-stdin
+            docker stack deploy -c ~/devops/hostinger/prod-stack.yaml prod --with-registry-auth --resolve-image always
+            docker image prune -f --filter "until=24h"

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+build
+.react-router
+.env
+.env.local
+.DS_Store
+*.log

Dockerfile

@@ -0,0 +1,32 @@
+FROM public.ecr.aws/docker/library/node:20-alpine AS development-dependencies-env
+
+ARG VITE_API_URL
+ENV VITE_API_URL=$VITE_API_URL
+
+ARG VITE_GOOGLE_CLIENT_ID
+ENV VITE_GOOGLE_CLIENT_ID=$VITE_GOOGLE_CLIENT_ID
+
+ARG VITE_COMMIT_SHA
+ENV VITE_COMMIT_SHA=$VITE_COMMIT_SHA
+
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM public.ecr.aws/docker/library/node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM public.ecr.aws/docker/library/node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM public.ecr.aws/docker/library/node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]

app/app.css

@@ -0,0 +1,14 @@
+@import 'tailwindcss';
+
+@theme {
+  --font-sans:
+    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+html,
+body {
+  background: #fafafa;
+  color: #0a0a0a;
+  font-family: var(--font-sans);
+}

app/root.tsx

@@ -0,0 +1,86 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from 'react-router';
+import type { Route } from './+types/root';
+import './app.css';
+
+export function meta() {
+  return [
+    { charset: 'utf-8' },
+    { title: 't4t Gateway' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    {
+      name: 'description',
+      content:
+        'OpenAI-compatible API on Token4Token. 50 xBZZ welcome credit, no wallet needed.',
+    },
+  ];
+}
+
+export const links: Route.LinksFunction = () => [
+  {
+    rel: 'preload',
+    href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
+    as: 'style',
+    crossOrigin: 'anonymous',
+  },
+  {
+    rel: 'stylesheet',
+    href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
+    crossOrigin: 'anonymous',
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang='en' className='scroll-smooth'>
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = 'Oops!';
+  let details = 'An unexpected error occurred.';
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error';
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className='container mx-auto p-4 pt-16'>
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className='w-full overflow-x-auto p-4'>
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

app/routes.ts

@@ -0,0 +1,7 @@
+import { type RouteConfig, index, route } from '@react-router/dev/routes';
+
+export default [
+  index('routes/_index.tsx'),
+  route('signup', 'routes/signup.tsx'),
+  route('verify', 'routes/verify.tsx'),
+] satisfies RouteConfig;

app/routes/_index.tsx

@@ -0,0 +1,27 @@
+export default function Index() {
+  return (
+    <main className='flex min-h-screen flex-col items-center justify-center px-6 text-center'>
+      <h1 className='text-4xl font-semibold tracking-tight sm:text-5xl'>
+        t4t Gateway
+      </h1>
+      <p className='mt-4 max-w-xl text-base text-neutral-600'>
+        OpenAI-compatible API on Token4Token. 50 xBZZ welcome credit, no wallet
+        needed.
+      </p>
+      <div className='mt-8 flex gap-3'>
+        <a
+          href='/signup'
+          className='inline-flex h-10 items-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white hover:bg-neutral-700'
+        >
+          Sign up
+        </a>
+        <a
+          href='/login'
+          className='inline-flex h-10 items-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium hover:bg-neutral-100'
+        >
+          Log in
+        </a>
+      </div>
+    </main>
+  );
+}

app/routes/signup.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'https://api.t4t-gateway.com';
+
+type SignupResponse = {
+  token: string;
+  user: { id: string; email: string; role: string; emailVerified: boolean };
+  verificationToken?: string;
+};
+
+export function meta() {
+  return [{ title: 'Sign up · t4t Gateway' }];
+}
+
+export default function Signup() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<SignupResponse | null>(null);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      const res = await fetch(`${API_URL}/auth/email/signup`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      const body = await res.json();
+      if (!res.ok) {
+        throw new Error(body?.message ?? body?.error ?? `Signup failed (${res.status})`);
+      }
+      localStorage.setItem('jwt', body.token);
+      setResult(body);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (result) {
+    return (
+      <main className='flex min-h-screen items-center justify-center px-6'>
+        <div className='w-full max-w-md rounded-lg border border-neutral-200 bg-white p-8 shadow-sm'>
+          <h1 className='text-2xl font-semibold'>Check your email</h1>
+          <p className='mt-2 text-sm text-neutral-600'>
+            We sent a verification link to <strong>{result.user.email}</strong>.
+            Open it to activate your 50 xBZZ welcome credit.
+          </p>
+          {result.verificationToken && (
+            <div className='mt-6 rounded-md bg-amber-50 p-4 text-sm text-amber-900'>
+              <p className='font-medium'>Dev mode — verification token:</p>
+              <code className='mt-1 block break-all font-mono text-xs'>
+                {result.verificationToken}
+              </code>
+              <a
+                href={`/verify?token=${result.verificationToken}`}
+                className='mt-3 inline-block text-amber-900 underline'
+              >
+                Verify now →
+              </a>
+            </div>
+          )}
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className='flex min-h-screen items-center justify-center px-6'>
+      <form
+        onSubmit={onSubmit}
+        className='w-full max-w-md rounded-lg border border-neutral-200 bg-white p-8 shadow-sm'
+      >
+        <h1 className='text-2xl font-semibold'>Sign up</h1>
+        <p className='mt-2 text-sm text-neutral-600'>
+          50 xBZZ welcome credit. No wallet needed.
+        </p>
+
+        <div className='mt-6 space-y-4'>
+          <div>
+            <label htmlFor='email' className='block text-sm font-medium'>
+              Email
+            </label>
+            <input
+              id='email'
+              type='email'
+              autoComplete='email'
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className='mt-1 block w-full rounded-md border border-neutral-300 px-3 py-2 text-sm shadow-sm focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900'
+            />
+          </div>
+
+          <div>
+            <label htmlFor='password' className='block text-sm font-medium'>
+              Password
+            </label>
+            <input
+              id='password'
+              type='password'
+              autoComplete='new-password'
+              required
+              minLength={8}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className='mt-1 block w-full rounded-md border border-neutral-300 px-3 py-2 text-sm shadow-sm focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900'
+            />
+            <p className='mt-1 text-xs text-neutral-500'>At least 8 characters.</p>
+          </div>
+        </div>
+
+        {error && (
+          <p className='mt-4 rounded-md bg-red-50 px-3 py-2 text-sm text-red-700'>
+            {error}
+          </p>
+        )}
+
+        <button
+          type='submit'
+          disabled={submitting}
+          className='mt-6 inline-flex h-10 w-full items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white hover:bg-neutral-700 disabled:opacity-50'
+        >
+          {submitting ? 'Creating account…' : 'Create account'}
+        </button>
+
+        <p className='mt-4 text-center text-sm text-neutral-600'>
+          Already have an account?{' '}
+          <a href='/login' className='font-medium text-neutral-900 underline'>
+            Log in
+          </a>
+        </p>
+      </form>
+    </main>
+  );
+}

app/routes/verify.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router';
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'https://api.t4t-gateway.com';
+
+type Status = 'pending' | 'success' | 'already' | 'error';
+
+export function meta() {
+  return [{ title: 'Verify email · t4t Gateway' }];
+}
+
+export default function Verify() {
+  const [params] = useSearchParams();
+  const token = params.get('token');
+  const [status, setStatus] = useState<Status>('pending');
+  const [message, setMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token) {
+      setStatus('error');
+      setMessage('Missing verification token in URL.');
+      return;
+    }
+    (async () => {
+      try {
+        const res = await fetch(`${API_URL}/auth/email/verify`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token }),
+        });
+        const body = await res.json();
+        if (!res.ok) {
+          throw new Error(body?.message ?? body?.error ?? `Verify failed (${res.status})`);
+        }
+        setStatus(body.alreadyVerified ? 'already' : 'success');
+      } catch (err) {
+        setStatus('error');
+        setMessage(err instanceof Error ? err.message : 'Unknown error');
+      }
+    })();
+  }, [token]);
+
+  return (
+    <main className='flex min-h-screen items-center justify-center px-6'>
+      <div className='w-full max-w-md rounded-lg border border-neutral-200 bg-white p-8 shadow-sm'>
+        {status === 'pending' && (
+          <>
+            <h1 className='text-2xl font-semibold'>Verifying…</h1>
+            <p className='mt-2 text-sm text-neutral-600'>One moment.</p>
+          </>
+        )}
+
+        {status === 'success' && (
+          <>
+            <h1 className='text-2xl font-semibold'>Email verified</h1>
+            <p className='mt-2 text-sm text-neutral-600'>
+              Your 50 xBZZ welcome credit is being applied.
+            </p>
+            <a
+              href='/login'
+              className='mt-6 inline-flex h-10 items-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white hover:bg-neutral-700'
+            >
+              Continue to log in
+            </a>
+          </>
+        )}
+
+        {status === 'already' && (
+          <>
+            <h1 className='text-2xl font-semibold'>Already verified</h1>
+            <p className='mt-2 text-sm text-neutral-600'>
+              This email was verified previously. Nothing to do.
+            </p>
+            <a
+              href='/login'
+              className='mt-6 inline-flex h-10 items-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white hover:bg-neutral-700'
+            >
+              Log in
+            </a>
+          </>
+        )}
+
+        {status === 'error' && (
+          <>
+            <h1 className='text-2xl font-semibold'>Verification failed</h1>
+            <p className='mt-2 text-sm text-red-700'>{message}</p>
+            <a
+              href='/signup'
+              className='mt-6 inline-flex h-10 items-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium hover:bg-neutral-100'
+            >
+              Back to sign up
+            </a>
+          </>
+        )}
+      </div>
+    </main>
+  );
+}

docker-compose.yml

@@ -0,0 +1,22 @@
+# Local dev — `docker compose up`.
+# Runs vite dev with file polling so it doesn't hit the host's inotify limit.
+# Source is bind-mounted so edits hot-reload inside the container.
+
+services:
+  app:
+    image: node:20-alpine
+    working_dir: /app
+    command: sh -c "npm install && npm run dev -- --host 0.0.0.0"
+    environment:
+      VITE_API_URL: ${VITE_API_URL:-https://api.t4t-gateway.com}
+      VITE_GOOGLE_CLIENT_ID: ${VITE_GOOGLE_CLIENT_ID:-}
+      CHOKIDAR_USEPOLLING: "true"
+      WATCHPACK_POLLING: "true"
+    ports:
+      - "5173:5173"
+    volumes:
+      - .:/app
+      - frontend-node-modules:/app/node_modules
+
+volumes:
+  frontend-node-modules:

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "hosted-gateway-frontend",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc"
+  },
+  "dependencies": {
+    "@react-router/node": "^7.2.0",
+    "@react-router/serve": "^7.2.0",
+    "isbot": "^5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.2.0"
+  },
+  "devDependencies": {
+    "@react-router/dev": "^7.2.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/node": "^20",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

react-router.config.ts

@@ -0,0 +1,5 @@
+import type { Config } from '@react-router/dev/config';
+
+export default {
+  ssr: true,
+} satisfies Config;

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}

vite.config.ts

@@ -0,0 +1,8 @@
+import { reactRouter } from '@react-router/dev/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+});