Initial commit

Author: pDubey7

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

actions/edit-actions.ts

@@ -0,0 +1,37 @@
+"use server";
+
+import getDbConnection from "@/lib/db";
+import { currentUser } from "@clerk/nextjs/server";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
+export async function updatePostAction(data: {
+  postId: string;
+  content: string;
+}) {
+  const { postId, content } = data;
+
+  const user = await currentUser();
+  if (!user) {
+    redirect("/sign-in");
+  }
+
+  try {
+    const sql = await getDbConnection();
+
+    const [title, ...contentParts] = content?.split("\n\n") || [];
+    const updatedTitle = title.split("#")[1].trim();
+
+    await sql`UPDATE posts SET content = ${content}, title = ${updatedTitle} where id = ${postId}`;
+  } catch (error) {
+    console.error("Error occurred in updating the post", postId);
+    return {
+      success: false,
+    };
+  }
+
+  revalidatePath(`/posts/${postId}`);
+  return {
+    success: true,
+  };
+}

actions/upload-actions.ts

@@ -0,0 +1,181 @@
+"use server";
+import getDbConnection from "@/lib/db";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import OpenAI from "openai";
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+export async function transcribeUploadedFile(
+  resp: {
+    serverData: { userId: string; file: any };
+  }[]
+) {
+  if (!resp) {
+    return {
+      success: false,
+      message: "File upload failed",
+      data: null,
+    };
+  }
+
+  const {
+    serverData: {
+      userId,
+      file: { url: fileUrl, name: fileName },
+    },
+  } = resp[0];
+
+  if (!fileUrl || !fileName) {
+    return {
+      success: false,
+      message: "File upload failed",
+      data: null,
+    };
+  }
+
+  const response = await fetch(fileUrl);
+
+  try {
+    const transcriptions = await openai.audio.transcriptions.create({
+      model: "whisper-1",
+      file: response,
+    });
+
+    console.log({ transcriptions });
+    return {
+      success: true,
+      message: "File uploaded successfully!",
+      data: { transcriptions, userId },
+    };
+  } catch (error) {
+    console.error("Error processing file", error);
+
+    if (error instanceof OpenAI.APIError && error.status === 413) {
+      return {
+        success: false,
+        message: "File size exceeds the max limit of 20MB",
+        data: null,
+      };
+    }
+
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : "Error processing file",
+      data: null,
+    };
+  }
+}
+
+async function saveBlogPost(userId: string, title: string, content: string) {
+  try {
+    const sql = await getDbConnection();
+    const [insertedPost] = await sql`
+    INSERT INTO posts (user_id, title, content)
+    VALUES (${userId}, ${title}, ${content})
+    RETURNING id
+    `;
+    return insertedPost.id;
+  } catch (error) {
+    console.error("Error saving blog post", error);
+    throw error;
+  }
+}
+
+async function getUserBlogPosts(userId: string) {
+  try {
+    const sql = await getDbConnection();
+    const posts = await sql`
+    SELECT content FROM posts 
+    WHERE user_id = ${userId} 
+    ORDER BY created_at DESC 
+    LIMIT 3
+  `;
+    return posts.map((post) => post.content).join("\n\n");
+  } catch (error) {
+    console.error("Error getting user blog posts", error);
+    throw error;
+  }
+}
+
+async function generateBlogPost({
+  transcriptions,
+  userPosts,
+}: {
+  transcriptions: string;
+  userPosts: string;
+}) {
+  const completion = await openai.chat.completions.create({
+    messages: [
+      {
+        role: "system",
+        content:
+          "You are a skilled content writer that converts audio transcriptions into well-structured, engaging blog posts in Markdown format. Create a comprehensive blog post with a catchy title, introduction, main body with multiple sections, and a conclusion. Analyze the user's writing style from their previous posts and emulate their tone and style in the new post. Keep the tone casual and professional.",
+      },
+      {
+        role: "user",
+        content: `Here are some of my previous blog posts for reference:
+
+${userPosts}
+
+Please convert the following transcription into a well-structured blog post using Markdown formatting. Follow this structure:
+
+1. Start with a SEO friendly catchy title on the first line.
+2. Add two newlines after the title.
+3. Write an engaging introduction paragraph.
+4. Create multiple sections for the main content, using appropriate headings (##, ###).
+5. Include relevant subheadings within sections if needed.
+6. Use bullet points or numbered lists where appropriate.
+7. Add a conclusion paragraph at the end.
+8. Ensure the content is informative, well-organized, and easy to read.
+9. Emulate my writing style, tone, and any recurring patterns you notice from my previous posts.
+
+Here's the transcription to convert: ${transcriptions}`,
+      },
+    ],
+    model: "gpt-4o-mini",
+    temperature: 0.7,
+    max_tokens: 1000,
+  });
+
+  return completion.choices[0].message.content;
+}
+export async function generateBlogPostAction({
+  transcriptions,
+  userId,
+}: {
+  transcriptions: { text: string };
+  userId: string;
+}) {
+  const userPosts = await getUserBlogPosts(userId);
+
+  let postId = null;
+
+  if (transcriptions) {
+    const blogPost = await generateBlogPost({
+      transcriptions: transcriptions.text,
+      userPosts,
+    });
+
+    if (!blogPost) {
+      return {
+        success: false,
+        message: "Blog post generation failed, please try again...",
+      };
+    }
+
+    const [title, ...contentParts] = blogPost?.split("\n\n") || [];
+
+    //database connection
+
+    if (blogPost) {
+      postId = await saveBlogPost(userId, title, blogPost);
+    }
+  }
+
+  //navigate
+  revalidatePath(`/posts/${postId}`);
+  redirect(`/posts/${postId}`);
+}

app/(logged-in)/dashboard/page.tsx

@@ -0,0 +1,92 @@
+import BgGradient from "@/components/common/bg-gradient";
+import { Badge } from "@/components/ui/badge";
+import UpgradeYourPlan from "@/components/upload/upgrade-your-plan";
+import UploadForm from "@/components/upload/upload-form";
+import getDbConnection from "@/lib/db";
+import {
+  doesUserExist,
+  getPlanType,
+  hasCancelledSubscription,
+  updateUser,
+} from "@/lib/user-helpers";
+import { currentUser } from "@clerk/nextjs/server";
+import { redirect } from "next/navigation";
+
+export default async function Dashboard() {
+  const clerkUser = await currentUser();
+
+  if (!clerkUser) {
+    return redirect("/sign-in");
+  }
+
+  const email = clerkUser?.emailAddresses?.[0].emailAddress ?? "";
+
+  const sql = await getDbConnection();
+
+  //updatethe user id
+  let userId = null;
+  let priceId = null;
+
+  const hasUserCancelled = await hasCancelledSubscription(sql, email);
+  const user = await doesUserExist(sql, email);
+
+  if (user) {
+    //update the user_id in users table
+    userId = clerkUser?.id;
+    if (userId) {
+      await updateUser(sql, userId, email);
+    }
+
+    priceId = user[0].price_id;
+  }
+
+  const { id: planTypeId = "starter", name: planTypeName } =
+    getPlanType(priceId);
+
+  const isBasicPlan = planTypeId === "basic";
+  const isProPlan = planTypeId === "pro";
+
+  // check number of posts per plan
+  const posts = await sql`SELECT * FROM posts WHERE user_id = ${userId}`;
+
+  const isValidBasicPlan = isBasicPlan && posts.length < 3;
+
+  return (
+    <BgGradient>
+      <div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
+        <div className="flex flex-col items-center justify-center gap-6 text-center">
+          <Badge className="bg-gradient-to-r from-purple-700 to-pink-800 text-white px-4 py-1 text-lg font-semibold capitalize">
+            {planTypeName} Plan
+          </Badge>
+
+          <h2 className="capitalize text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+            Start creating amazing content
+          </h2>
+
+          <p className="mt-2 text-lg leading-8 text-gray-600 max-w-2xl text-center">
+            Upload your audio or video file and let our AI do the magic!
+          </p>
+
+          {(isBasicPlan || isProPlan) && (
+            <p className="mt-2 text-lg leading-8 text-gray-600 max-w-2xl text-center">
+              You get{" "}
+              <span className="font-bold text-amber-600 bg-amber-100 px-2 py-1 rounded-md">
+                {isBasicPlan ? "3" : "Unlimited"} blog posts
+              </span>{" "}
+              as part of the{" "}
+              <span className="font-bold capitalize">{planTypeName}</span> Plan.
+            </p>
+          )}
+
+          {isValidBasicPlan || isProPlan ? (
+            <BgGradient>
+              <UploadForm />
+            </BgGradient>
+          ) : (
+            <UpgradeYourPlan />
+          )}
+        </div>
+      </div>
+    </BgGradient>
+  );
+}