init

.env.example

@@ -0,0 +1,21 @@
+# Since the ".env" file is gitignored, you can use the ".env.example" file to
+# build a new ".env" file when you clone the repo. Keep this file up-to-date
+# when you add new variables to `.env`.
+
+# This file will be committed to version control, so make sure not to have any
+# secrets in it. If you are cloning this repo, create a copy of this file named
+# ".env" and populate it with your secrets.
+
+# When adding additional environment variables, the schema in "/src/env.mjs"
+# should be updated accordingly.
+
+# Next Auth
+# You can generate a new secret on the command line with:
+# openssl rand -base64 32
+# https://next-auth.js.org/configuration/options#secret
+# NEXTAUTH_SECRET=""
+NEXTAUTH_URL="http://localhost:3000"
+
+# Next Auth Discord Provider
+DISCORD_CLIENT_ID=""
+DISCORD_CLIENT_SECRET=""

.eslintrc.cjs

@@ -0,0 +1,30 @@
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+  plugins: ["@typescript-eslint"],
+  extends: [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+  ],
+  rules: {
+    // These opinionated rules are enabled in stylistic-type-checked above.
+    // Feel free to reconfigure them to your own preference.
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        prefer: "type-imports",
+        fixStyle: "inline-type-imports",
+      },
+    ],
+    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+  },
+};
+
+module.exports = config;

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# database
+/prisma/db.sqlite
+/prisma/db.sqlite-journal
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

README.md

@@ -0,0 +1,28 @@
+# Create T3 App
+
+This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
+
+## What's next? How do I make an app with this?
+
+We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
+
+If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
+
+- [Next.js](https://nextjs.org)
+- [NextAuth.js](https://next-auth.js.org)
+- [Prisma](https://prisma.io)
+- [Tailwind CSS](https://tailwindcss.com)
+- [tRPC](https://trpc.io)
+
+## Learn More
+
+To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
+
+- [Documentation](https://create.t3.gg/)
+- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
+
+You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
+
+## How do I deploy this?
+
+Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.

next.config.mjs

@@ -0,0 +1,22 @@
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+await import("./src/env.mjs");
+
+/** @type {import("next").NextConfig} */
+const config = {
+  reactStrictMode: true,
+
+  /**
+   * If you are using `appDir` then you must comment the below `i18n` config out.
+   *
+   * @see https://github.com/vercel/next.js/issues/41980
+   */
+  i18n: {
+    locales: ["en"],
+    defaultLocale: "en",
+  },
+};
+
+export default config;

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "hello-subsequent",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "lint": "next lint",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@t3-oss/env-nextjs": "^0.6.0",
+    "@tanstack/react-query": "^4.32.6",
+    "@trpc/client": "^10.37.1",
+    "@trpc/next": "^10.37.1",
+    "@trpc/react-query": "^10.37.1",
+    "@trpc/server": "^10.37.1",
+    "next": "^13.4.19",
+    "next-auth": "^4.23.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "superjson": "^1.13.1",
+    "zod": "^3.21.4"
+  },
+  "devDependencies": {
+    "@types/eslint": "^8.44.2",
+    "@types/node": "^18.16.0",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.47.0",
+    "eslint-config-next": "^13.4.19",
+    "postcss": "^8.4.27",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.5.1",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.1.6"
+  },
+  "ct3aMetadata": {
+    "initVersion": "7.20.2"
+  },
+  "packageManager": "npm@9.7.2"
+}

postcss.config.cjs

@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+module.exports = config;

prettier.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').options} */
+const config = {
+  plugins: ["prettier-plugin-tailwindcss"],
+};
+
+export default config;

src/components/Card.tsx

@@ -0,0 +1,7 @@
+export default function Card({ children, className }: { children: React.ReactNode, className?: string }) {
+    return (
+        <div className={"bg-zinc-700 text-white shadow-lg rounded-lg overflow-hidden w-5/6 p-4 mb-8 " + (className ?? "")}>
+            {children}
+        </div>
+    )
+}

src/components/Chip.tsx

@@ -0,0 +1,3 @@
+export default function Chip({ label }: { label: string }) {
+    return <p className="bg-emerald-900 text-white font-bold rounded-lg py-2 px-4 mr-2 mt-2">{label}</p>
+}

src/components/DotAnimation.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+
+function getColor(tw: string) { return tw.split('-')[1]; }
+function getNum(tw: string) { return tw.split('-')[2]; }
+
+const Dot = ({ color, position }: { color: string, position: string }) => (
+    <div className={`absolute rounded-full animate-slide-left w-[50px] h-[50px] ${color} ${position}`} />
+)
+
+const DotAnimation = () => {
+    const [colors, setColors] = useState<[string, string, string]>(['bg-red-200', 'bg-red-500', 'bg-red-800']);
+    const [positions, setPositions] = useState<[string, string, string]>(['top-16 left-[50px]', 'top-16 left-[125px]', 'top-16 left-[200px]']);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            const options = ['red', 'purple', 'blue', 'violet', 'indigo'];
+            const whichNext = Math.floor(Math.random() * options.length);
+
+            setColors((prev) => {
+                const first = prev[0];
+                const last = prev[2];
+
+                let next: string;
+
+                const color = getColor(first);
+                const num = getNum(first);
+                if (!num || !color) throw new Error("this shouldn't happen");
+
+                if (num === '200') {
+                    next = `bg-${options[whichNext]}-200`;
+                } else {
+                    next = `bg-${getColor(last)}-${num}`;
+                }
+
+                return [prev[1], prev[2], next];
+            });
+        }, 2000);
+
+        return () => {
+            clearInterval(interval);
+        };
+    }, [])
+
+    return (
+        <div>
+            <Dot color={colors[0]} position={positions[0]} />
+            <Dot color={colors[1]} position={positions[1]} />
+            <Dot color={colors[2]} position={positions[2]} />
+        </div>
+    )
+}
+
+export default DotAnimation;

src/env.mjs

@@ -0,0 +1,55 @@
+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: {
+    NODE_ENV: z
+      .enum(["development", "test", "production"])
+      .default("development"),
+    NEXTAUTH_SECRET:
+      process.env.NODE_ENV === "production"
+        ? z.string().min(1)
+        : z.string().min(1).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().min(1) : z.string().url()
+    ),
+    // Add `.min(1) on ID and SECRET if you want to make sure they're not empty
+    DISCORD_CLIENT_ID: z.string(),
+    DISCORD_CLIENT_SECRET: z.string(),
+  },
+
+  /**
+   * 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().min(1),
+  },
+
+  /**
+   * 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: {
+    NODE_ENV: process.env.NODE_ENV,
+    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
+    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
+    DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
+    DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
+    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
+  },
+  /**
+   * 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,
+});

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);

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

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

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,
+});

src/pages/index.tsx

@@ -0,0 +1,142 @@
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import Card from "~/components/Card";
+import Chip from "~/components/Chip";
+import DotAnimation from "~/components/DotAnimation";
+
+export default function Home() {
+    return (
+        <>
+        <Head>
+            <title>Subsequent Media</title>
+            <meta name="description" content="Your all-in-one solution for creating, presenting, and consuming procedurally generated art" />
+            <link rel="icon" href="/favicon.ico" />
+        </Head>
+        <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-black to-zinc-800">
+            <header className="py-12 px-8">
+                <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">Subsequent Media</h1>
+
+                {/* <DotAnimation /> */}
+                {/* <Image src="/img/martin-engel-KLFB1AEPLwA-unsplash.jpg" alt="" width={400} height={200} /> */}
+
+                <p className="text-2xl my-6 font-semibold text-white sm:text-[2.5rem]">Your all-in-one solution for creating, presenting, and consuming procedurally generated art</p>
+            </header>
+
+            {/* <div className="w-full min-h-[50vh]" /> */}
+
+            <article className="flex flex-col items-center">
+                <Card className="flex">
+                    <div className="w-1/3 h-auto">
+                        <Image
+                            src="/img/reynier-carl-wf0c0d-h2fE-unsplash.jpg"
+                            alt="man wearing headphones"
+                            width={400}
+                            height={400}
+                            className="object-contain"
+                            />
+                    </div>
+                    <div className="w-2/3 pl-8 h-auto flex flex-col items-end">
+                        <h2 className="w-full font-bold text-3xl mb-5">Welcome artistic freedom into your everyday life</h2>
+
+                        <p className="md:text-right text-emerald-100 text-lg w-full">With Subsequent, you are free to sculpt your own soundscape.</p>
+                        <p className="md:text-right text-lg w-full">
+                            We offer a library of presets to get you started -- pre-built sound environments that
+                            sound great to start and allow you deep influence into the sound you hear.
+                        </p>
+                    </div>
+
+
+                </Card>
+
+                <Card className="flex flex-col">
+                    <h2 className="font-bold text-3xl mb-5">Use our full solution in the cloud</h2>
+
+                    <p className="w-full md:w-3/4 text-lg">Subsequent Cloud packages everything you need to get started with making generative music. This includes:</p>
+
+                    <div className="flex flex-wrap">
+                        <Chip label="A web app for interacting with your project" />
+                        <Chip label="A hosting solution for storing, accessing, and sharing projects" />
+                        <Chip label="A simple-to-use, proprietary editor for creating and modifying projects" />
+                        <Chip label="Built-in playback and streaming, featuring live MIDI generation playing back with Web Audio" />
+                        <Chip label="Browse community-made plugins and configurations for the Subsequent engine" />
+                    </div>
+
+                    {/* <ul className="list-disc text-lg">
+                        <li className="ml-8">A web app for interacting with your project</li>
+                        <li className="ml-8">A hosting solution for storing, accessing, and sharing projects</li>
+                        <li className="ml-8">A simple-to-use, proprietary editor for creating and modifying projects</li>
+                        <li className="ml-8">Built-in playback and streaming, featuring live MIDI generation playing back with Web Audio</li>
+                        <li className="ml-8">Browse community-made plugins and configurations for the Subsequent engine</li>
+                    </ul> */}
+                </Card>
+
+                <Card className="flex">
+                    <div className="flex flex-col w-2/3 pr-8">
+                        <h2 className="font-bold text-3xl mb-5">Use it where you need it most</h2>
+
+                        <p className="w-full md:w-3/4 md:text-left text-lg">Subsequent is, at its heart, a MIDI framework. Tell our system what you want it to do, and the result will be a continuous, live stream of MIDI messages.</p>
+                        <p className="w-full md:w-3/4 md:text-left text-lg">Because Subsequent uses this low-level data format, you can use Subsequent anywhere that supports MIDI, including:</p>
+
+                        <div className="flex flex-wrap mb-8">
+                            <Chip label="Virtual instruments" />
+                            <Chip label="Hardware instruments" />
+                            <Chip label="Web audio environments" />
+                            <Chip label="Light installations" />
+                            <Chip label="Notation software" />
+                        </div>
+
+                        <p className="w-full text-lg md:w-3/4 md:text-left">The core logic of Subsequent is written in TypeScript, which means it can run in the browser and anywhere else JavaScript or Node.js are supported. This allows us to support a rich variety of plug-ins, providers, and helpers for integrations with third-party services, including:</p>
+
+                        <div className="flex flex-wrap">
+                            <Chip label="Discord" />
+                            <Chip label="OBS Studio" />
+                            <Chip label="Unity" />
+                            <Chip label="Your own web app" />
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col w-1/3 h-auto justify-center">
+                        <Image
+                            src="/img/martin-engel-KLFB1AEPLwA-unsplash.jpg"
+                            alt="a modular synthesizer"
+                            width={400}
+                            height={400}
+                            />
+                    </div>
+                </Card>
+
+                <Card className="flex flex-col items-end text-lg">
+                    <h2 className="font-bold text-3xl mb-5">Create ambience the easy way</h2>
+                    <p className="text-emerald-100 w-full md:w-3/4 md:text-right">Music generated by Subsequent is ephemeral and ownerless, and is by nature royalty free.</p>
+                    <p className="w-full md:w-3/4 md:text-right">This means that Subsequent has a strong use case among streamers and other content creators who may need to fill a soundscape without being beholden to royalty fees.</p>
+                </Card>
+
+                <Card className="flex flex-col text-lg">
+                    <h2 className="font-bold text-3xl mb-5">Get into the nitty-gritty (if you want)</h2>
+
+                    <div className="mb-5">
+                        <p className="w-full md:w-3/4">Subsequent offers you the opportunity to get as picky and opinionated as you like.</p>
+                        <p className="w-full md:w-3/4">Don&apos;t like that high-pitched twinkly noise in the background? Our intuitive user interface lets you give us tightly-focused feedback so that your listening experience caters to you.</p>
+                    </div>
+
+                    <p className="w-full md:w-3/4">Want to dive deeper? Dive deep into our editor and teach Subsequent everything it needs to know about how you want it to sound, including harmonic language, melodic character, rhythm profile, and phrase structure.</p>
+                </Card>
+            </article>
+
+            <div className="w-full py-12 flex flex-col items-center bg-purple-700 text-white">
+                <h2 className="text-4xl font-bold mb-4">Ready to learn more?</h2>
+                <p>We will have a mailing list put together soon so you can keep track of our progress. In the meantime...</p>
+
+                <div className="flex mt-8">
+                    <Card className="flex flex-col items-center text-center mr-8">
+                        <Link href="https://github.com/subsequent-media/hello-subsequent">
+                            Keep track of us on Github
+                        </Link>
+                    </Card>
+                </div>
+            </div>
+        </main>
+        </>
+    );
+}

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;

src/server/api/routers/example.ts

@@ -0,0 +1,21 @@
+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}`,
+      };
+    }),
+
+  getSecretMessage: protectedProcedure.query(() => {
+    return "you can now see this secret message!";
+  }),
+});

src/server/api/trpc.ts

@@ -0,0 +1,129 @@
+/**
+ * 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";
+
+/**
+ * 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 = ({ session }: CreateContextOptions) => {
+  return {
+    session,
+  };
+};
+
+/**
+ * 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 ({
+  req,
+  res,
+}: CreateNextContextOptions) => {
+  // 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);

src/server/auth.ts

@@ -0,0 +1,74 @@
+import { type GetServerSidePropsContext } from "next";
+import {
+  getServerSession,
+  type DefaultSession,
+  type NextAuthOptions,
+} from "next-auth";
+import DiscordProvider from "next-auth/providers/discord";
+
+import { env } from "~/env.mjs";
+
+/**
+ * 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, token }) => ({
+      ...session,
+      user: {
+        ...session.user,
+        id: token.sub,
+      },
+    }),
+  },
+  providers: [
+    DiscordProvider({
+      clientId: env.DISCORD_CLIENT_ID,
+      clientSecret: env.DISCORD_CLIENT_SECRET,
+    }),
+    /**
+     * ...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);
+};

src/styles/globals.css

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

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>;

tailwind.config.ts

@@ -0,0 +1,21 @@
+import { type Config } from "tailwindcss";
+
+export default {
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+  safelist: [{
+    pattern: /bg-.*/
+  }],
+  theme: {
+    extend: {},
+    animation: {
+      'slide-left': 'slide-left 2s infinite ease-in',
+    },
+    keyframes: {
+      'slide-left': {
+        '0%': { transform: 'translateX(0)' },
+        '100%': { transform: 'translateX(-100%)' },
+      }
+    }
+  },
+  plugins: [],
+} satisfies Config;

tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "checkJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "noUncheckedIndexedAccess": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": [
+    ".eslintrc.cjs",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.cjs",
+    "**/*.mjs"
+  ],
+  "exclude": ["node_modules"]
+}