timestamp 24:30 - error - ie belive smth to do with import of head?

.env

@@ -1,2 +1 @@
 # make your own .env.local file with any secret keys  
-FIREBASE_API_KEY=AIzaSyBMSlF-S6LQFa-Zv9Yc48YxFCqV5wqvjd4

.gitignore

@@ -27,6 +27,8 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env.local
+*.env.local
 
 # vercel
 .vercel

app/api/checkout_sessions/route.js

@@ -0,0 +1,42 @@
+import { loadStripe } from '@stripe/stripe-js';
+import { NextResponse } from 'next/server';
+const stripe = new Stripe(process.env.STRPE_API_SECRET_KEY)
+/* const stripe = await loadStripe(process.env.STRIPE_API_PUBLIC_KEY); */
+
+const formatAmountStripe = (amount) => {
+    return Math.round(amount * 100)
+}
+
+export async function POST(req) {
+    const params = {
+        submit_type: 'subscription',
+        payment_method_types: ['card'],
+        line_items: [
+            {
+                price_data: {
+                    currency: "usd",
+                    product_data: {
+                        name: "Pro subscription",
+                    },
+                    unit_amount: formatAmountStripe(10),
+                    reccuring: {
+                        interval: "month",
+                        interval_count: 1,
+                    },
+                },
+                quantity: 1,
+            },
+        ],
+        success_url: `${req.headers.origin}/result?session_id={CHECKOUT_SESSION_ID}`,
+        cancel_url: `${req.headers.origin}/result?session_id={CHECKOUT_SESSION_ID}`,
+    }
+
+    const checkoutSession = await stripe.checkout.sessions.create(params);
+
+    return NextResponse.json(checkoutSession, {
+        status: 200,
+    })
+
+}
+
+

app/api/generate/route.js

@@ -0,0 +1,44 @@
+import { IM_Fell_French_Canon } from "next/font/google";
+import { NextResponse } from "next/server";
+import OpenAI, { fileFromPath } from "openai"
+
+const systemPrompt = `You are a flashcard creator. Your primary goal is to generate clear, concise, and effective flashcards that help users learn and retain information. Each flashcard should focus on a single concept or question, with a brief, accurate answer or explanation. Ensure that the language used is simple and accessible, catering to the user’s level of knowledge on the subject. Whenever possible, include examples, analogies, or mnemonics to aid in memory retention. Your flashcards should be well-organized and categorized, making it easy for users to review and study the material systematically.
+1. Understand the Topic: Begin by thoroughly understanding the subject matter or topic for which the flashcards are being created.
+2. Identify Key Concepts: Break down the topic into its core concepts, terms, or questions that are essential for understanding the material.
+3. Formulate Questions: For each key concept, create a clear and concise question that targets the specific knowledge or skill the user needs to acquire.
+4. Craft Answers: Write brief, accurate, and focused answers or explanations for each question, ensuring that the language is easy to understand.
+5. Use Examples: Where applicable, include examples that illustrate the concept or answer in a practical, relatable way.
+6. Incorporate Mnemonics: Add mnemonic devices, analogies, or memory aids to help users remember challenging or complex information.
+7. Ensure Clarity: Review each flashcard to ensure that the questions and answers are clear, unambiguous, and directly related to the key concepts.
+8. Organize Systematically: Arrange the flashcards in a logical order, grouping related concepts together to facilitate easier learning and review.
+9. Review and Revise: After creating the flashcards, review them to check for accuracy, clarity, and completeness. Make any necessary revisions to improve their effectiveness.
+10. Aim to create a balanced set of flashcards that covers the topics comprehensively
+
+Return in the following JSON format
+{
+    "flashcards":|
+    {
+        "front": str,
+        "back": str
+    }|
+}
+`;
+
+export async function POST(req){
+    const openai = OpenAI()
+    const data = await req.text()
+
+    const completion = await openai.chat.completion.create({
+        messages: [
+            {role: "system", content: systemPrompt},
+            {role: "user", content: data},
+        ],
+
+        model: "gpt-4o",
+        respnse_format:{type: "json_object"}
+    })
+
+    const flashcards = JSON.parse(completion.choices[0].message.content)
+
+    return NextResponse.json(flashcards.flashcard)
+}

app/layout.js

@@ -1,6 +1,8 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
 
+import { ClerkProvider } from '@clerk/nextjs'
+
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
@@ -10,8 +12,11 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
+    <ClerkProvider>
+      <html lang="en">
+        <body className={inter.className}>{children}</body>
+      </html>
+    </ClerkProvider>
+
   );
 }

app/page.js

@@ -1,94 +1,31 @@
 import Image from "next/image";
+import getStripe from "@/utils/get_stripe"
+import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
+
+import {Toolbar, Typography, Container, AppBar, Button } from "@mui/material";
 
 export default function Home() {
   return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>app/page.js</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore starter templates for Next.js.</p>
-        </a>
+    <Container maxWidth="lg">
+      <Head>
+        <Title>
+          AI Flashcard
+        </Title>
+        <meta name="description" content="Create personalised flashcards from your textbooks"/>
+      </Head>
 
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
+      <AppBar position = "static">
+        <Toolbar>
+          <Typography variant="h6">AI Flashcards</Typography>
+          <SignedOut>
+            <Button>Login</Button>
+            <Button>Sign Up</Button>
+          </SignedOut>
+          <SignedIn>
+            <UserButton/>
+          </SignedIn>
+        </Toolbar>
+      </AppBar>
+    </Container>
   );
 }

middleware.ts

@@ -0,0 +1,12 @@
+import { clerkMiddleware } from "@clerk/nextjs/server";
+
+export default clerkMiddleware();
+
+export const config = {
+  matcher: [
+    // Skip Next.js internals and all static files, unless found in search params
+    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+    // Always run for API routes
+    '/(api|trpc)(.*)',
+  ],
+};