Add Next.js client app with Prisma and auth

Introduce a new 'client' Next.js app scaffold: configuration files (next.config.ts, eslint.config.mjs, postcss, tsconfig), Prisma config and schema, app routes including NextAuth API and server actions, session/provider utilities, proxy, public assets, README and .gitignore. Also add IDE project files under .idea and a root README to initialize the repository structure for development.

client/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,46 @@
+//setup google auth
+//only allow google login and store the user in the database if they login for the first time
+
+import NextAuth, { type NextAuthOptions } from "next-auth";
+import GoogleProvider from "next-auth/providers/google";
+import { createUserOnFirstGoogleLogin } from "./serverActions";
+
+const googleClientId = process.env.GOOGLE_CLIENT_ID;
+const googleClientSecret = process.env.GOOGLE_CLIENT_SECRET;
+
+if (!googleClientId || !googleClientSecret) {
+	throw new Error(
+		"Missing Google OAuth env vars. Set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET.",
+	);
+}
+
+export const authOptions: NextAuthOptions = {
+	providers: [
+		GoogleProvider({
+			clientId: googleClientId,
+			clientSecret: googleClientSecret,
+		}),
+	],
+	callbacks: {
+		async signIn({ user, account }) {
+			if (account?.provider !== "google") {
+				return false;
+			}
+
+			if (!user.email) {
+				return false;
+			}
+
+			await createUserOnFirstGoogleLogin({
+				email: user.email,
+				name: user.name,
+			});
+
+			return true;
+		},
+	},
+};
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

client/src/app/api/auth/[...nextauth]/serverActions.ts

@@ -0,0 +1,28 @@
+//auth functions again teh database go here and get then gen imported to the route file to be used
+"use server";
+
+import { prisma } from "@/lib/prisma";
+
+type UpsertGoogleUserInput = {
+	email: string;
+	name?: string | null;
+};
+
+export const createUserOnFirstGoogleLogin = async ({
+	email,
+	name,
+}: UpsertGoogleUserInput) => {
+	const existingUser = await prisma.user.findUnique({
+		where: { email },
+		select: { id: true },
+	});
+
+	if (!existingUser) {
+		await prisma.user.create({
+			data: {
+				email,
+				name: name ?? null,
+			},
+		});
+	}
+};

client/src/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

client/src/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import Providers  from "@/lib/SessionProvider";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <Providers>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+      </Providers>
+    </html>
+  );
+}

client/src/app/page.tsx

@@ -0,0 +1,65 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={100}
+          height={20}
+          priority
+        />
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            To get started, edit the page.tsx file.
+          </h1>
+          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            Looking for a starting point or more instructions? Head over to{" "}
+            <a
+              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Templates
+            </a>{" "}
+            or the{" "}
+            <a
+              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Learning
+            </a>{" "}
+            center.
+          </p>
+        </div>
+        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          <a
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={16}
+              height={16}
+            />
+            Deploy Now
+          </a>
+          <a
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Documentation
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}

client/src/lib/SessionProvider.tsx

@@ -0,0 +1,17 @@
+"use client"
+import { ReactNode } from "react";
+import { SessionProvider } from "next-auth/react";
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+const Providers = ({ children }: ProvidersProps) => {
+  return (
+    <SessionProvider>
+      {children}
+    </SessionProvider>
+  );
+};
+
+export default Providers;

client/src/lib/prisma.ts

@@ -0,0 +1,22 @@
+import { PrismaClient } from "@/generated/prisma/client";
+import { PrismaPg } from "@prisma/adapter-pg";
+
+const databaseUrl = process.env.DATABASE_URL;
+
+if (!databaseUrl) {
+  throw new Error("Missing DATABASE_URL environment variable.");
+}
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const prisma =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    adapter: new PrismaPg({ connectionString: databaseUrl }),
+  });
+
+if (process.env.NODE_ENV !== "production") {
+  globalForPrisma.prisma = prisma;
+}

client/src/proxy.tsx

@@ -0,0 +1,14 @@
+import { withAuth } from "next-auth/middleware";
+
+export default withAuth(
+    function proxy() {},
+    {
+        callbacks: {
+            authorized: ({ token }) => !!token,
+        },
+    },
+);
+
+export const config = {
+    matcher: ["/"],
+};