add nextjs and migrated api to next api

apps/web/src/env.mjs

@@ -0,0 +1,62 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars.
+   */
+  server: {
+    DATABASE_URL: z
+      .string()
+      .url()
+      .refine(
+        (str) => !str.includes("YOUR_MYSQL_URL_HERE"),
+        "You forgot to change the default URL"
+      ),
+    NODE_ENV: z
+      .enum(["development", "test", "production"])
+      .default("development"),
+    NEXTAUTH_SECRET:
+      process.env.NODE_ENV === "production"
+        ? z.string()
+        : z.string().optional(),
+    NEXTAUTH_URL: z.preprocess(
+      // This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
+      // Since NextAuth.js automatically uses the VERCEL_URL if present.
+      (str) => process.env.VERCEL_URL ?? str,
+      // VERCEL_URL doesn't include `https` so it cant be validated as a URL
+      process.env.VERCEL ? z.string() : z.string().url()
+    ),
+  },
+
+  /**
+   * Specify your client-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars. To expose them to the client, prefix them with
+   * `NEXT_PUBLIC_`.
+   */
+  client: {
+    // NEXT_PUBLIC_CLIENTVAR: z.string(),
+  },
+
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    DATABASE_URL: process.env.DATABASE_URL,
+    NODE_ENV: process.env.NODE_ENV,
+    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
+    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
+  },
+  /**
+   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+   * useful for Docker builds.
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+  /**
+   * Makes it so that empty strings are treated as undefined.
+   * `SOME_VAR: z.string()` and `SOME_VAR=''` will throw an error.
+   */
+  emptyStringAsUndefined: true,
+});

apps/web/src/pages/_app.tsx

@@ -0,0 +1,20 @@
+import { type Session } from "next-auth";
+import { SessionProvider } from "next-auth/react";
+import { type AppType } from "next/app";
+
+import { api } from "@/utils/api";
+
+import "@/styles/globals.css";
+
+const MyApp: AppType<{ session: Session | null }> = ({
+  Component,
+  pageProps: { session, ...pageProps },
+}) => {
+  return (
+    <SessionProvider session={session}>
+      <Component {...pageProps} />
+    </SessionProvider>
+  );
+};
+
+export default api.withTRPC(MyApp);

apps/web/src/pages/api/auth/[...nextauth].ts

@@ -0,0 +1,5 @@
+import NextAuth from "next-auth";
+
+import { authOptions } from "@/server/auth";
+
+export default NextAuth(authOptions);

apps/web/src/pages/api/sdk/events.ts

@@ -0,0 +1,37 @@
+import { validateSdkRequest } from '@/server/auth'
+import { db } from '@/server/db'
+import { createError, handleError } from '@/server/exceptions'
+import { EventPayload } from '@mixan/types'
+import type { NextApiRequest, NextApiResponse } from 'next'
+ 
+interface Request extends NextApiRequest {
+  body: Array<EventPayload>
+}
+
+export default async function handler(
+  req: Request,
+  res: NextApiResponse
+) {
+  if(req.method !== 'POST') {
+    return handleError(res, createError(405, 'Method not allowed'))
+  }
+
+  try {
+    // Check client id & secret
+    const projectId = await validateSdkRequest(req)
+
+    await db.event.createMany({
+      data: req.body.map((event) => ({
+        name: event.name,
+        properties: event.properties,
+        createdAt: event.time,
+        project_id: projectId,
+        profile_id: event.profileId,
+      }))
+    })
+  
+    res.status(200).end()
+  } catch (error) {
+    handleError(res, error)
+  }
+}

apps/web/src/pages/api/sdk/profiles/[profileId]/decrement.ts

@@ -0,0 +1,33 @@
+import { validateSdkRequest } from "@/server/auth";
+import { db } from "@/server/db";
+import { createError, handleError } from "@/server/exceptions";
+import { tickProfileProperty } from "@/services/profile.service";
+import { ProfileIncrementPayload, ProfilePayload } from "@mixan/types";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+interface Request extends NextApiRequest {
+  body: ProfileIncrementPayload;
+}
+
+export default async function handler(req: Request, res: NextApiResponse) {
+  if (req.method !== "PUT") {
+    return handleError(res, createError(405, "Method not allowed"));
+  }
+
+  try {
+    // Check client id & secret
+    await validateSdkRequest(req)
+
+    const profileId = req.query.profileId as string;
+
+    await tickProfileProperty({
+      name: req.body.name,
+      tick: -Math.abs(req.body.value),
+      profileId,
+    });
+
+    res.status(200).end();
+  } catch (error) {
+    handleError(res, error);
+  }
+}

apps/web/src/pages/api/sdk/profiles/[profileId]/increment.ts

@@ -0,0 +1,33 @@
+import { validateSdkRequest } from "@/server/auth";
+import { db } from "@/server/db";
+import { createError, handleError } from "@/server/exceptions";
+import { tickProfileProperty } from "@/services/profile.service";
+import { ProfileIncrementPayload, ProfilePayload } from "@mixan/types";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+interface Request extends NextApiRequest {
+  body: ProfileIncrementPayload;
+}
+
+export default async function handler(req: Request, res: NextApiResponse) {
+  if (req.method !== "PUT") {
+    return handleError(res, createError(405, "Method not allowed"));
+  }
+
+  try {
+    // Check client id & secret
+    await validateSdkRequest(req)
+
+    const profileId = req.query.profileId as string;
+
+    await tickProfileProperty({
+      name: req.body.name,
+      tick: req.body.value,
+      profileId,
+    });
+
+    res.status(200).end();
+  } catch (error) {
+    handleError(res, error);
+  }
+}

apps/web/src/pages/api/sdk/profiles/[profileId]/index.ts

@@ -0,0 +1,48 @@
+import { validateSdkRequest } from "@/server/auth";
+import { db } from "@/server/db";
+import { createError, handleError } from "@/server/exceptions";
+import { getProfile } from "@/services/profile.service";
+import { ProfilePayload } from "@mixan/types";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+interface Request extends NextApiRequest {
+  body: ProfilePayload;
+}
+
+export default async function handler(req: Request, res: NextApiResponse) { 
+  if (req.method !== "PUT" && req.method !== "POST") {
+    return handleError(res, createError(405, "Method not allowed"));
+  }
+
+  try {
+    // Check client id & secret
+    await validateSdkRequest(req)
+
+    const profileId = req.query.profileId as string;
+    const profile = await getProfile(profileId)
+    
+    const { body } = req;
+    await db.profile.update({
+      where: {
+        id: profileId,
+      },
+      data: {
+        external_id: body.id,
+        email: body.email,
+        first_name: body.first_name,
+        last_name: body.last_name,
+        avatar: body.avatar,
+        properties: {
+          ...(typeof profile.properties === "object"
+            ? profile.properties || {}
+            : {}),
+          ...(body.properties || {}),
+        },
+      },
+    });
+
+    res.status(200).end();
+  } catch (error) {
+    handleError(res, error);
+  }
+}

apps/web/src/pages/api/sdk/profiles/index.ts

@@ -0,0 +1,46 @@
+import { validateSdkRequest } from '@/server/auth'
+import { db } from '@/server/db'
+import { createError, handleError } from '@/server/exceptions'
+import type { NextApiRequest, NextApiResponse } from 'next'
+import randomAnimalName from 'random-animal-name'
+ 
+interface Request extends NextApiRequest {
+  body: {
+    id: string
+    properties?: Record<string, any>
+  }
+}
+
+export default async function handler(
+  req: Request,
+  res: NextApiResponse
+) {
+  if(req.method !== 'POST') {
+    return handleError(res, createError(405, 'Method not allowed'))
+  }
+
+  try {
+    // Check client id & secret
+    const projectId = await validateSdkRequest(req)
+
+    const { id, properties } = req.body
+    await db.profile.create({
+      data: {
+        id,
+        external_id: null,
+        email: null,
+        first_name: randomAnimalName(),
+        last_name: null,
+        avatar: null,
+        properties: {
+          ...(properties || {}),
+        },
+        project_id: projectId,
+      },
+    })
+
+    res.status(200).end()
+  } catch (error) {
+    handleError(res, error)
+  }
+}

apps/web/src/pages/api/setup.ts

@@ -0,0 +1,47 @@
+import { db } from "@/server/db";
+import { handleError } from "@/server/exceptions";
+import { hashPassword } from "@/services/hash.service";
+import { randomUUID } from "crypto";
+import { NextApiRequest, NextApiResponse } from "next";
+
+export default async function (req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const counts = await db.$transaction([
+      db.organization.count(),
+      db.project.count(),
+      db.client.count(),
+    ]);
+
+    if (counts.some((count) => count > 0)) {
+      return res.json("Setup already done");
+    }
+
+    const organization = await db.organization.create({
+      data: {
+        name: "Acme Inc.",
+      },
+    });
+
+    const project = await db.project.create({
+      data: {
+        name: "Acme Website",
+        organization_id: organization.id,
+      },
+    });
+    const secret = randomUUID();
+    const client = await db.client.create({
+      data: {
+        name: "Acme Website Client",
+        project_id: project.id,
+        secret: await hashPassword(secret),
+      },
+    });
+
+    res.json({
+      clientId: client.id,
+      clientSecret: secret,
+    });
+  } catch (error) {
+    handleError(res, error);
+  }
+}

apps/web/src/pages/api/trpc/[trpc].ts

@@ -0,0 +1,19 @@
+import { createNextApiHandler } from "@trpc/server/adapters/next";
+
+import { env } from "@/env.mjs";
+import { appRouter } from "@/server/api/root";
+import { createTRPCContext } from "@/server/api/trpc";
+
+// export API handler
+export default createNextApiHandler({
+  router: appRouter,
+  createContext: createTRPCContext,
+  onError:
+    env.NODE_ENV === "development"
+      ? ({ path, error }) => {
+          console.error(
+            `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
+          );
+        }
+      : undefined,
+});

apps/web/src/pages/index.tsx

@@ -0,0 +1,80 @@
+import { signIn, signOut, useSession } from "next-auth/react";
+import Head from "next/head";
+import Link from "next/link";
+
+import { api } from "@/utils/api";
+
+export default function Home() {
+  const hello = api.example.hello.useQuery({ text: "from tRPC" });
+
+  return (
+    <>
+      <Head>
+        <title>Create T3 App</title>
+        <meta name="description" content="Generated by create-t3-app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main className=" flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
+        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
+          <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
+            Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
+          </h1>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
+            <Link
+              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
+              href="https://create.t3.gg/en/usage/first-steps"
+              target="_blank"
+            >
+              <h3 className="text-2xl font-bold">First Steps →</h3>
+              <div className="text-lg">
+                Just the basics - Everything you need to know to set up your
+                database and authentication.
+              </div>
+            </Link>
+            <Link
+              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
+              href="https://create.t3.gg/en/introduction"
+              target="_blank"
+            >
+              <h3 className="text-2xl font-bold">Documentation →</h3>
+              <div className="text-lg">
+                Learn more about Create T3 App, the libraries it uses, and how
+                to deploy it.
+              </div>
+            </Link>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-2xl text-white">
+              {hello.data ? hello.data.greeting : "Loading tRPC query..."}
+            </p>
+            <AuthShowcase />
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
+
+function AuthShowcase() {
+  const { data: sessionData } = useSession();
+
+  const { data: secretMessage } = api.example.getSecretMessage.useQuery(
+    undefined, // no input
+    { enabled: sessionData?.user !== undefined }
+  );
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <p className="text-center text-2xl text-white">
+        {sessionData && <span>Logged in as {sessionData.user?.name}</span>}
+        {secretMessage && <span> - {secretMessage}</span>}
+      </p>
+      <button
+        className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
+        onClick={sessionData ? () => void signOut() : () => void signIn()}
+      >
+        {sessionData ? "Sign out" : "Sign in"}
+      </button>
+    </div>
+  );
+}

apps/web/src/server/api/root.ts

@@ -0,0 +1,14 @@
+import { exampleRouter } from "@/server/api/routers/example";
+import { createTRPCRouter } from "@/server/api/trpc";
+
+/**
+ * This is the primary router for your server.
+ *
+ * All routers added in /api/routers should be manually added here.
+ */
+export const appRouter = createTRPCRouter({
+  example: exampleRouter,
+});
+
+// export type definition of API
+export type AppRouter = typeof appRouter;

apps/web/src/server/api/routers/example.ts

@@ -0,0 +1,25 @@
+import { z } from "zod";
+
+import {
+  createTRPCRouter,
+  protectedProcedure,
+  publicProcedure,
+} from "@/server/api/trpc";
+
+export const exampleRouter = createTRPCRouter({
+  hello: publicProcedure
+    .input(z.object({ text: z.string() }))
+    .query(({ input }) => {
+      return {
+        greeting: `Hello ${input.text}`,
+      };
+    }),
+
+  getAll: publicProcedure.query(({ ctx }) => {
+    return ctx.db.example.findMany();
+  }),
+
+  getSecretMessage: protectedProcedure.query(() => {
+    return "you can now see this secret message!";
+  }),
+});

apps/web/src/server/api/trpc.ts

@@ -0,0 +1,131 @@
+/**
+ * YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS:
+ * 1. You want to modify request context (see Part 1).
+ * 2. You want to create a new middleware or type of procedure (see Part 3).
+ *
+ * TL;DR - This is where all the tRPC server stuff is created and plugged in. The pieces you will
+ * need to use are documented accordingly near the end.
+ */
+
+import { initTRPC, TRPCError } from "@trpc/server";
+import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
+import { type Session } from "next-auth";
+import superjson from "superjson";
+import { ZodError } from "zod";
+
+import { getServerAuthSession } from "@/server/auth";
+import { db } from "@/server/db";
+
+/**
+ * 1. CONTEXT
+ *
+ * This section defines the "contexts" that are available in the backend API.
+ *
+ * These allow you to access things when processing a request, like the database, the session, etc.
+ */
+
+interface CreateContextOptions {
+  session: Session | null;
+}
+
+/**
+ * This helper generates the "internals" for a tRPC context. If you need to use it, you can export
+ * it from here.
+ *
+ * Examples of things you may need it for:
+ * - testing, so we don't have to mock Next.js' req/res
+ * - tRPC's `createSSGHelpers`, where we don't have req/res
+ *
+ * @see https://create.t3.gg/en/usage/trpc#-serverapitrpcts
+ */
+const createInnerTRPCContext = (opts: CreateContextOptions) => {
+  return {
+    session: opts.session,
+    db,
+  };
+};
+
+/**
+ * This is the actual context you will use in your router. It will be used to process every request
+ * that goes through your tRPC endpoint.
+ *
+ * @see https://trpc.io/docs/context
+ */
+export const createTRPCContext = async (opts: CreateNextContextOptions) => {
+  const { req, res } = opts;
+
+  // Get the session from the server using the getServerSession wrapper function
+  const session = await getServerAuthSession({ req, res });
+
+  return createInnerTRPCContext({
+    session,
+  });
+};
+
+/**
+ * 2. INITIALIZATION
+ *
+ * This is where the tRPC API is initialized, connecting the context and transformer. We also parse
+ * ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation
+ * errors on the backend.
+ */
+
+const t = initTRPC.context<typeof createTRPCContext>().create({
+  transformer: superjson,
+  errorFormatter({ shape, error }) {
+    return {
+      ...shape,
+      data: {
+        ...shape.data,
+        zodError:
+          error.cause instanceof ZodError ? error.cause.flatten() : null,
+      },
+    };
+  },
+});
+
+/**
+ * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
+ *
+ * These are the pieces you use to build your tRPC API. You should import these a lot in the
+ * "/src/server/api/routers" directory.
+ */
+
+/**
+ * This is how you create new routers and sub-routers in your tRPC API.
+ *
+ * @see https://trpc.io/docs/router
+ */
+export const createTRPCRouter = t.router;
+
+/**
+ * Public (unauthenticated) procedure
+ *
+ * This is the base piece you use to build new queries and mutations on your tRPC API. It does not
+ * guarantee that a user querying is authorized, but you can still access user session data if they
+ * are logged in.
+ */
+export const publicProcedure = t.procedure;
+
+/** Reusable middleware that enforces users are logged in before running the procedure. */
+const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
+  if (!ctx.session?.user) {
+    throw new TRPCError({ code: "UNAUTHORIZED" });
+  }
+  return next({
+    ctx: {
+      // infers the `session` as non-nullable
+      session: { ...ctx.session, user: ctx.session.user },
+    },
+  });
+});
+
+/**
+ * Protected (authenticated) procedure
+ *
+ * If you want a query or mutation to ONLY be accessible to logged in users, use this. It verifies
+ * the session is valid and guarantees `ctx.session.user` is not null.
+ *
+ * @see https://trpc.io/docs/procedures
+ */
+export const protectedProcedure = t.procedure.use(enforceUserIsAuthed);

apps/web/src/server/auth.ts

@@ -0,0 +1,123 @@
+import { PrismaAdapter } from "@next-auth/prisma-adapter";
+import { NextApiRequest, type GetServerSidePropsContext } from "next";
+import {
+  getServerSession,
+  type DefaultSession,
+  type NextAuthOptions,
+} from "next-auth";
+
+import { db } from "@/server/db";
+import Credentials from "next-auth/providers/credentials";
+import { createError } from "./exceptions";
+import { verifyPassword } from "@/services/hash.service";
+
+/**
+ * Module augmentation for `next-auth` types. Allows us to add custom properties to the `session`
+ * object and keep type safety.
+ *
+ * @see https://next-auth.js.org/getting-started/typescript#module-augmentation
+ */
+declare module "next-auth" {
+  interface Session extends DefaultSession {
+    user: DefaultSession["user"] & {
+      id: string;
+      // ...other properties
+      // role: UserRole;
+    };
+  }
+
+  // interface User {
+  //   // ...other properties
+  //   // role: UserRole;
+  // }
+}
+
+/**
+ * Options for NextAuth.js used to configure adapters, providers, callbacks, etc.
+ *
+ * @see https://next-auth.js.org/configuration/options
+ */
+export const authOptions: NextAuthOptions = {
+  callbacks: {
+    session: ({ session, user, token }) => ({
+      ...session,
+      user: {
+        ...session.user,
+        id: token.sub,
+      },
+    }),
+  },
+  // adapter: PrismaAdapter(db),
+  providers: [
+    Credentials({
+      name: "Credentials",
+      credentials: {
+        email: { label: "Email", type: "text", placeholder: "jsmith" },
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials) {
+        const user = await db.user.findFirst({
+          where: { email: credentials?.email },
+        });
+
+        if (user) {
+          return user;
+        } else {
+          return null;
+        }
+      },
+    }),
+    /**
+     * ...add more providers here.
+     *
+     * Most other providers require a bit more work than the Discord provider. For example, the
+     * GitHub provider requires you to add the `refresh_token_expires_in` field to the Account
+     * model. Refer to the NextAuth.js docs for the provider you want to use. Example:
+     *
+     * @see https://next-auth.js.org/providers/github
+     */
+  ],
+};
+
+/**
+ * Wrapper for `getServerSession` so that you don't need to import the `authOptions` in every file.
+ *
+ * @see https://next-auth.js.org/configuration/nextjs
+ */
+export const getServerAuthSession = (ctx: {
+  req: GetServerSidePropsContext["req"];
+  res: GetServerSidePropsContext["res"];
+}) => {
+  return getServerSession(ctx.req, ctx.res, authOptions);
+};
+
+export async function validateSdkRequest(req: NextApiRequest): Promise<string> {
+  const clientId = req?.headers["mixan-client-id"] as string | undefined
+  const clientSecret = req.headers["mixan-client-secret"] as string | undefined
+  
+  if (!clientId) {
+    throw createError(401, "Misisng client id");
+  }
+
+  if (!clientSecret) {
+    throw createError(401, "Misisng client secret");
+  }
+
+  const client = await db.client.findUnique({
+    where: {
+      id: clientId,
+    },
+  });
+
+  if (!client) {
+    throw createError(401, "Invalid client id");
+  }
+
+  
+
+  if (!(await verifyPassword(clientSecret, client.secret))) {
+    throw createError(401, "Invalid client secret");
+  }
+
+  return client.project_id
+}

apps/web/src/server/db.ts

@@ -0,0 +1,16 @@
+import { PrismaClient } from "@prisma/client";
+
+import { env } from "@/env.mjs";
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const db =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    log:
+      env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
+  });
+
+if (env.NODE_ENV !== "production") globalForPrisma.prisma = db;

apps/web/src/server/exceptions.ts

@@ -0,0 +1,55 @@
+import {
+  MixanIssue,
+  MixanErrorResponse
+} from '@mixan/types'
+import { NextApiResponse } from 'next'
+
+export class HttpError extends Error {
+  public status: number
+  public message: string
+  public issues: MixanIssue[]
+
+  constructor(status: number, message: string | Error, issues?: MixanIssue[]) {
+    super(message instanceof Error ? message.message : message)
+    this.status = status
+    this.message = message instanceof Error ? message.message : message
+    this.issues = issues || []
+  }
+
+  toJson(): MixanErrorResponse  {
+    return {
+      code: this.status,
+      status: 'error',
+      message: this.message,
+      issues: this.issues.length ? this.issues : undefined,
+      stack: process.env.NODE_ENV !== 'production' ? this.stack : undefined,
+    }
+  }
+}
+
+export function createIssues(arr: Array<MixanIssue>) {
+  throw new HttpError(400, 'Issues', arr)
+}
+
+export function createError(status = 500, error: unknown | Error | string) {
+  if(error instanceof Error || typeof error === 'string') {
+    return new HttpError(status, error)
+  } 
+
+  return new HttpError(500, 'Unexpected error occured')
+}
+
+export function handleError(res: NextApiResponse, error: Error | HttpError | unknown) {
+  if(error instanceof HttpError) {
+    return res.status(error.status).json(error.toJson())
+  } 
+
+  if(error instanceof Error) {
+    const httpError = createError(500, error)
+    res.status(httpError.status).json(httpError.toJson())
+  }
+  
+  
+  const httpError = createError(500, error)
+  res.status(httpError.status).json(httpError.toJson())
+}

apps/web/src/services/hash.service.ts

@@ -0,0 +1,40 @@
+import { scrypt, randomBytes, timingSafeEqual } from "crypto";
+
+const keyLength = 32;
+/**
+ * Has a password or a secret with a password hashing algorithm (scrypt)
+ * @param {string} password
+ * @returns {string} The salt+hash
+ */
+export async function hashPassword (password: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    // generate random 16 bytes long salt - recommended by NodeJS Docs
+    const salt = randomBytes(16).toString("hex");
+    scrypt(password, salt, keyLength, (err, derivedKey) => {
+      if (err) reject(err);
+      // derivedKey is of type Buffer
+      resolve(`${salt}.${derivedKey.toString("hex")}`);
+    });
+  });
+};
+
+/**
+ * Compare a plain text password with a salt+hash password
+ * @param {string} password The plain text password
+ * @param {string} hash The hash+salt to check against
+ * @returns {boolean}
+ */
+export async function verifyPassword (password: string, hash: string): Promise<boolean> {
+  return new Promise((resolve, reject) => {
+    const [salt, hashKey] = hash.split(".");
+    // we need to pass buffer values to timingSafeEqual
+    const hashKeyBuff = Buffer.from(hashKey!, "hex");
+    scrypt(password, salt!, keyLength, (err, derivedKey) => {
+      if (err) {
+        reject(err);
+      }
+      // compare the new supplied password with the hashed password using timeSafeEqual
+      resolve(timingSafeEqual(hashKeyBuff, derivedKey));
+    });
+  });
+};

apps/web/src/services/profile.service.ts

@@ -0,0 +1,51 @@
+import { db } from "@/server/db"
+import { HttpError } from "@/server/exceptions"
+
+export function getProfile(id: string) {
+  return db.profile.findUniqueOrThrow({
+    where: {
+      id,
+    },
+  })
+}
+
+export async function tickProfileProperty({
+  profileId,
+  tick,
+  name,
+}: {
+  profileId: string
+  tick: number
+  name: string
+}) {
+  const profile = await getProfile(profileId)
+
+  if (!profile) {
+    throw new HttpError(404, `Profile not found ${profileId}`)
+  }
+
+  const properties = (
+    typeof profile.properties === 'object' ? profile.properties || {} : {}
+  ) as Record<string, number>
+  const value = name in properties ? properties[name] : 0
+
+  if (typeof value !== 'number') {
+    throw new HttpError(400, `Property "${name}" on user is of type ${typeof value}`)
+  }
+  
+  if (typeof tick !== 'number') {
+    throw new HttpError(400, `Value is not a number ${tick} (${typeof tick})`)
+  }
+
+  await db.profile.update({
+    where: {
+      id: profileId,
+    },
+    data: {
+      properties: {
+        ...properties,
+        [name]: value + tick,
+      },
+    },
+  })
+}

apps/web/src/styles/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/web/src/utils/api.ts

@@ -0,0 +1,68 @@
+/**
+ * This is the client-side entrypoint for your tRPC API. It is used to create the `api` object which
+ * contains the Next.js App-wrapper, as well as your type-safe React Query hooks.
+ *
+ * We also create a few inference helpers for input and output types.
+ */
+import { httpBatchLink, loggerLink } from "@trpc/client";
+import { createTRPCNext } from "@trpc/next";
+import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
+import superjson from "superjson";
+
+import { type AppRouter } from "@/server/api/root";
+
+const getBaseUrl = () => {
+  if (typeof window !== "undefined") return ""; // browser should use relative url
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
+  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
+};
+
+/** A set of type-safe react-query hooks for your tRPC API. */
+export const api = createTRPCNext<AppRouter>({
+  config() {
+    return {
+      /**
+       * Transformer used for data de-serialization from the server.
+       *
+       * @see https://trpc.io/docs/data-transformers
+       */
+      transformer: superjson,
+
+      /**
+       * Links used to determine request flow from client to server.
+       *
+       * @see https://trpc.io/docs/links
+       */
+      links: [
+        loggerLink({
+          enabled: (opts) =>
+            process.env.NODE_ENV === "development" ||
+            (opts.direction === "down" && opts.result instanceof Error),
+        }),
+        httpBatchLink({
+          url: `${getBaseUrl()}/api/trpc`,
+        }),
+      ],
+    };
+  },
+  /**
+   * Whether tRPC should await queries when server rendering pages.
+   *
+   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
+   */
+  ssr: false,
+});
+
+/**
+ * Inference helper for inputs.
+ *
+ * @example type HelloInput = RouterInputs['example']['hello']
+ */
+export type RouterInputs = inferRouterInputs<AppRouter>;
+
+/**
+ * Inference helper for outputs.
+ *
+ * @example type HelloOutput = RouterOutputs['example']['hello']
+ */
+export type RouterOutputs = inferRouterOutputs<AppRouter>;