To kickstart the project, I created a new Next.js app using the create-next-app command with additional configurations:

npx create-next-app@latest my-app --typescript --tailwind --eslint

Ran into a little issue:

Issue Description: Resolving 'Cannot find module' Error While working on the LLM AI Toolbox project, I encountered the following error:

Error: Cannot find module 'F:\My documents\VSCodeFiles\my_React-projects\LLM AI Toolbox\.next\server\app\(landing)\page_client-reference-manifest.js'
Require stack:

Next, I used the shadcn-ui CLI to set up the project:

npx shadcn-ui@latest init

During the initialization process, I configured the components.json file to define various project settings, such as style, colors, global CSS file location, and import aliases.

App Structure

I organized my Next.js app into the following structure:

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

In this structure:

• The app folder contains the layout.tsx and page.tsx files, providing a base layout for the app.
• UI components are placed in the components/ui folder for better organization.
• Other components, such as and , reside in the components folder.
• Utility functions are stored in the lib folder, with utils.ts housing the cn helper.
• Global CSS is located in the styles folder.

Adding Components

With the environment and project structure set up, I can easily add components to the project using the shadcn-ui CLI. For example, to add a Button component, I ran:

npx shadcn-ui@latest add button

Once added, I can import and use the Button component in my code:

import { Button } from "@/components/ui"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

This setup and organization facilitate a clean and scalable codebase, making it easy to develop and maintain the Next.js app.

1. Signing up and Registering Account with Clerk.com I signed up and registered an account with Clerk.com to utilize their authentication services for my project.

2. Enabling Github, Google, and Email Sign-In I enabled multiple sign-in methods, including Github, Google, and Email, to provide users with convenient authentication options.

3. Creating .env Environment I created a .env file to store sensitive information, such as API keys and environment-specific variables, securely.

4. Adding Clerk Keys I added the Clerk API keys to the .env file to connect my application to the Clerk authentication service.

5. Adding Clerk Library to the Project To integrate Clerk authentication into my Next.js application, I installed the Clerk library using the following command:

npm install @clerk/nextjs

6. Mounting Clerk Provider into the Layout I wrapped all children components inside the Clerk Provider in the layout.tsx file to make authentication available throughout the application.

7. Setting Up Middleware for Authentication I implemented middleware to protect specific routes that should be accessible only to authenticated users. This allowed me to define which pages are public and which ones need authentication.

8. Creating Auth Route with Clerk Components Using Clerk's prebuilt components, and , I set up an auth route to embed the sign-in and sign-up functionalities into my Next.js application.

9. Updating Environment Variables for Clerk Paths I added environment variables for the paths required by Clerk, such as signIn, signUp, afterSignUp, and afterSignIn.

10. Creating General Layout File for Styling I created a general layout file to style the and pages/components consistently.

11. Adding Buttons to Home Screen I added buttons to the home screen to link users to the and pages/components for easy navigation.

12. Adding to the Dashboard I included the component on the dashboard, allowing users to access their account details and perform user-related actions.

13. Updating the signout Redirect back to the base path

<UserButton 
  afterSignOutUrl="/"
/>

By following these steps, I was able to integrate the Clerk authentication service seamlessly into my LLM AI Toolbox project, providing users with a secure and user-friendly authentication experience.

created the sidebar and main page sections

created a navbar componenent

• with hamburger menue that will appear when sidebar dissapears (media queries)
• added the <userButton> to the navbar instead

creating a sidebar component

• adding a logo
• creating a name
• using some creative styling using cn and twMerge library - ensuring proper way to add additonal dynamic classnames without risk of being overridden

  import { Montserrat } from "next/font/google";
  
  import { cn } from "@/lib/utils";
  
  const montserrat = Montserrat({ weight: "600", subsets: ["latin"]});  

  <h1 className={cn("text-2xl font-bold", montserrat.className)}>Ai Toolbox</h1>

  • creating an array of the various routs that will be in the app, for example

  const routes = [
    {
      label: 'Dashboard',
      icon: LayoutDashboard,
      href: '/dashboard',
      color: "text-sky-500"

• creating a map funciton to map over the route objects and passing the details into <links> and <divs>

updating the sidebar and creating MobileSidebar component

• extracting the <Button> & <Menu> into a new component: MobileSidebar
• adding the sheet form shadcn - to slide the menue open

  npx shadcn-ui@latest add sheet

• wrapping the entire component inside this sheet tool and creating a trigger
• creating the sheet content and simply importing the sidebar component into the sheetcontent container

Running into hydration issues with the MobileSidebar component

used a little useEffect and useState trick to fix this

const MobileSidebar = () => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
      setIsMounted(true);
  }, []);

  if (!isMounted) {
      return null;
  }

Highlighting effect

Creating a highlight effect for the sidebar component so that when on a certain path the sidebar route will be highlighted

• used usePathname from the next/navigation library

import { usePathname } from "next/navigation";

const Sidebar = () => {
const pathname = usePathname();
return (
  //rest of code
  className={cn(
      "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:text-white hover:bg-white/10 rounded-lg transition",
      pathname === route.href ? "text-white bg-white/10" : "text-zinc-400",
  )}
  //rest of code
)

• creating some headings and styling
• creating a const of tools (eventually i will use some abstraction and put this elsewhere)

const tools = [
  {
    label: "Converstations",
    icon: MessageSquare,
    color: "text-violet-500",
    bgColor: "bg-ciolet-500/10",
    href: "/conversation",
  }
]

• importing the card component from shadcn

  npx shadcn-ui@latest add card

• creating a map funciton to map over the tools (there will be more soon)

  • passing details into a Card component

  • creating some styling for the card and passing the elements into them

  • creating an onclick function to take us to the correct page

    • using useRouter from 'next/navigation

      <Card
      onClick={() => router.push(tool.href)}

created a conversation route under the (dashboard)/(routes)/conversation/page.tsx

creating a <Heading /> component and importing into the conversation/page.tsx

• I defined the HeadingProps interface to specify the expected props for the Heading component, such as title, description, icon, iconColor, and bgColor.
• I created the Heading component as a functional component, taking the HeadingProps as its props.
• Inside the component, I structured the content by using the Icon prop and displaying it within a rounded container with the specified background color (bgColor) if provided.
• I applied various styles to the component using Tailwind CSS classes to achieve the desired layout and visual presentation. The title was styled as a bold heading, while the description was styled as smaller text with a muted foreground color.
• Lastly, I exported the Heading component at the end of the file, making it accessible for use in other parts of the project.

Fleshin out the page.tsx input section w/ forms

• Importing the form from shadcn

  npx shadcn-ui@latest add form

• Using the z library for handling schema validation with zod and the zodResolver from @hookform/resolvers/zod to integrate zod with react-hook-form

• Creating a form schema in a new file constants.ts, where I will handle the form validation

• Set up a form using react-hook-form and zodResolver to handle form validation based on the provided formSchema. The form also has a default value for the prompt field.

• Defined a variable isLoading to track the form submission state, which will be used later to disable form inputs during the submission process.

• Defined an onSubmit function to handle form submissions. However, the actual API call implementation is yet to be done.
  Currently, the onSubmit function logs the form values to the console.

• Rendering the Form component

  • Installing the Input component form shadcn

    npx shadcn-ui@latest add input

  • creating a div with all the form requirements (not going to list out the steps for this)

Set up

• Creating an Open AI account open AI
• Getting the API secret key and adding to the .env file
• Installing the Open Ai package into the project

npm i openai

creating an api folder with: (app/api/conversation/route.ts)

• I imported the required modules and libraries, including @clerk/nextjs, next/server, and openai.

• Setting up the OpenAI configuration with my API key was the next step. I created a new Configuration instance and initialized the OpenAIApi with this configuration.

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

• I defined the POST function that would handle the API call. Inside this function, I retrieved the userId using auth() from @clerk/nextjs. I also parsed the incoming request body using req.json() to extract the messages field.

• Created variouse checks with responses using NextResponse:

  • To ensure user authentication, I checked if userId was present. If not, I returned a 401 Unauthorized response using NextResponse.
  • To verify that the OpenAI API key was properly configured, I checked the apiKey field in the configuration. If it wasn't set, I returned a 500 Internal Server Error response.
  • I validated the presence of the messages field in the request body. If it was missing, I returned a 400 Bad Request response.

• Using the openai.createChatCompletion method, I made the API call to OpenAI. I specified the model as "gpt-3.5-turbo" and provided the messages.

• For further customization and handling of the response, I added a TODO comment in the code.

• I implemented error handling by using a try-catch block. In case of an error, I logged the error and returned a 500 Internal Server Error response.

• Lastly, I returned a success response with a 200 OK status.

Completing the response section in conversation ui

preamble;

• installed and imported the packed axios for http requests

npm i axios

• brought the package useRouter into to the file to refresh the browser page (note, from next/navigation)
• Needed to implement useState for the setting of messages, with a specific type defined by openAI doc's and default being an empty array

const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);

In the onsubmit button

• created a try, catch, finally block
  • catch; and console.log any error's
  • finally; router.refresh();
  • try;

   //define what the user message is    
   const userMessage: ChatCompletionRequestMessage = { role: "user", content: values.prompt };
   //an array of the user's message's 
   const newMessages = [...messages, userMessage];
   //api call
   const response = await axios.post('/api/conversation', { messages: newMessages });            
   //set the message 
   setMessages((current) => [...current, userMessage, response.data]);
   //reset the form back to default 
   form.reset();

  
  
  The Open AI Model is working ! 🥳🤖

Styling, adding loading states & empty states

• adding empty state, while rendering will check if there are no messages

  • created a new component <empty />

• adding a simple loading state, while message is loading

  • created a new component <loader />

• styling the messages;

  • created conditional styling that will adjust depending on source of message (user or bot)

  {message.role === "user" ? <UserAvatar /> : <BotAvatar />}

  • with a bit of help from shadcn created two new components

    npx shadcn-ui@latest add avatar

  • created a new component: <UserAvatar />
  • created a new component: <BotAvatar />

Created a new route app\(dashboard)\(routes)\code\page.tsx

Creating the UI and styling

This was really simple to implement as it also uses the openAI model and just involved copy/pasting the conversation UI and tweaking few things;

• Image
• Main Heading
• Sub Heading text
• Basic colors
• Display message

Creating new API route

creating a new route.tsx in the api folder under a new folder called code

Also very simple to implement as it is very similar to the conversation generator, so essentially copy paste and tweak

• first we want to give the ai some instructions;

  const instructionMessage: ChatCompletionRequestMessage = {
    role: "system",
    content: "You are a code generator. You must answer only in markdown code snippets. Use code comments for explanations."
  };

• then when calling the api we want to feed this instruction first and then the message from the user;

  const response = await openai.createChatCompletion({
    model: "gpt-3.5-turbo",
    messages: [instructionMessage, ...messages]
  });

Updating how we render the response from ai

Currently it will out put the response in a text format and that is hard to read and practically useless, therefore need to update the way we present this response Need to create a way for the code to come out in a react markdown format. Luckyly there is a package which can help alot with this

npm i react-markdown

Implementation:

{/* RETRUN IN MARKUP FORMAT */}
<ReactMarkdown 
  components={{
    pre: ({ node, ...props }) => (
        <div className="overflow-auto w-full my-2 bg-black/10 p-2 rounded-lg">
        <pre {...props} />
        </div>
    ),
    code: ({ node, ...props }) => (
        <code className="bg-black/10 rounded-lg p-1" {...props} />
    )
  }} 
  className="text-sm overflow-hidden leading-7"
>
  {message.content || ""}
</ReactMarkdown>

started creating skeletons for the below and developed accordingly

import * as z from "zod";

export const formSchema = z.object({
  prompt: z.string().min(1, {
    message: "Photo prompt is required",
  }),
  amount: z.string().min(1),
  resolution: z.string().min(1),
});

export const amountOptions = [
  {
    value: "1",
    label: "1 Photo",
  },
  {
    value: "2",
    label: "2 Photos",
  },
  // etc.
];

export const resolutionOptions = [
  {
    value: "256x256",
    label: "256x256",
  },
  {
    value: "512x512",
    label: "512x512",
  },
  // etc.
];

const [photos, setPhotos] = useState<string[]>([]);

const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),
  defaultValues: {
    prompt: "",
    amount: "1",
    resolution: "512x512"
  }
});

const nextConfig = {
    images: {
        domains: [
            "oaidalleapiprodscus.blob.core.windows.net",
        ]
    }
}

I went to the Replicate website and signed up for an account.

After logging in to the Replicate dashboard, I navigated to the API section to generate my API keys.

I added the REPL_API_KEY and REPL_PROJECT_ID to the .env file:

I customized the model and other options as per the Replicate API documentation for music or video generation.

In the Replicate dashboard, I configured my spend limits to prevent unexpected usage costs.

Installing the replicate package into the project

npm i replicate

Inside the app/api directory, I created a new TypeScript file for the music and video route, such as video/route.ts and music/route.ts

I set up the basic structure of the route file:

I referred to the Replicate API documentation to understand the endpoints and payloads required for music or video generation.

I implemented the necessary API call using the replicate package

I customized the model and other options as per the Replicate API documentation for music or video generation.

I handled the response and returned the generated music or video data as needed.

Installing Prisma into the project

Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.

npm i -D prisma
npx prisma init

Setting up an account with Planet Scale

PlanetScale is the world’s most advanced serverless MySQL platform

npm i @prisma/client

• creating a database

• configure to a prisma

• get the database url (into the .env file)

• Update the scheme.prisma file

• creating a new file prismadb.ts in the lib folder

  • preventing multiple prisma clients initialized in the dev environment
  • creating a model for our user api limit in the shcema.prisma

  model UserApiLimit {
    id        String      @id @default(cuid())
    userId    String   @unique
    count     Int      @default(0)
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt
  }

• pushing this to the db with

npx prisma db push

• adding the types into the project with

npx prisma generate

• Checking the data in the db with shell npx prisma studio

Creating a constants.ts file

• setting the limit to 5

export const MAX_FREE_COUNTS = 5;

• adding the regularly used tools and lucide-react icons into this file too

Creating an api-limit.ts file in the /libs folder;

1. Imported Dependencies: I began by importing the necessary dependencies

2. Implemented incrementApiLimit Function:

   • I proceeded to define the incrementApiLimit function, which was responsible for increasing the API usage count for a specific user.
   • To ensure the user was signed in, I used auth() to check their authentication status.
   • Once confirmed, I retrieved the user's API usage count from the database using prismadb.userApiLimit.findUnique().
   • If the user existed in the database, I incremented their count by 1 using prismadb.userApiLimit.update().
   • For new users, I created a new entry with a count of 1 using prismadb.userApiLimit.create().

3. Implemented checkApiLimit Function:

   • Next, I defined the checkApiLimit function, which was responsible for checking if a user was within the free API usage limit.
   • Similar to the incrementApiLimit function, I first checked if the user was signed in using auth().
   • Once confirmed, I retrieved the user's API usage count from the database using prismadb.userApiLimit.findUnique().
   • If the user did not exist in the database or their count was less than MAX_FREE_COUNTS, which represented the maximum allowed free counts, I returned true, indicating that the user was within the free limit.
   • Otherwise, I returned false, indicating that the user had exceeded the free limit.

Updating all the API calls to make use of api-limits

Into all API Tools: Conversation, Code , Video , Audio & Image api calls

Imorting the functions from api-limits.ts;

import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit";

Inside the POST(request):

  //CHECK"S & INCREASING COUNT 
  export async function POST(req:Request) {
    try{

      //previouse code 

        const freeTrial = await checkApiLimit();
        //const isPro = await checkSubscription();
        if (!freeTrial) {
            return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 });
        }

        //api call

        //increaese the api limit 
        await incrementApiLimit();

      //remaining code

Adding a new action to the lib/api-limits.ts

1. Imported Dependencies:
   I imported auth from @clerk/nextjs and prismadb from @/lib/prismadb.

2. Defined the Function:
   I created the getApiLimitCount function with the async keyword.

3. Retrieved User ID:
   Using auth(), I obtained the userId of the authenticated user.

4. Checked User Authentication:
   To ensure the user was authenticated, I checked for the presence of userId. If it wasn't available, I returned 0.

5. Fetched User API Limit:
   Using prismadb.userApiLimit.findUnique(), I retrieved the user's API limit based on their userId.

6. Handled User Not Found:
   In case the user was not found in the database, I returned 0.

7. Returned API Usage Count:
   Finally, if the user was found, I returned the count property from the userApiLimit object, representing the API usage count.

Now have to run this action inside a server component so that I can pass it into the sidebar(which is a client side component)

In the app/(dashboard)/layouts.tsx file;

• getting the apiCount

const apiLimitCount = await getApiLimitCount();

• passing it into the <SideBar /> component;

<Sidebar apiLimitCount={apiLimitCount/>

In the components\sidebar.tsx file;

• create an interface to accept the apiLimitCount as a prop
• inject the prop apiLimiCount along with the interface
• Creating a new component to display the count (called <FreeCounter />)

Creating a new component called <FreeCounter /> - passing in apiLimitCount ;

npx shadcn-ui@latest add progress

1. File Creation:
   I started by creating a new file named free-counter.tsx inside the components folder.

2. Import Dependencies:
   Next, I imported the necessary dependencies, including React hooks and various components from the project's UI library, as well as the constant MAX_FREE_COUNTS from the constants file.

3. Interface Definition:
   I defined an interface called FreeCounterProps to describe the props that the FreeCounter component would receive. Specifically, it had a apiLimitCount property of type number.

4. Functional Component:
   Using the FreeCounterProps interface, I created the functional component FreeCounter. Within this component, I destructured the apiLimitCount prop.

5. Hydration Trick:
   To prevent hydration issues, I used the useState and useEffect hooks. I created a state variable called mounted and set it to true after the component was mounted.

6. Conditional Rendering:
   I implemented a conditional rendering check using an if statement. It allowed me to render the component contents only when the mounted state was true. Otherwise, I returned null.

7. Rendering Component Contents:
   Inside the return statement, I structured the UI by rendering the Card, CardContent, Button, Progress, and Zap components, along with the necessary content.

8. Component Export:
   Finally, I exported the FreeCounter component to make it accessible for use in other parts of the application.

Give us global state controls to open and close the modal; Requires a state management tool, I have chosen to use zustand again: As this app doesnt have massive requirements for state control. created a zustand store to manage the modal state, allowing other components to easily interact with the modal and control its visibility.

npm i zustand 

1. Zustand Store:
   I used the zustand library to create a store called useProModalStore. This store manages the state for the ProModal component, including whether it is open or closed.

2. Interface Definition:
   I defined an interface called useProModalStore, which describes the shape of the state managed by the store. It consists of two properties: isOpen (a boolean indicating whether the modal is open) and two functions onOpen and onClose (to open and close the modal, respectively).

3. Store Creation:
   I used the create function from zustand to initialize the store. The create function takes a function as its argument, which receives a set function as its parameter.

4. State Management:
   Inside the create function, I used the set function to manage the state of the store. The initial state is defined with isOpen set to false.

5. Event Handlers:
   I defined two event handler functions, onOpen and onClose, which use the set function to update the isOpen state. When onOpen is called, it sets isOpen to true, and when onClose is called, it sets isOpen to false.

6. Store Export:
   Finally, I exported the useProModal store, making it available for use in other parts of the application. Components can access the state and functions provided by this store to manage the visibility of the modal.

created a ModalProvider component that takes care of rendering the ProModal component once it is mounted. This ensures that the modal is only shown when the component is ready and avoids potential issues with rendering in SSR (Server-Side Rendering) environments.

1. Modal Provider:
   I created a ModalProvider component responsible for rendering the ProModal component, which is used to display a modal in the application.

2. "use client":
   The component starts with the "use client" import, indicating that it is used in the client-side of the application.

3. State Management:
   Inside the ModalProvider, I used the useState hook to manage the state of isMounted.
   This state determines whether the component is mounted or not.

4. Mounting Detection:
   I used the useEffect hook with an empty dependency array to detect when the component is mounted.
   When the component mounts, the isMounted state is set to true.

5. Conditional Rendering:
   Before rendering the ProModal component, there's a conditional check to ensure the component is mounted (isMounted === true).
   If it is not mounted, null is returned, effectively preventing rendering until the component is mounted.

6. ProModal Component:
   After the conditional check, the ProModal component is rendered. The ProModal component likely handles displaying the modal content and its functionality.

created a ProModal component that provides users with the option to upgrade to a premium subscription. The modal displays the available premium tools and allows users to initiate the subscription process by clicking the "Upgrade" button.

1. ProModal Component:
   I created a ProModal component that is used to display a subscription upgrade dialog to users.

2. "use client":
   The component starts with the "use client" import, indicating that it is used in the client-side of the application.

3. State Management:
   Inside the ProModal, I used the useState hook to manage the state of loading
   indicates whether the subscription button is in a loading state or not.

4. Subscription Function:
   I defined the onSubscribe function, which is called when the user clicks the "Upgrade" button.
   This function sends a request to the /api/stripe endpoint to initiate the subscription process using Axios.
   If successful, the user is redirected to the returned URL.

5. Dialog Component:
   The ProModal component utilizes the Dialog component from the @/components/ui/dialog module.
   The dialog displays the subscription details to the user.

6. Dialog Header:
   The dialog header contains the title "Upgrade to Genius" with a "pro" badge indicating the premium subscription.

7. Dialog Description:
   The dialog description section displays a list of available tools with corresponding icons and a checkmark indicating they are part of the premium package.
   The list of tools is dynamically generated from the tools constant.

8. Dialog Footer:
   The dialog footer contains the "Upgrade" button, which calls the onSubscribe function when clicked. The button is also disabled when the loading state is true.

• Firstly, updated and imported the <ModalProvider /> into the root layout.tsx

• Added an onClick funciton to the SideBar -> FreeCounter -> Button, that will open the Modal

• Every time we hit a 403 error (limit reached on API calls) I very cleverly put an if statement into all the api calls that will give a status of error 403

if (!freeTrial) {
        return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 });
    }

• Now just have to update the variouse routs catch blocks to open the modal if encountering status: 403 in all the AI TOOLS.

  Specifically at the app\(dashboard)\(routes)\(EACH API TOOL)\page.tsx;

  //adding the imports
  import { useProModal } from "@/hooks/use-pro-modal";
  import toast from "react-hot-toast";
  
  //calling the useProModal inside the functional component
  const proModal = useProModal();
  
  //then in the onSubmit button - catch block 
  catch (error: any) {
      if (error?.response?.status === 403) {
        proModal.onOpen();
      } else {
        toast.error("Something went wrong.");
      }
    } finally {
      router.refresh();
    }

This looks like prop drilling an to an extent it is, however take into cosideration the effort to create a state management tool for this project. As well as having to navigate server/client side components.

Inside the navbar component: passing in the api counter into the navbar

const apiLimitCount = await getApiLimitCount();

//...
<MobileSidebar apiLimitCount={apiLimitCount} />

Inside the mobile-sidebar.tsx component:

• creating an interface to receive the apiLimitCounter
• receiving the api-counter as props
• pass into the Sidebar component (already set up to receive the props - inface required)

<Sidebar apiLimitCount={apiLimitCount} />

Account setup;

• signed in to my dashboard

• Created a new store and located my publishable and secret key, injected into the .env

• Importing the stripe package into the project

  npm i stripe

Instantiating stripe in lib/stripe.ts

responsible for setting up the necessary infrastructure to integrate Stripe: - creates a new instance of the Stripe class, - passing the Stripe secret key from the environment variables - and additional configuration options.

import Stripe from "stripe"

export const stripe = new Stripe(process.env.STRIPE_API_KEY!, {
  apiVersion: "2022-11-15",
  typescript: true,
});

creating a userSubscription modal in prisma:

Before we get going, I created a userSubscription modal in the schema.prisma

Responsible for storing all the customers data required to work with stripe

model UserSubscription {
  id        String      @id @default(cuid())
  userId    String   @unique
  stripeCustomerId       String?   @unique @map(name: "stripe_customer_id")
  stripeSubscriptionId   String?   @unique @map(name: "stripe_subscription_id")
  stripePriceId          String?   @map(name: "stripe_price_id")
  stripeCurrentPeriodEnd DateTime? @map(name: "stripe_current_period_end")
}

Followed by:

• Adding the types to our project

  npx prisma generate

• Pushing modal to the prisma db

  npx prisma db push

• Check everything worked in the studio

  npx prisma stuido

In the app\api\stripe\route.ts

the GET function serves as a backend API endpoint for handling user subscriptions. It checks if the user already has a Stripe subscription and creates the appropriate session for the user, allowing them to manage or initiate a subscription for the "AI Toolbox Pro" with unlimited AI generations.

1. GET Function:
   defined a GET function that handles the server-side logic for creating and managing Stripe subscriptions.

2. Auth and User:
   The function imports auth and currentUser from @clerk/nextjs to authenticate the user making the request and fetch the current user data.

3. Authorization Check:
   The function checks if there is a valid userId and a corresponding user. If not, it returns a "Unauthorized" response with a status code of 401.

4. Stripe Subscription Check:
   The function then queries the prismadb to find a subscription associated with the current userId.

5. Billing Portal or Checkout Session:
   If a Stripe subscription exists (userSubscription.stripeCustomerId is present)
   - the function creates a billing portal session using Stripe's billingPortal.sessions.create.
   This allows the user to manage their subscription and cancel if needed. The URL for the billing portal session is returned in the response.
   

1. Metadata:
   Both the billing portal session and checkout session include the userId as metadata, which can be useful for tracking the user's subscription status.
   This is also important to for post checkout-session if the user completes the transaction.

2. Error Handling:
   The function includes error handling and logs any Stripe-related errors to the console.

This POST function allows your server to handle incoming Stripe webhook events and update the prismadb.userSubscription table accordingly. It ensures that your application remains synchronized with Stripe's billing and subscription events.

1. POST Function:
   This function is a server-side webhook handler for processing incoming Stripe events.

2. Request Body and Signature:
   The function receives a POST request with the Stripe webhook payload in the request body.
   It also retrieves the Stripe signature from the request headers.

3. Verify Event:
   The function verifies the authenticity of the Stripe webhook event using the Stripe SDK's webhooks.constructEvent method.
   If the verification fails, it returns a response with a status code of 400, indicating a webhook error.

4. Event Handling:
   The function then processes different types of Stripe events based on the event type.

5. checkout.session.completed Event:
   If the event type is "checkout.session.completed", the function retrieves the subscription details from the Stripe event, including the userId from the session's metadata.
   It then creates a new record in the prismadb.userSubscription table to store the user's subscription information, including the userId, stripeSubscriptionId, stripeCustomerId, stripePriceId, and stripeCurrentPeriodEnd.

6. invoice.payment_succeeded Event:
   If the event type is "invoice.payment_succeeded", the function retrieves the subscription details and updates the corresponding record in the prismadb.userSubscription table with the latest stripePriceId and stripeCurrentPeriodEnd.

7. Successful Response:
   The function returns a response with a status code of 200, indicating that the webhook event has been successfully processed.

8. Error Handling:
   If there is an error in processing the webhook events or database operations, the function returns an appropriate response with an error message.

The onSubscribe function (upgrade button) in components\pro-modal.tsx

The onSubscribe function is essential for initiating the subscription process with Stripe and handling potential errors during the process. This function is responsible for handling the subscription process when the user clicks on the "Upgrade" button.

1. Asynchronous Operation:
   The function is defined as an asynchronous function with the async keyword, allowing it to use await to wait for the API response.

2. State Management:
   The function uses the setLoading function to set the loading state to true before making the API call. This is likely used to show a loading spinner or disable the "Upgrade" button during the API call.

3. Stripe API Call:
   The function uses axios.get to make a GET request to the /api/stripe endpoint. This endpoint is responsible for handling the subscription process on the server-side.

4. Response Handling:
   If the API call is successful, it retrieves the response data containing the url property, which represents the URL to redirect the user for subscription completion.

5. Redirection:
   The function uses window.location.href to redirect the user to the url received from the API response. This takes the user to the Stripe checkout page for subscription.

6. Error Handling:
   If an error occurs during the API call, the function catches the error in the catch block and displays a toast message with the error message "Something went wrong."

7. Finally Block:
   The finally block is used to set the loading state back to false, ensuring that the loading state is updated correctly, regardless of whether the API call succeeds or fails.

//making stripe api call 
const onSubscribe = async () => {
  try {
    setLoading(true);
    
    const response = await axios.get("/api/stripe");

    window.location.href = response.data.url;
  } catch (error) {
    toast.error("Something went wrong");
  } finally {
    setLoading(false);
  }
}

Note to self: had an error with the db - somehow the npx prisma db push only half worked (literally) Had to reset and push again I think I may have been starting to run the dev server at the same time and it got cut off halfway

The error:
in the development console:

INFO: Clerk: The request to /api/webhook is being redirected because there is no signed-in user, and the path is not included in ignoredRoutes or >publicRoutes. To prevent this behavior, choose one of:

1. To make the route accessible to both signed in and signed out users, add "/api/webhook" to the publicRoutes array passed to authMiddleware
2. To prevent Clerk authentication from running at all, pass ignoredRoutes: ["/((?!api|trpc))(_next|.+\..+)(.*)", "/api/webhook"] to authMiddleware
3. Pass a custom afterAuth to authMiddleware, and replace Clerk's default behavior of redirecting unless a route is included in publicRoutes

For additional information about middleware, please visit https://clerk.com/docs/nextjs/ This log only appears in development mode, or if debug: true is passed to authMiddleware)

The reason for this:

It's trying to go to our webhook correctly however it's telling us we are not authenticated and giving us a 401 error. Which generally means, (Unauthorized) status code indicates that the request has not been applied because it lacks valid authentication credentials for the target resource.

The developer console gave some really good advice and reminded me why I am getting this error, I forgot to add the webhook route into the publicRoute.

The solution:

Just as the developer console said:

To make the route accessible to both signed in and signed out users, add "/api/webhook" to the publicRoutes array passed to authMiddleware

So, in the middleware.ts:

• simply need to add our webhook to our public routes.

export default authMiddleware({
  publicRoutes: ["/", "/api/webhook"]
});

Testing things again and it seems to be working. Got a 404 error only because I have set the return url to take the user to the xxx/settings page and I have not yet createed that However, dev console gave no errors and checking the prisma db and the user has been created. Success!!!

Creating a lib/subscriptions.ts

The checkSubscription function is useful for verifying whether the current user has a valid subscription, which can be used for access control or displaying subscription-related content or features within the application.

1. checkSubscription Function:
   This function is responsible for checking the subscription status of the current user.

2. Asynchronous Operation:
   The function is defined as an asynchronous function with the async keyword, allowing it to use await for database queries.

3. User Authentication:
   The function uses the auth function from @clerk/nextjs to obtain the authenticated user's information, including the userId.

4. Check for User Authentication:
   If the userId is not available (user is not authenticated), the function returns false, indicating that the user does not have an active subscription.

5. Database Query:
   The function uses prismadb.userSubscription.findUnique to query the database and retrieve the user's subscription details.

6. Check for User Subscription:
   If the userSubscription is not available (no subscription entry found for the user), the function returns false, indicating that the user does not have an active subscription.

7. Subscription Validity Check:
   The function checks whether the stripeCurrentPeriodEnd date (end of the current subscription period) plus one day (DAY_IN_MS) is greater than the current date (Date.now()). This check ensures that the subscription is still valid and has not expired.

8. Return Value:
   The function returns true if the user has an active and valid subscription. Otherwise, it returns false.

Creating the new route app\(dashboard)\(routes)\settings\page.tsx;

creating the new component components\subscription-button.tsx;

The error:
in the development console:

[STRIPE_ERROR] StripeInvalidRequestError: You can’t create a portal session in test mode until you save your customer portal settings in test mode at https://dashboard.stripe.com/test/settings/billing/portal. at StripeError.generate (webpack-internal:///(sc_server)/./node_modules/stripe/esm/Error.js:22:20) at res.toJSON.then.Error_js__WEBPACK_IMPORTED_MODULE_0_.StripeAPIError.message (webpack-internal:///(sc_server)/./node_modules/stripe/esm/RequestSender.js:102:82)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'StripeInvalidRequestError', raw: { message: 'You can’t create a portal session in test mode until you save your customer portal settings in test mode at https://dashboard.stripe.com/test/settings/billing/portal.', request_log_url: 'https://dashboard.stripe.com/test/logs/req_4MCyG4JckpYwPs?t=1689939254',

The reason for this:

Stripe doesn't know if you have given the permissions for testing this in the development mode. This helps prevent accidently arraiving on this page.

Therefore need to check the settings and enable it first.

The solution:

You can follow the link given in the error message: https://dashboard.stripe.com/test/settings/billing/portal Alternativly, you can go Dashboard and search settings>billing>customer portal

Then activate the test link button - refresh the app and try again