├── .eslintrc.json
├── .gitignore
├── README.md
├── app
    ├── api
    │   ├── create-checkout-session
    │   │   └── route.ts
    │   ├── send-welcome-email
    │   │   └── route.ts
    │   └── webhooks
    │   │   ├── clerk
    │   │       └── route.ts
    │   │   └── stripe
    │   │       └── route.ts
    ├── docs
    │   └── page.tsx
    ├── favicon.ico
    ├── fonts
    │   ├── GeistMonoVF.woff
    │   └── GeistVF.woff
    ├── generate
    │   └── page.tsx
    ├── globals.css
    ├── layout.tsx
    ├── page.tsx
    ├── pricing
    │   └── page.tsx
    ├── sign-in
    │   └── [[...sign-in]]
    │   │   └── page.tsx
    └── sign-up
    │   └── [[...sign-up]]
    │       └── page.tsx
├── components.json
├── components
    ├── Navbar.tsx
    ├── social-mocks
    │   ├── InstagramMock.tsx
    │   ├── LinkedInMock.tsx
    │   └── TwitterMock.tsx
    ├── theme-provider.tsx
    └── ui
    │   ├── avatar.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── input.tsx
    │   ├── select.tsx
    │   └── textarea.tsx
├── drizzle.config.js
├── index.mjs
├── lib
    └── utils.ts
├── middleware.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
    └── thumbnail.jpg
├── tailwind.config.ts
├── threadcraft.drawio
├── tsconfig.json
├── utils
    ├── db
    │   ├── actions.ts
    │   ├── dbConfig.jsx
    │   └── schema.ts
    └── mailtrap.ts
└── yarn.lock


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "next/typescript"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | .script.md
 9 | script.md
10 | # testing
11 | /coverage
12 | 
13 | # next.js
14 | /.next/
15 | /out/
16 | 
17 | # production
18 | /build
19 | 
20 | # misc
21 | .DS_Store
22 | *.pem
23 | 
24 | # debug
25 | npm-debug.log*
26 | yarn-debug.log*
27 | yarn-error.log*
28 | 
29 | # local env files
30 | .env*.local
31 | 
32 | # vercel
33 | .vercel
34 | script.md
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img src="public/thumbnail.jpg" alt="ThreadCraft AI Logo" />
 3 | </p>
 4 | 
 5 | # ThreadCraft AI: Social Media Content Generator
 6 | 
 7 | ThreadCraft AI is a powerful Next.js application that leverages AI to generate engaging content for various social media platforms. This project uses cutting-edge technologies to provide users with an intuitive interface for creating Twitter threads, Instagram captions, and LinkedIn posts.
 8 | 
 9 | ## Features
10 | 
11 | - AI-powered content generation for Twitter, Instagram, and LinkedIn
12 | - User authentication and account management with Clerk
13 | - Points-based system for content generation
14 | - Content history and regeneration
15 | - Responsive design for desktop and mobile devices
16 | - Preview functionality for generated content
17 | - Integration with Google's Generative AI (Gemini)
18 | 
19 | ## Tech Stack
20 | 
21 | - [Next.js](https://nextjs.org/) - React framework for building the frontend and API routes
22 | - [TypeScript](https://www.typescriptlang.org/) - Typed superset of JavaScript
23 | - [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
24 | - [Clerk](https://clerk.com/) - Authentication and user management
25 | - [Google Generative AI](https://ai.google.dev/) - AI model for content generation
26 | - [Drizzle ORM](https://orm.drizzle.team/) - TypeScript ORM for database management
27 | - [Neon Database](https://neon.tech/) - Serverless Postgres database
28 | - [Stripe](https://stripe.com/) - Payment processing for subscriptions
29 | - [Lucide React](https://lucide.dev/) - Icon library
30 | 
31 | ## Getting Started
32 | 
33 | 1. Clone the repository:
34 | 
35 |    ```bash
36 |    git clone https://github.com/your-username/threadcraft-ai.git
37 |    cd threadcraft-ai
38 |    ```
39 | 
40 | 2. Install dependencies:
41 | 
42 |    ```bash
43 |    npm install
44 |    ```
45 | 
46 | 3. Set up environment variables:
47 |    Create a `.env.local` file in the root directory and add the following variables:
48 | 
49 |    ```
50 |    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
51 |    CLERK_SECRET_KEY=your_clerk_secret_key
52 |    NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_api_key
53 |    DATABASE_URL=your_neon_database_url
54 |    STRIPE_SECRET_KEY=your_stripe_secret_key
55 |    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
56 |    ```
57 | 
58 | 4. Run the development server:
59 | 
60 |    ```bash
61 |    npm run dev
62 |    ```
63 | 
64 | 5. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
65 | 
66 | ## Deployment
67 | 
68 | 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.
69 | 
70 | Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
71 | 
72 | ## Contributing
73 | 
74 | Contributions are welcome! Please feel free to submit a Pull Request.
75 | 
76 | ## License
77 | 
78 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
79 | 


--------------------------------------------------------------------------------
/app/api/create-checkout-session/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from "next/server";
 2 | import Stripe from "stripe";
 3 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
 4 |   apiVersion: "2024-06-20",
 5 | });
 6 | export async function POST(req: Request) {
 7 |   try {
 8 |     const { priceId, userId } = await req.json();
 9 |     if (!priceId || !userId) {
10 |       return NextResponse.json(
11 |         { error: "Missing priceId or userId" },
12 |         { status: 400 }
13 |       );
14 |     }
15 |     const session = await stripe.checkout.sessions.create({
16 |       mode: "subscription",
17 |       payment_method_types: ["card"],
18 |       line_items: [
19 |         {
20 |           price: priceId,
21 |           quantity: 1,
22 |         },
23 |       ],
24 |       success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/generate?session_id={CHECKOUT_SESSION_ID}`,
25 |       cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/pricing`,
26 |       client_reference_id: userId,
27 |     });
28 |     return NextResponse.json({ sessionId: session.id });
29 |   } catch (error: any) {
30 |     console.error("Error creating checkout session:", error);
31 |     return NextResponse.json(
32 |       { error: "Error creating checkout session", details: error.message },
33 |       { status: 500 }
34 |     );
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/app/api/send-welcome-email/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from "next/server";
 2 | import { MailtrapClient } from "mailtrap";
 3 | 
 4 | const TOKEN = process.env.MAILTRAP_API_TOKEN!;
 5 | 
 6 | const client = new MailtrapClient({ token: TOKEN });
 7 | 
 8 | export async function POST(req: Request) {
 9 |   try {
10 |     const { email, name } = await req.json();
11 | 
12 |     if (!email || !name) {
13 |       return NextResponse.json(
14 |         { error: "Email and name are required" },
15 |         { status: 400 }
16 |       );
17 |     }
18 | 
19 |     const sender = { name: "ThreadCraft AI", email: "hello@demomailtrap.com" };
20 |     const recipients = [{ email }];
21 | 
22 |     await client.send({
23 |       from: sender,
24 |       to: recipients,
25 |       subject: "Welcome to ThreadCraft AI!",
26 |       html: `
27 |         <h1>Welcome to ThreadCraft AI, ${name}!</h1>
28 |         <p>We're excited to have you on board. Get started by...</p>
29 |       `,
30 |       category: "Welcome Email",
31 |     });
32 | 
33 |     return NextResponse.json({ message: "Welcome email sent successfully" });
34 |   } catch (error) {
35 |     console.error("Error sending welcome email:", error);
36 |     return NextResponse.json(
37 |       { error: "Failed to send welcome email" },
38 |       { status: 500 }
39 |     );
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/app/api/webhooks/clerk/route.ts:
--------------------------------------------------------------------------------
 1 | import { Webhook } from "svix";
 2 | import { headers } from "next/headers";
 3 | import { WebhookEvent } from "@clerk/nextjs/server";
 4 | import { createOrUpdateUser } from "@/utils/db/actions";
 5 | import { NextResponse } from "next/server";
 6 | 
 7 | export async function POST(req: Request) {
 8 |   const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET;
 9 | 
10 |   if (!WEBHOOK_SECRET) {
11 |     throw new Error(
12 |       "Please add CLERK_WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local"
13 |     );
14 |   }
15 | 
16 |   const headerPayload = headers();
17 |   const svix_id = headerPayload.get("svix-id");
18 |   const svix_timestamp = headerPayload.get("svix-timestamp");
19 |   const svix_signature = headerPayload.get("svix-signature");
20 | 
21 |   if (!svix_id || !svix_timestamp || !svix_signature) {
22 |     return new Response("Error occurred -- no svix headers", {
23 |       status: 400,
24 |     });
25 |   }
26 | 
27 |   const payload = await req.json();
28 |   const body = JSON.stringify(payload);
29 | 
30 |   const wh = new Webhook(WEBHOOK_SECRET);
31 | 
32 |   let evt: WebhookEvent;
33 | 
34 |   try {
35 |     evt = wh.verify(body, {
36 |       "svix-id": svix_id,
37 |       "svix-timestamp": svix_timestamp,
38 |       "svix-signature": svix_signature,
39 |     }) as WebhookEvent;
40 |   } catch (err) {
41 |     console.error("Error verifying webhook:", err);
42 |     return new Response("Error occurred", {
43 |       status: 400,
44 |     });
45 |   }
46 | 
47 |   const eventType = evt.type;
48 |   if (eventType === "user.created" || eventType === "user.updated") {
49 |     const { id, email_addresses, first_name, last_name } = evt.data;
50 |     const email = email_addresses[0]?.email_address;
51 |     const name = `${first_name} ${last_name}`;
52 | 
53 |     if (email) {
54 |       try {
55 |         await createOrUpdateUser(id, email, name);
56 | 
57 |         console.log(`User ${id} created/updated successfully`);
58 |       } catch (error) {
59 |         console.error("Error creating/updating user:", error);
60 |         return new Response("Error processing user data", { status: 500 });
61 |       }
62 |     }
63 |   }
64 | 
65 |   // console.log(`Webhook with an ID of ${evt.data.id} and type of ${eventType}`);
66 |   // console.log("Webhook body:", body);
67 | 
68 |   return NextResponse.json(
69 |     { message: "Webhook processed successfully" },
70 |     { status: 200 }
71 |   );
72 | }
73 | 


--------------------------------------------------------------------------------
/app/api/webhooks/stripe/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextResponse } from "next/server";
  2 | import Stripe from "stripe";
  3 | import { headers } from "next/headers";
  4 | import {
  5 |   createOrUpdateSubscription,
  6 |   updateUserPoints,
  7 | } from "@/utils/db/actions";
  8 | 
  9 | const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
 10 |   apiVersion: "2024-06-20",
 11 | });
 12 | 
 13 | export async function POST(req: Request) {
 14 |   const body = await req.text();
 15 |   const signature = headers().get("Stripe-Signature") as string;
 16 | 
 17 |   if (!signature) {
 18 |     console.error("No Stripe signature found");
 19 |     return NextResponse.json({ error: "No Stripe signature" }, { status: 400 });
 20 |   }
 21 | 
 22 |   let event: Stripe.Event;
 23 | 
 24 |   try {
 25 |     event = stripe.webhooks.constructEvent(
 26 |       body,
 27 |       signature,
 28 |       process.env.STRIPE_WEBHOOK_SECRET!
 29 |     );
 30 |   } catch (err: any) {
 31 |     console.error(`Webhook signature verification failed: ${err.message}`);
 32 |     return NextResponse.json(
 33 |       { error: `Webhook Error: ${err.message}` },
 34 |       { status: 400 }
 35 |     );
 36 |   }
 37 | 
 38 |   console.log(`Received event type: ${event.type}`);
 39 | 
 40 |   if (event.type === "checkout.session.completed") {
 41 |     const session = event.data.object as Stripe.Checkout.Session;
 42 |     const userId = session.client_reference_id;
 43 |     const subscriptionId = session.subscription as string;
 44 | 
 45 |     if (!userId || !subscriptionId) {
 46 |       console.error("Missing userId or subscriptionId in session", { session });
 47 |       return NextResponse.json(
 48 |         { error: "Invalid session data" },
 49 |         { status: 400 }
 50 |       );
 51 |     }
 52 | 
 53 |     try {
 54 |       console.log(`Retrieving subscription: ${subscriptionId}`);
 55 |       const subscription = await stripe.subscriptions.retrieve(subscriptionId);
 56 |       console.log("Retrieved subscription:", subscription);
 57 | 
 58 |       if (!subscription.items.data.length) {
 59 |         console.error("No items found in subscription", { subscription });
 60 |         return NextResponse.json(
 61 |           { error: "Invalid subscription data" },
 62 |           { status: 400 }
 63 |         );
 64 |       }
 65 | 
 66 |       const priceId = subscription.items.data[0].price.id;
 67 |       console.log(`Price ID: ${priceId}`);
 68 | 
 69 |       let plan: string;
 70 |       let pointsToAdd: number;
 71 | 
 72 |       // Map price IDs to plan names and points
 73 |       switch (priceId) {
 74 |         case "price_1PyFKGBibz3ZDixDAaJ3HO74":
 75 |           plan = "Basic";
 76 |           pointsToAdd = 100;
 77 |           break;
 78 |         case "price_1PyFN0Bibz3ZDixDqm9eYL8W":
 79 |           plan = "Pro";
 80 |           pointsToAdd = 500;
 81 |           break;
 82 |         default:
 83 |           console.error("Unknown price ID", { priceId });
 84 |           return NextResponse.json(
 85 |             { error: "Unknown price ID" },
 86 |             { status: 400 }
 87 |           );
 88 |       }
 89 | 
 90 |       console.log(`Creating/updating subscription for user ${userId}`);
 91 |       const updatedSubscription = await createOrUpdateSubscription(
 92 |         userId,
 93 |         subscriptionId,
 94 |         plan,
 95 |         "active",
 96 |         new Date(subscription.current_period_start * 1000),
 97 |         new Date(subscription.current_period_end * 1000)
 98 |       );
 99 | 
100 |       if (!updatedSubscription) {
101 |         console.error("Failed to create or update subscription");
102 |         return NextResponse.json(
103 |           { error: "Failed to create or update subscription" },
104 |           { status: 500 }
105 |         );
106 |       }
107 | 
108 |       console.log(`Updating points for user ${userId}: +${pointsToAdd}`);
109 |       await updateUserPoints(userId, pointsToAdd);
110 | 
111 |       console.log(`Successfully processed subscription for user ${userId}`);
112 |     } catch (error: any) {
113 |       console.error("Error processing subscription:", error);
114 |       return NextResponse.json(
115 |         { error: "Error processing subscription", details: error.message },
116 |         { status: 500 }
117 |       );
118 |     }
119 |   }
120 | 
121 |   return NextResponse.json({ received: true });
122 | }
123 | 


--------------------------------------------------------------------------------
/app/docs/page.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { Button } from "@/components/ui/button";
 3 | import { Navbar } from "@/components/Navbar";
 4 | 
 5 | const docsSections = [
 6 |   {
 7 |     title: "Getting Started",
 8 |     description:
 9 |       "Learn how to set up your account and create your first AI-generated content.",
10 |     link: "/docs/getting-started",
11 |   },
12 |   {
13 |     title: "Twitter Threads",
14 |     description:
15 |       "Discover how to create engaging Twitter threads using our AI technology.",
16 |     link: "/docs/twitter-threads",
17 |   },
18 |   {
19 |     title: "Instagram Captions",
20 |     description:
21 |       "Learn the best practices for generating Instagram captions that boost engagement.",
22 |     link: "/docs/instagram-captions",
23 |   },
24 |   {
25 |     title: "LinkedIn Posts",
26 |     description:
27 |       "Explore techniques for crafting professional LinkedIn content with AI assistance.",
28 |     link: "/docs/linkedin-posts",
29 |   },
30 |   {
31 |     title: "API Reference",
32 |     description:
33 |       "Detailed documentation for integrating our AI content generation into your applications.",
34 |     link: "/docs/api-reference",
35 |   },
36 | ];
37 | 
38 | export default function DocsPage() {
39 |   return (
40 |     <div className="min-h-screen bg-black text-gray-100">
41 |       <Navbar />
42 |       <main className="container mx-auto px-8 py-20">
43 |         <h1 className="text-5xl font-bold mb-12 text-center text-white">
44 |           Documentation
45 |         </h1>
46 |         <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
47 |           {docsSections.map((section, index) => (
48 |             <div
49 |               key={index}
50 |               className="p-6 rounded-lg border border-gray-800 flex flex-col"
51 |             >
52 |               <h2 className="text-2xl font-bold mb-3 text-white">
53 |                 {section.title}
54 |               </h2>
55 |               <p className="text-gray-400 mb-4 flex-grow">
56 |                 {section.description}
57 |               </p>
58 |               <Button
59 |                 asChild
60 |                 className="w-full bg-white text-black hover:bg-gray-200"
61 |               >
62 |                 <Link href={section.link}>Read More</Link>
63 |               </Button>
64 |             </div>
65 |           ))}
66 |         </div>
67 |       </main>
68 |     </div>
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mendsalbert/threadcraftai/0e14ff674d13330af1af87995190dcb03a6e71df/app/favicon.ico


--------------------------------------------------------------------------------
/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mendsalbert/threadcraftai/0e14ff674d13330af1af87995190dcb03a6e71df/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mendsalbert/threadcraftai/0e14ff674d13330af1af87995190dcb03a6e71df/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/app/generate/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { useState, useEffect } from "react";
  3 | import { Button } from "@/components/ui/button";
  4 | import { Input } from "@/components/ui/input";
  5 | import { Textarea } from "@/components/ui/textarea";
  6 | import {
  7 |   Select,
  8 |   SelectContent,
  9 |   SelectItem,
 10 |   SelectTrigger,
 11 |   SelectValue,
 12 | } from "@/components/ui/select";
 13 | import {
 14 |   Loader2,
 15 |   Upload,
 16 |   Copy,
 17 |   Twitter,
 18 |   Instagram,
 19 |   Linkedin,
 20 |   Clock,
 21 |   Zap,
 22 | } from "lucide-react";
 23 | import { GoogleGenerativeAI, Part } from "@google/generative-ai";
 24 | import ReactMarkdown from "react-markdown";
 25 | import { Navbar } from "@/components/Navbar";
 26 | import { SignInButton, useUser } from "@clerk/nextjs";
 27 | import { useRouter } from "next/navigation";
 28 | import {
 29 |   getUserPoints,
 30 |   saveGeneratedContent,
 31 |   updateUserPoints,
 32 |   getGeneratedContentHistory,
 33 |   createOrUpdateUser,
 34 | } from "@/utils/db/actions";
 35 | import { TwitterMock } from "@/components/social-mocks/TwitterMock";
 36 | import { InstagramMock } from "@/components/social-mocks/InstagramMock";
 37 | import { LinkedInMock } from "@/components/social-mocks/LinkedInMock";
 38 | import Link from "next/link";
 39 | 
 40 | const apiKey = process.env.NEXT_PUBLIC_GEMINI_API_KEY;
 41 | const genAI = apiKey ? new GoogleGenerativeAI(apiKey) : null;
 42 | 
 43 | const contentTypes = [
 44 |   { value: "twitter", label: "Twitter Thread" },
 45 |   { value: "instagram", label: "Instagram Caption" },
 46 |   { value: "linkedin", label: "LinkedIn Post" },
 47 | ];
 48 | 
 49 | const MAX_TWEET_LENGTH = 280;
 50 | const POINTS_PER_GENERATION = 5;
 51 | 
 52 | interface HistoryItem {
 53 |   id: number;
 54 |   contentType: string;
 55 |   prompt: string;
 56 |   content: string;
 57 |   createdAt: Date;
 58 | }
 59 | 
 60 | export default function GenerateContent() {
 61 |   const { isLoaded, isSignedIn, user } = useUser();
 62 |   const router = useRouter();
 63 | 
 64 |   const [contentType, setContentType] = useState(contentTypes[0].value);
 65 |   const [prompt, setPrompt] = useState("");
 66 |   const [generatedContent, setGeneratedContent] = useState<string[]>([]);
 67 |   const [isLoading, setIsLoading] = useState(false);
 68 |   const [image, setImage] = useState<File | null>(null);
 69 |   const [userPoints, setUserPoints] = useState<number | null>(null);
 70 |   const [history, setHistory] = useState<HistoryItem[]>([]);
 71 |   const [selectedHistoryItem, setSelectedHistoryItem] =
 72 |     useState<HistoryItem | null>(null);
 73 | 
 74 |   useEffect(() => {
 75 |     if (!apiKey) {
 76 |       console.error("Gemini API key is not set");
 77 |     }
 78 |   }, []);
 79 | 
 80 |   useEffect(() => {
 81 |     if (isLoaded && !isSignedIn) {
 82 |       router.push("/");
 83 |     } else if (isSignedIn && user) {
 84 |       console.log("User loaded:", user);
 85 |       fetchUserPoints();
 86 |       fetchContentHistory();
 87 |     }
 88 |   }, [isLoaded, isSignedIn, user, router]);
 89 | 
 90 |   const fetchUserPoints = async () => {
 91 |     if (user?.id) {
 92 |       console.log("Fetching points for user:", user.id);
 93 |       const points = await getUserPoints(user.id);
 94 |       console.log("Fetched points:", points);
 95 |       setUserPoints(points);
 96 |       if (points === 0) {
 97 |         console.log("User has 0 points. Attempting to create/update user.");
 98 |         const updatedUser = await createOrUpdateUser(
 99 |           user.id,
100 |           user.emailAddresses[0].emailAddress,
101 |           user.fullName || ""
102 |         );
103 |         console.log("Updated user:", updatedUser);
104 |         if (updatedUser) {
105 |           setUserPoints(updatedUser.points);
106 |         }
107 |       }
108 |     }
109 |   };
110 | 
111 |   const fetchContentHistory = async () => {
112 |     if (user?.id) {
113 |       const contentHistory = await getGeneratedContentHistory(user.id);
114 |       setHistory(contentHistory);
115 |     }
116 |   };
117 | 
118 |   const handleGenerate = async () => {
119 |     if (
120 |       !genAI ||
121 |       !user?.id ||
122 |       userPoints === null ||
123 |       userPoints < POINTS_PER_GENERATION
124 |     ) {
125 |       alert("Not enough points or API key not set.");
126 |       return;
127 |     }
128 | 
129 |     setIsLoading(true);
130 |     try {
131 |       const model = genAI.getGenerativeModel({ model: "gemini-1.5-pro" });
132 | 
133 |       let promptText = `Generate ${contentType} content about "${prompt}".`;
134 |       if (contentType === "twitter") {
135 |         promptText +=
136 |           " Provide a thread of 5 tweets, each under 280 characters.";
137 |       }
138 | 
139 |       let imagePart: Part | null = null;
140 |       if (contentType === "instagram" && image) {
141 |         const reader = new FileReader();
142 |         const imageData = await new Promise<string>((resolve) => {
143 |           reader.onload = (e) => {
144 |             if (e.target && typeof e.target.result === "string") {
145 |               resolve(e.target.result);
146 |             } else {
147 |               resolve("");
148 |             }
149 |           };
150 |           reader.readAsDataURL(image);
151 |         });
152 | 
153 |         const base64Data = imageData.split(",")[1];
154 |         if (base64Data) {
155 |           imagePart = {
156 |             inlineData: {
157 |               data: base64Data,
158 |               mimeType: image.type,
159 |             },
160 |           };
161 |         }
162 |         promptText +=
163 |           " Describe the image and incorporate it into the caption.";
164 |       }
165 | 
166 |       const parts: (string | Part)[] = [promptText];
167 |       if (imagePart) parts.push(imagePart);
168 | 
169 |       const result = await model.generateContent(parts);
170 |       const generatedText = result.response.text();
171 | 
172 |       let content: string[];
173 |       if (contentType === "twitter") {
174 |         content = generatedText
175 |           .split("\n\n")
176 |           .filter((tweet) => tweet.trim() !== "");
177 |       } else {
178 |         content = [generatedText];
179 |       }
180 | 
181 |       setGeneratedContent(content);
182 | 
183 |       // Update points
184 |       const updatedUser = await updateUserPoints(
185 |         user.id,
186 |         -POINTS_PER_GENERATION
187 |       );
188 |       if (updatedUser) {
189 |         setUserPoints(updatedUser.points);
190 |       }
191 | 
192 |       // Save generated content
193 |       const savedContent = await saveGeneratedContent(
194 |         user.id,
195 |         content.join("\n\n"),
196 |         prompt,
197 |         contentType
198 |       );
199 | 
200 |       if (savedContent) {
201 |         setHistory((prevHistory) => [savedContent, ...prevHistory]);
202 |       }
203 |     } catch (error) {
204 |       console.error("Error generating content:", error);
205 |       setGeneratedContent(["An error occurred while generating content."]);
206 |     } finally {
207 |       setIsLoading(false);
208 |     }
209 |   };
210 | 
211 |   const handleHistoryItemClick = (item: HistoryItem) => {
212 |     setSelectedHistoryItem(item);
213 |     setContentType(item.contentType);
214 |     setPrompt(item.prompt);
215 |     setGeneratedContent(
216 |       item.contentType === "twitter"
217 |         ? item.content.split("\n\n")
218 |         : [item.content]
219 |     );
220 |   };
221 | 
222 |   const copyToClipboard = (text: string) => {
223 |     navigator.clipboard.writeText(text);
224 |   };
225 | 
226 |   const renderContentMock = () => {
227 |     if (generatedContent.length === 0) return null;
228 | 
229 |     switch (contentType) {
230 |       case "twitter":
231 |         return <TwitterMock content={generatedContent} />;
232 |       case "instagram":
233 |         return <InstagramMock content={generatedContent[0]} />;
234 |       case "linkedin":
235 |         return <LinkedInMock content={generatedContent[0]} />;
236 |       default:
237 |         return null;
238 |     }
239 |   };
240 | 
241 |   if (!isLoaded) {
242 |     return <div>Loading...</div>;
243 |   }
244 | 
245 |   if (!isSignedIn) {
246 |     return (
247 |       <div className="flex items-center justify-center min-h-screen bg-[#0a0a0a]">
248 |         <div className="text-center bg-[#111111] p-8 rounded-lg shadow-lg">
249 |           <h1 className="text-3xl font-bold text-white mb-4">
250 |             Welcome to ThreadCraft AI
251 |           </h1>
252 |           <p className="text-gray-400 mb-6">
253 |             To start generating amazing content, please sign in or create an
254 |             account.
255 |           </p>
256 |           <SignInButton mode="modal">
257 |             <Button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2">
258 |               Sign In / Sign Up
259 |             </Button>
260 |           </SignInButton>
261 |           <p className="text-gray-500 mt-4 text-sm">
262 |             By signing in, you agree to our Terms of Service and Privacy Policy.
263 |           </p>
264 |         </div>
265 |       </div>
266 |     );
267 |   }
268 | 
269 |   const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
270 |     if (event.target.files && event.target.files[0]) {
271 |       setImage(event.target.files[0]);
272 |     }
273 |   };
274 | 
275 |   return (
276 |     <div className="bg-gradient-to-br from-gray-900 to-black min-h-screen text-white">
277 |       <Navbar />
278 |       <div className="container mx-auto px-4 mb-8 sm:px-6 lg:px-8 py-8">
279 |         <div className="grid grid-cols-1 mt-14 lg:grid-cols-3 gap-8">
280 |           {/* Left sidebar - History */}
281 |           <div className="lg:col-span-1 bg-gray-800 rounded-2xl p-6 h-[calc(100vh-12rem)] overflow-y-auto">
282 |             <div className="flex items-center justify-between mb-6">
283 |               <h2 className="text-2xl font-semibold text-blue-400">History</h2>
284 |               <Clock className="h-6 w-6 text-blue-400" />
285 |             </div>
286 |             <div className="space-y-4">
287 |               {history.map((item) => (
288 |                 <div
289 |                   key={item.id}
290 |                   className="p-4 bg-gray-700 rounded-xl hover:bg-gray-600 transition-colors cursor-pointer"
291 |                   onClick={() => handleHistoryItemClick(item)}
292 |                 >
293 |                   <div className="flex items-center mb-2">
294 |                     {item.contentType === "twitter" && (
295 |                       <Twitter className="mr-2 h-5 w-5 text-blue-400" />
296 |                     )}
297 |                     {item.contentType === "instagram" && (
298 |                       <Instagram className="mr-2 h-5 w-5 text-pink-400" />
299 |                     )}
300 |                     {item.contentType === "linkedin" && (
301 |                       <Linkedin className="mr-2 h-5 w-5 text-blue-600" />
302 |                     )}
303 |                     <span className="text-sm font-medium">
304 |                       {item.contentType}
305 |                     </span>
306 |                   </div>
307 |                   <p className="text-sm text-gray-300 truncate">
308 |                     {item.prompt}
309 |                   </p>
310 |                   <div className="flex items-center text-xs text-gray-400 mt-2">
311 |                     <Clock className="mr-1 h-3 w-3" />
312 |                     {new Date(item.createdAt).toLocaleString()}
313 |                   </div>
314 |                 </div>
315 |               ))}
316 |             </div>
317 |           </div>
318 | 
319 |           {/* Main content area */}
320 |           <div className="lg:col-span-2 space-y-6">
321 |             {/* Points display */}
322 |             <div className="bg-gray-800 p-6 rounded-2xl flex items-center justify-between">
323 |               <div className="flex items-center">
324 |                 <Zap className="h-8 w-8 text-yellow-400 mr-3" />
325 |                 <div>
326 |                   <p className="text-sm text-gray-400">Available Points</p>
327 |                   <p className="text-2xl font-bold text-yellow-400">
328 |                     {userPoints !== null ? userPoints : "Loading..."}
329 |                   </p>
330 |                 </div>
331 |               </div>
332 |               <Button className="bg-blue-600 hover:bg-blue-700 text-white text-sm py-2 px-4 rounded-full transition-colors">
333 |                 <Link href="/pricing">Get More Points</Link>
334 |               </Button>
335 |             </div>
336 | 
337 |             {/* Content generation form */}
338 |             <div className="bg-gray-800 p-6 rounded-2xl space-y-6">
339 |               <div>
340 |                 <label className="block text-sm font-medium mb-2 text-gray-300">
341 |                   Content Type
342 |                 </label>
343 |                 <Select
344 |                   onValueChange={setContentType}
345 |                   defaultValue={contentType}
346 |                 >
347 |                   <SelectTrigger className="w-full bg-gray-700 border-none rounded-xl">
348 |                     <SelectValue placeholder="Select content type" />
349 |                   </SelectTrigger>
350 |                   <SelectContent>
351 |                     {contentTypes.map((type) => (
352 |                       <SelectItem key={type.value} value={type.value}>
353 |                         <div className="flex items-center">
354 |                           {type.value === "twitter" && (
355 |                             <Twitter className="mr-2 h-4 w-4 text-blue-400" />
356 |                           )}
357 |                           {type.value === "instagram" && (
358 |                             <Instagram className="mr-2 h-4 w-4 text-pink-400" />
359 |                           )}
360 |                           {type.value === "linkedin" && (
361 |                             <Linkedin className="mr-2 h-4 w-4 text-blue-600" />
362 |                           )}
363 |                           {type.label}
364 |                         </div>
365 |                       </SelectItem>
366 |                     ))}
367 |                   </SelectContent>
368 |                 </Select>
369 |               </div>
370 | 
371 |               <div>
372 |                 <label
373 |                   htmlFor="prompt"
374 |                   className="block text-sm font-medium mb-2 text-gray-300"
375 |                 >
376 |                   Prompt
377 |                 </label>
378 |                 <Textarea
379 |                   id="prompt"
380 |                   placeholder="Enter your prompt here..."
381 |                   value={prompt}
382 |                   onChange={(e) => setPrompt(e.target.value)}
383 |                   rows={4}
384 |                   className="w-full bg-gray-700 border-none rounded-xl resize-none"
385 |                 />
386 |               </div>
387 | 
388 |               {contentType === "instagram" && (
389 |                 <div>
390 |                   <label className="block text-sm font-medium mb-2 text-gray-300">
391 |                     Upload Image
392 |                   </label>
393 |                   <div className="flex items-center space-x-3">
394 |                     <Input
395 |                       type="file"
396 |                       accept="image/*"
397 |                       onChange={handleImageUpload}
398 |                       className="hidden"
399 |                       id="image-upload"
400 |                     />
401 |                     <label
402 |                       htmlFor="image-upload"
403 |                       className="cursor-pointer flex items-center justify-center px-4 py-2 bg-gray-700 rounded-xl text-sm font-medium hover:bg-gray-600 transition-colors"
404 |                     >
405 |                       <Upload className="mr-2 h-5 w-5" />
406 |                       <span>Upload Image</span>
407 |                     </label>
408 |                     {image && (
409 |                       <span className="text-sm text-gray-400">
410 |                         {image.name}
411 |                       </span>
412 |                     )}
413 |                   </div>
414 |                 </div>
415 |               )}
416 | 
417 |               <Button
418 |                 onClick={handleGenerate}
419 |                 disabled={
420 |                   isLoading ||
421 |                   !prompt ||
422 |                   userPoints === null ||
423 |                   userPoints < POINTS_PER_GENERATION
424 |                 }
425 |                 className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-xl transition-colors"
426 |               >
427 |                 {isLoading ? (
428 |                   <>
429 |                     <Loader2 className="mr-2 h-5 w-5 animate-spin" />
430 |                     Generating...
431 |                   </>
432 |                 ) : (
433 |                   `Generate Content (${POINTS_PER_GENERATION} points)`
434 |                 )}
435 |               </Button>
436 |             </div>
437 | 
438 |             {/* Generated content display */}
439 |             {(selectedHistoryItem || generatedContent.length > 0) && (
440 |               <div className="bg-gray-800 p-6 rounded-2xl space-y-4">
441 |                 <h2 className="text-2xl font-semibold text-blue-400">
442 |                   {selectedHistoryItem ? "History Item" : "Generated Content"}
443 |                 </h2>
444 |                 {contentType === "twitter" ? (
445 |                   <div className="space-y-4">
446 |                     {(selectedHistoryItem
447 |                       ? selectedHistoryItem.content.split("\n\n")
448 |                       : generatedContent
449 |                     ).map((tweet, index) => (
450 |                       <div
451 |                         key={index}
452 |                         className="bg-gray-700 p-4 rounded-xl relative"
453 |                       >
454 |                         <ReactMarkdown className="prose prose-invert max-w-none mb-2 text-sm">
455 |                           {tweet}
456 |                         </ReactMarkdown>
457 |                         <div className="flex justify-between items-center text-gray-400 text-xs mt-2">
458 |                           <span>
459 |                             {tweet.length}/{MAX_TWEET_LENGTH}
460 |                           </span>
461 |                           <Button
462 |                             onClick={() => copyToClipboard(tweet)}
463 |                             className="bg-gray-600 hover:bg-gray-500 text-white rounded-full p-2 transition-colors"
464 |                           >
465 |                             <Copy className="h-4 w-4" />
466 |                           </Button>
467 |                         </div>
468 |                       </div>
469 |                     ))}
470 |                   </div>
471 |                 ) : (
472 |                   <div className="bg-gray-700 p-4 rounded-xl">
473 |                     <ReactMarkdown className="prose prose-invert max-w-none text-sm">
474 |                       {selectedHistoryItem
475 |                         ? selectedHistoryItem.content
476 |                         : generatedContent[0]}
477 |                     </ReactMarkdown>
478 |                   </div>
479 |                 )}
480 |               </div>
481 |             )}
482 | 
483 |             {/* Content preview */}
484 |             {generatedContent.length > 0 && (
485 |               <div className="bg-gray-800 p-6 rounded-2xl">
486 |                 <h2 className="text-2xl font-semibold mb-4 text-blue-400">
487 |                   Preview
488 |                 </h2>
489 |                 {renderContentMock()}
490 |               </div>
491 |             )}
492 |           </div>
493 |         </div>
494 |       </div>
495 |     </div>
496 |   );
497 | }
498 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --background: #ffffff;
 7 |   --foreground: #171717;
 8 | }
 9 | 
10 | @media (prefers-color-scheme: dark) {
11 |   :root {
12 |     --background: #0a0a0a;
13 |     --foreground: #ededed;
14 |   }
15 | }
16 | 
17 | body {
18 |   color: var(--foreground);
19 |   background: var(--background);
20 |   font-family: Arial, Helvetica, sans-serif;
21 | }
22 | 
23 | @layer utilities {
24 |   .text-balance {
25 |     text-wrap: balance;
26 |   }
27 | }
28 | 
29 | @layer base {
30 |   :root {
31 |     --background: 0 0% 100%;
32 |     --foreground: 222.2 84% 4.9%;
33 |     --card: 0 0% 100%;
34 |     --card-foreground: 222.2 84% 4.9%;
35 |     --popover: 0 0% 100%;
36 |     --popover-foreground: 222.2 84% 4.9%;
37 |     --primary: 222.2 47.4% 11.2%;
38 |     --primary-foreground: 210 40% 98%;
39 |     --secondary: 210 40% 96.1%;
40 |     --secondary-foreground: 222.2 47.4% 11.2%;
41 |     --muted: 210 40% 96.1%;
42 |     --muted-foreground: 215.4 16.3% 46.9%;
43 |     --accent: 210 40% 96.1%;
44 |     --accent-foreground: 222.2 47.4% 11.2%;
45 |     --destructive: 0 84.2% 60.2%;
46 |     --destructive-foreground: 210 40% 98%;
47 |     --border: 214.3 31.8% 91.4%;
48 |     --input: 214.3 31.8% 91.4%;
49 |     --ring: 222.2 84% 4.9%;
50 |     --radius: 0.5rem;
51 |   }
52 |   .dark {
53 |     --background: 222.2 84% 4.9%;
54 |     --foreground: 210 40% 98%;
55 |     --card: 222.2 84% 4.9%;
56 |     --card-foreground: 210 40% 98%;
57 |     --popover: 222.2 84% 4.9%;
58 |     --popover-foreground: 210 40% 98%;
59 |     --primary: 210 40% 98%;
60 |     --primary-foreground: 222.2 47.4% 11.2%;
61 |     --secondary: 217.2 32.6% 17.5%;
62 |     --secondary-foreground: 210 40% 98%;
63 |     --muted: 217.2 32.6% 17.5%;
64 |     --muted-foreground: 215 20.2% 65.1%;
65 |     --accent: 217.2 32.6% 17.5%;
66 |     --accent-foreground: 210 40% 98%;
67 |     --destructive: 0 62.8% 30.6%;
68 |     --destructive-foreground: 210 40% 98%;
69 |     --border: 217.2 32.6% 17.5%;
70 |     --input: 217.2 32.6% 17.5%;
71 |     --ring: 212.7 26.8% 83.9%;
72 |   }
73 | }
74 | 
75 | @layer base {
76 |   * {
77 |     @apply border-border;
78 |   }
79 |   body {
80 |     @apply bg-background text-foreground;
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { ClerkProvider } from "@clerk/nextjs";
 2 | import { dark } from "@clerk/themes";
 3 | import { ThemeProvider } from "@/components/theme-provider";
 4 | import { Inter } from "next/font/google";
 5 | import "./globals.css";
 6 | 
 7 | const inter = Inter({ subsets: ["latin"] });
 8 | 
 9 | export default function RootLayout({
10 |   children,
11 | }: {
12 |   children: React.ReactNode;
13 | }) {
14 |   return (
15 |     <ClerkProvider
16 |       appearance={{
17 |         baseTheme: dark,
18 |       }}
19 |     >
20 |       <html lang="en" suppressHydrationWarning>
21 |         <body className={`${inter.className} bg-black text-white antialiased`}>
22 |           <ThemeProvider attribute="class" defaultTheme="dark">
23 |             {children}
24 |           </ThemeProvider>
25 |         </body>
26 |       </html>
27 |     </ClerkProvider>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | import Link from "next/link";
  2 | import { Button } from "@/components/ui/button";
  3 | import {
  4 |   TwitterIcon,
  5 |   InstagramIcon,
  6 |   LinkedinIcon,
  7 |   ArrowRightIcon,
  8 |   CheckCircleIcon,
  9 |   SparklesIcon,
 10 |   TrendingUpIcon,
 11 |   ZapIcon,
 12 |   RocketIcon,
 13 | } from "lucide-react";
 14 | import { auth } from "@clerk/nextjs/server";
 15 | import { SignUpButton } from "@clerk/nextjs";
 16 | import { Navbar } from "@/components/Navbar";
 17 | 
 18 | export default function Home() {
 19 |   const { userId } = auth();
 20 | 
 21 |   return (
 22 |     <div className="min-h-screen bg-gradient-to-b from-black to-gray-900 text-gray-100 overflow-hidden pt-20">
 23 |       <Navbar />
 24 | 
 25 |       <main className="container mx-auto px-4 sm:px-6 lg:px-8 relative">
 26 |         {/* Decorative elements */}
 27 |         <div className="absolute top-20 left-10 animate-float">
 28 |           <SparklesIcon className="w-8 h-8 text-yellow-400 opacity-50" />
 29 |         </div>
 30 |         <div className="absolute top-40 right-20 animate-float animation-delay-2000">
 31 |           <ZapIcon className="w-10 h-10 text-blue-400 opacity-50" />
 32 |         </div>
 33 |         <div className="absolute bottom-20 left-1/4 animate-float animation-delay-4000">
 34 |           <TrendingUpIcon className="w-12 h-12 text-green-400 opacity-50" />
 35 |         </div>
 36 | 
 37 |         {/* Hero Section */}
 38 |         <div className="text-center py-20 lg:py-32 relative">
 39 |           <RocketIcon className="w-16 h-16 text-purple-500 mx-auto mb-6 animate-bounce" />
 40 |           <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">
 41 |             AI-Powered Social Media Content Generator
 42 |           </h1>
 43 |           <p className="text-xl mb-10 text-gray-300 max-w-2xl mx-auto">
 44 |             Create engaging content for Twitter, Instagram, and LinkedIn with
 45 |             cutting-edge AI technology.
 46 |           </p>
 47 |           <div className="flex justify-center space-x-4">
 48 |             <Button
 49 |               asChild
 50 |               className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full text-lg transition duration-300 ease-in-out transform hover:scale-105"
 51 |             >
 52 |               <Link href="/generate">Start Creating</Link>
 53 |             </Button>
 54 |             <Button
 55 |               asChild
 56 |               className="bg-transparent border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 rounded-full text-lg transition duration-300 ease-in-out"
 57 |             >
 58 |               <Link href="#features">Learn More</Link>
 59 |             </Button>
 60 |           </div>
 61 |         </div>
 62 | 
 63 |         {/* Features Section */}
 64 |         <div className="py-20" id="features">
 65 |           <h2 className="text-3xl font-bold mb-16 text-center text-white">
 66 |             Supercharge Your Social Media Presence
 67 |           </h2>
 68 |           <div className="grid grid-cols-1 md:grid-cols-3 gap-10 max-w-5xl mx-auto">
 69 |             {[
 70 |               {
 71 |                 title: "Twitter Threads",
 72 |                 icon: <TwitterIcon className="w-10 h-10 mb-4 text-blue-400" />,
 73 |                 description:
 74 |                   "Generate compelling Twitter threads that engage your audience and boost your reach.",
 75 |               },
 76 |               {
 77 |                 title: "Instagram Captions",
 78 |                 icon: (
 79 |                   <InstagramIcon className="w-10 h-10 mb-4 text-pink-400" />
 80 |                 ),
 81 |                 description:
 82 |                   "Create catchy captions for your Instagram posts that increase engagement and followers.",
 83 |               },
 84 |               {
 85 |                 title: "LinkedIn Posts",
 86 |                 icon: <LinkedinIcon className="w-10 h-10 mb-4 text-blue-600" />,
 87 |                 description:
 88 |                   "Craft professional content for your LinkedIn network to establish thought leadership.",
 89 |               },
 90 |             ].map((feature, index) => (
 91 |               <div
 92 |                 key={index}
 93 |                 className="p-8 rounded-2xl bg-gradient-to-br from-gray-800 to-gray-900 shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1"
 94 |               >
 95 |                 <div className="flex flex-col items-center text-center">
 96 |                   {feature.icon}
 97 |                   <h3 className="text-2xl font-semibold mb-3 text-white">
 98 |                     {feature.title}
 99 |                   </h3>
100 |                   <p className="text-gray-300">{feature.description}</p>
101 |                 </div>
102 |               </div>
103 |             ))}
104 |           </div>
105 |         </div>
106 | 
107 |         {/* Benefits Section */}
108 |         <div className="py-20 bg-gray-900 rounded-3xl my-20 relative">
109 |           <div className="absolute top-0 left-0 w-full h-full overflow-hidden rounded-3xl">
110 |             <svg
111 |               className="absolute w-full h-full"
112 |               viewBox="0 0 100 100"
113 |               preserveAspectRatio="none"
114 |             >
115 |               <path
116 |                 d="M0,0 L100,0 L100,100 L0,100 Z"
117 |                 fill="url(#grid-pattern)"
118 |               />
119 |             </svg>
120 |             <defs>
121 |               <pattern
122 |                 id="grid-pattern"
123 |                 width="10"
124 |                 height="10"
125 |                 patternUnits="userSpaceOnUse"
126 |               >
127 |                 <path
128 |                   d="M 10 0 L 0 0 0 10"
129 |                   fill="none"
130 |                   stroke="rgba(255,255,255,0.05)"
131 |                   strokeWidth="0.5"
132 |                 />
133 |               </pattern>
134 |             </defs>
135 |           </div>
136 |           <div className="relative z-10">
137 |             <h2 className="text-3xl font-bold mb-12 text-center text-white">
138 |               Why Choose Our AI Content Generator?
139 |             </h2>
140 |             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
141 |               {[
142 |                 "Save time and effort on content creation",
143 |                 "Consistently produce high-quality posts",
144 |                 "Increase engagement across all platforms",
145 |                 "Stay ahead of social media trends",
146 |                 "Customize content to match your brand voice",
147 |                 "Scale your social media presence effortlessly",
148 |               ].map((benefit, index) => (
149 |                 <div key={index} className="flex items-center space-x-3">
150 |                   <CheckCircleIcon className="w-6 h-6 text-green-500 flex-shrink-0" />
151 |                   <span className="text-gray-300">{benefit}</span>
152 |                 </div>
153 |               ))}
154 |             </div>
155 |           </div>
156 |         </div>
157 | 
158 |         {/* CTA Section */}
159 |         <div className="text-center py-20 relative">
160 |           <div className="absolute top-10 right-10 animate-spin-slow">
161 |             <svg
162 |               className="w-20 h-20 text-blue-500 opacity-20"
163 |               viewBox="0 0 24 24"
164 |               fill="none"
165 |               xmlns="http://www.w3.org/2000/svg"
166 |             >
167 |               <path
168 |                 d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
169 |                 stroke="currentColor"
170 |                 strokeWidth="2"
171 |                 strokeLinecap="round"
172 |                 strokeLinejoin="round"
173 |               />
174 |               <path
175 |                 d="M12 6V12L16 14"
176 |                 stroke="currentColor"
177 |                 strokeWidth="2"
178 |                 strokeLinecap="round"
179 |                 strokeLinejoin="round"
180 |               />
181 |             </svg>
182 |           </div>
183 |           <h2 className="text-4xl font-bold mb-8 text-white">
184 |             Ready to revolutionize your social media strategy?
185 |           </h2>
186 |           {userId ? (
187 |             <Button
188 |               asChild
189 |               className="bg-blue-600 hover:bg-blue-700 text-white px-10 py-4 rounded-full text-lg transition duration-300 ease-in-out transform hover:scale-105"
190 |             >
191 |               <Link href="/generate">
192 |                 Generate Content Now <ArrowRightIcon className="ml-2 h-5 w-5" />
193 |               </Link>
194 |             </Button>
195 |           ) : (
196 |             <SignUpButton mode="modal">
197 |               <Button className="bg-blue-600 hover:bg-blue-700 text-white px-10 py-4 rounded-full text-lg transition duration-300 ease-in-out transform hover:scale-105">
198 |                 Get Started Free <ArrowRightIcon className="ml-2 h-5 w-5" />
199 |               </Button>
200 |             </SignUpButton>
201 |           )}
202 |           <p className="mt-4 text-gray-400">No credit card required</p>
203 |         </div>
204 |       </main>
205 |     </div>
206 |   );
207 | }
208 | 


--------------------------------------------------------------------------------
/app/pricing/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { Button } from "@/components/ui/button";
  3 | import { CheckIcon } from "lucide-react";
  4 | import { Navbar } from "@/components/Navbar";
  5 | import { useUser } from "@clerk/nextjs";
  6 | import { useState } from "react";
  7 | import { loadStripe } from "@stripe/stripe-js";
  8 | 
  9 | const pricingPlans = [
 10 |   {
 11 |     name: "Basic",
 12 |     price: "9",
 13 |     priceId: "price_1PyFKGBibz3ZDixDAaJ3HO74",
 14 |     features: [
 15 |       "100 AI-generated posts per month",
 16 |       "Twitter thread generation",
 17 |       "Basic analytics",
 18 |     ],
 19 |   },
 20 |   {
 21 |     name: "Pro",
 22 |     price: "29",
 23 |     priceId: "price_1PyFN0Bibz3ZDixDqm9eYL8W",
 24 |     features: [
 25 |       "500 AI-generated posts per month",
 26 |       "Twitter, Instagram, and LinkedIn content",
 27 |       "Advanced analytics",
 28 |       "Priority support",
 29 |     ],
 30 |   },
 31 |   {
 32 |     name: "Enterprise",
 33 |     price: "Custom",
 34 |     priceId: null,
 35 |     features: [
 36 |       "Unlimited AI-generated posts",
 37 |       "All social media platforms",
 38 |       "Custom AI model training",
 39 |       "Dedicated account manager",
 40 |     ],
 41 |   },
 42 | ];
 43 | 
 44 | export default function PricingPage() {
 45 |   const { isSignedIn, user } = useUser();
 46 |   const [isLoading, setIsLoading] = useState(false);
 47 | 
 48 |   const handleSubscribe = async (priceId: string) => {
 49 |     if (!isSignedIn) {
 50 |       return;
 51 |     }
 52 | 
 53 |     setIsLoading(true);
 54 |     try {
 55 |       const response = await fetch("/api/create-checkout-session", {
 56 |         method: "POST",
 57 |         headers: {
 58 |           "Content-Type": "application/json",
 59 |         },
 60 |         body: JSON.stringify({
 61 |           priceId,
 62 |           userId: user?.id,
 63 |         }),
 64 |       });
 65 |       if (!response.ok) {
 66 |         const errorData = await response.json();
 67 |         throw new Error(errorData.error || "Failed to create checkout session");
 68 |       }
 69 | 
 70 |       const { sessionId } = await response.json();
 71 |       const stripe = await loadStripe(
 72 |         process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
 73 |       );
 74 |       if (!stripe) {
 75 |         throw new Error("Failed to load Stripe");
 76 |       }
 77 |       await stripe.redirectToCheckout({ sessionId });
 78 |     } catch (error) {
 79 |       console.error("Error creating checkout session:", error);
 80 |     } finally {
 81 |       setIsLoading(false);
 82 |     }
 83 |   };
 84 | 
 85 |   return (
 86 |     <div className="min-h-screen bg-black text-gray-100">
 87 |       <Navbar />
 88 |       <main className="container mx-auto px-8 py-20">
 89 |         <h1 className="text-5xl font-bold mb-12 text-center text-white">
 90 |           Pricing Plans
 91 |         </h1>
 92 |         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
 93 |           {pricingPlans.map((plan, index) => (
 94 |             <div
 95 |               key={index}
 96 |               className="p-8 rounded-lg border border-gray-800 flex flex-col"
 97 |             >
 98 |               <h2 className="text-2xl font-bold mb-4 text-white">
 99 |                 {plan.name}
100 |               </h2>
101 |               <p className="text-4xl font-bold mb-6 text-white">
102 |                 ${plan.price}
103 |                 <span className="text-lg font-normal text-gray-400">
104 |                   /month
105 |                 </span>
106 |               </p>
107 |               <ul className="mb-8 flex-grow">
108 |                 {plan.features.map((feature, featureIndex) => (
109 |                   <li
110 |                     key={featureIndex}
111 |                     className="flex items-center mb-3 text-gray-300"
112 |                   >
113 |                     <CheckIcon className="w-5 h-5 mr-2 text-green-500" />
114 |                     {feature}
115 |                   </li>
116 |                 ))}
117 |               </ul>
118 |               <Button
119 |                 onClick={() => plan.priceId && handleSubscribe(plan.priceId)}
120 |                 disabled={isLoading || !plan.priceId}
121 |                 className="w-full bg-white text-black hover:bg-gray-200"
122 |               >
123 |                 {isLoading ? "Processing..." : "Choose Plan"}
124 |               </Button>
125 |             </div>
126 |           ))}
127 |         </div>
128 |       </main>
129 |     </div>
130 |   );
131 | }
132 | 


--------------------------------------------------------------------------------
/app/sign-in/[[...sign-in]]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { SignIn } from "@clerk/nextjs";
 2 | 
 3 | export default function SignInPage() {
 4 |   return (
 5 |     <div className="flex justify-center items-center min-h-screen bg-black">
 6 |       <SignIn
 7 |         appearance={{
 8 |           elements: {
 9 |             formButtonPrimary:
10 |               "bg-blue-500 hover:bg-blue-600 text-sm normal-case",
11 |           },
12 |         }}
13 |       />
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/app/sign-up/[[...sign-up]]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { SignUp } from "@clerk/nextjs";
 2 | 
 3 | export default function SignUpPage() {
 4 |   return (
 5 |     <div className="flex justify-center items-center min-h-screen bg-black">
 6 |       <SignUp
 7 |         appearance={{
 8 |           elements: {
 9 |             formButtonPrimary:
10 |               "bg-blue-500 hover:bg-blue-600 text-sm normal-case",
11 |           },
12 |         }}
13 |       />
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   }
20 | }


--------------------------------------------------------------------------------
/components/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import Link from "next/link";
  3 | import {
  4 |   SignInButton,
  5 |   SignUpButton,
  6 |   UserButton,
  7 |   SignedOut,
  8 |   SignedIn,
  9 |   useAuth,
 10 | } from "@clerk/nextjs";
 11 | import { useState, useEffect } from "react";
 12 | import { Menu, X, Zap } from "lucide-react";
 13 | 
 14 | export function Navbar() {
 15 |   const { userId } = useAuth();
 16 |   const [isMenuOpen, setIsMenuOpen] = useState(false);
 17 |   const [isScrolled, setIsScrolled] = useState(false);
 18 | 
 19 |   useEffect(() => {
 20 |     const handleScroll = () => {
 21 |       setIsScrolled(window.scrollY > 10);
 22 |     };
 23 |     window.addEventListener("scroll", handleScroll);
 24 |     return () => window.removeEventListener("scroll", handleScroll);
 25 |   }, []);
 26 | 
 27 |   return (
 28 |     <header
 29 |       className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
 30 |         isScrolled ? "bg-gray-900/80 backdrop-blur-md" : "bg-transparent"
 31 |       }`}
 32 |     >
 33 |       <nav className="container mx-auto px-4 sm:px-8 py-4 sm:py-6">
 34 |         <div className="flex flex-wrap justify-between items-center max-w-6xl mx-auto">
 35 |           <div className="flex items-center">
 36 |             <Link href="/" className="flex items-center space-x-2">
 37 |               <Zap className="w-8 h-8 text-blue-500" />
 38 |               <span className="text-xl sm:text-2xl font-bold text-white">
 39 |                 ThreadCraft AI
 40 |               </span>
 41 |             </Link>
 42 |           </div>
 43 |           <button
 44 |             className="sm:hidden text-white focus:outline-none"
 45 |             onClick={() => setIsMenuOpen(!isMenuOpen)}
 46 |           >
 47 |             {isMenuOpen ? (
 48 |               <X className="w-6 h-6" />
 49 |             ) : (
 50 |               <Menu className="w-6 h-6" />
 51 |             )}
 52 |           </button>
 53 |           <div
 54 |             className={`w-full sm:w-auto ${
 55 |               isMenuOpen ? "block" : "hidden"
 56 |             } sm:block mt-4 sm:mt-0`}
 57 |           >
 58 |             <div className="flex flex-col sm:flex-row sm:items-center sm:space-x-8">
 59 |               {["Features", "Pricing", "Docs"].map((item) => (
 60 |                 <Link
 61 |                   key={item}
 62 |                   href={`/${item.toLowerCase()}`}
 63 |                   className="text-gray-300 hover:text-white transition-colors py-2 sm:py-0 relative group"
 64 |                 >
 65 |                   {item}
 66 |                   <span className="absolute left-0 right-0 bottom-0 h-0.5 bg-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
 67 |                 </Link>
 68 |               ))}
 69 |               {userId && (
 70 |                 <Link
 71 |                   href="/generate"
 72 |                   className="text-gray-300 hover:text-white transition-colors py-2 sm:py-0 relative group"
 73 |                 >
 74 |                   Dashboard
 75 |                   <span className="absolute left-0 right-0 bottom-0 h-0.5 bg-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
 76 |                 </Link>
 77 |               )}
 78 |               <SignedOut>
 79 |                 <SignInButton mode="modal">
 80 |                   <button className="text-gray-300 hover:text-white transition-colors mt-2 sm:mt-0">
 81 |                     Sign In
 82 |                   </button>
 83 |                 </SignInButton>
 84 |                 <SignUpButton mode="modal">
 85 |                   <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full transition-colors mt-2 sm:mt-0">
 86 |                     Sign Up
 87 |                   </button>
 88 |                 </SignUpButton>
 89 |               </SignedOut>
 90 |               <SignedIn>
 91 |                 <UserButton
 92 |                   appearance={{
 93 |                     elements: {
 94 |                       avatarBox: "w-10 h-10",
 95 |                     },
 96 |                   }}
 97 |                 />
 98 |               </SignedIn>
 99 |             </div>
100 |           </div>
101 |         </div>
102 |       </nav>
103 |     </header>
104 |   );
105 | }
106 | 


--------------------------------------------------------------------------------
/components/social-mocks/InstagramMock.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Heart, MessageCircle, Send, Bookmark } from "lucide-react";
 3 | 
 4 | interface InstagramMockProps {
 5 |   content: string;
 6 | }
 7 | 
 8 | export const InstagramMock: React.FC<InstagramMockProps> = ({ content }) => {
 9 |   return (
10 |     <div className="bg-white text-black rounded-lg p-4 max-w-md mx-auto">
11 |       <div className="flex items-center mb-3">
12 |         <div className="w-8 h-8 bg-gray-300 rounded-full mr-3"></div>
13 |         <p className="font-bold">Your Name</p>
14 |       </div>
15 |       <div className="bg-gray-200 h-64 mb-3 flex items-center justify-center">
16 |         <span className="text-gray-500">Image Placeholder</span>
17 |       </div>
18 |       <div className="flex justify-between mb-3">
19 |         <div className="flex space-x-4">
20 |           <Heart size={24} />
21 |           <MessageCircle size={24} />
22 |           <Send size={24} />
23 |         </div>
24 |         <Bookmark size={24} />
25 |       </div>
26 |       <p className="text-sm">{content}</p>
27 |     </div>
28 |   );
29 | };
30 | 


--------------------------------------------------------------------------------
/components/social-mocks/LinkedInMock.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { ThumbsUp, MessageSquare, Repeat, Send } from "lucide-react";
 3 | 
 4 | interface LinkedInMockProps {
 5 |   content: string;
 6 | }
 7 | 
 8 | export const LinkedInMock: React.FC<LinkedInMockProps> = ({ content }) => {
 9 |   return (
10 |     <div className="bg-white text-black rounded-lg p-4 max-w-md mx-auto">
11 |       <div className="flex items-center mb-3">
12 |         <div className="w-12 h-12 bg-gray-300 rounded-full mr-3"></div>
13 |         <div>
14 |           <p className="font-bold">Your Name</p>
15 |           <p className="text-gray-500 text-sm">Your Title • 1st</p>
16 |         </div>
17 |       </div>
18 |       <p className="mb-4">{content}</p>
19 |       <div className="flex justify-between text-gray-500">
20 |         <ThumbsUp size={18} />
21 |         <MessageSquare size={18} />
22 |         <Repeat size={18} />
23 |         <Send size={18} />
24 |       </div>
25 |     </div>
26 |   );
27 | };
28 | 


--------------------------------------------------------------------------------
/components/social-mocks/TwitterMock.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Twitter, Heart, MessageCircle, Repeat, Share } from "lucide-react";
 3 | 
 4 | interface TwitterMockProps {
 5 |   content: string[];
 6 | }
 7 | 
 8 | export const TwitterMock: React.FC<TwitterMockProps> = ({ content }) => {
 9 |   return (
10 |     <div className="bg-white text-black rounded-lg p-4 max-w-md mx-auto">
11 |       <div className="flex items-center mb-3">
12 |         <div className="w-12 h-12 bg-gray-300 rounded-full mr-3"></div>
13 |         <div>
14 |           <p className="font-bold">Your Name</p>
15 |           <p className="text-gray-500">@yourhandle</p>
16 |         </div>
17 |       </div>
18 |       {content.map((tweet, index) => (
19 |         <div key={index} className="mb-4 border-b border-gray-200 pb-4">
20 |           <p>{tweet}</p>
21 |           <div className="flex justify-between mt-3 text-gray-500">
22 |             <MessageCircle size={18} />
23 |             <Repeat size={18} />
24 |             <Heart size={18} />
25 |             <Share size={18} />
26 |           </div>
27 |         </div>
28 |       ))}
29 |     </div>
30 |   );
31 | };
32 | 


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | 
3 | import { ThemeProvider as NextThemesProvider } from "next-themes";
4 | import { type ThemeProviderProps } from "next-themes/dist/types";
5 | 
6 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
7 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
8 | }
9 | 


--------------------------------------------------------------------------------
/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as SelectPrimitive from "@radix-ui/react-select";
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | const Select = SelectPrimitive.Root;
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group;
 12 | 
 13 | const SelectValue = SelectPrimitive.Value;
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ));
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ));
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ));
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName;
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 79 |         position === "popper" &&
 80 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ));
100 | SelectContent.displayName = SelectPrimitive.Content.displayName;
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ));
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName;
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 | 
132 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
133 |   </SelectPrimitive.Item>
134 | ));
135 | SelectItem.displayName = SelectPrimitive.Item.displayName;
136 | 
137 | const SelectSeparator = React.forwardRef<
138 |   React.ElementRef<typeof SelectPrimitive.Separator>,
139 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
140 | >(({ className, ...props }, ref) => (
141 |   <SelectPrimitive.Separator
142 |     ref={ref}
143 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
144 |     {...props}
145 |   />
146 | ));
147 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
148 | 
149 | export {
150 |   Select,
151 |   SelectGroup,
152 |   SelectValue,
153 |   SelectTrigger,
154 |   SelectContent,
155 |   SelectLabel,
156 |   SelectItem,
157 |   SelectSeparator,
158 |   SelectScrollUpButton,
159 |   SelectScrollDownButton,
160 | };
161 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }
25 | 


--------------------------------------------------------------------------------
/drizzle.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   dialect: "postgresql",
 3 |   schema: "./utils/db/schema.ts",
 4 |   out: "./drizzle",
 5 | 
 6 |   dbCredentials: {
 7 |     url: "postgresql://zerotohero_owner:SPVe2rokvBf6@ep-bitter-shadow-a5lbwa60.us-east-2.aws.neon.tech/threadcraft?sslmode=require",
 8 |     connectionString:
 9 |       "postgresql://zerotohero_owner:SPVe2rokvBf6@ep-bitter-shadow-a5lbwa60.us-east-2.aws.neon.tech/threadcraft?sslmode=require",
10 |   },
11 | };
12 | 


--------------------------------------------------------------------------------
/index.mjs:
--------------------------------------------------------------------------------
 1 | import { MailtrapClient } from "mailtrap";
 2 | 
 3 | /**
 4 |  * For this example to work, you need to set up a sending domain,
 5 |  * and obtain a token that is authorized to send from the domain.
 6 |  */
 7 | 
 8 | const TOKEN = "05bf3445ae1a9814ecf445a6272a9db7";
 9 | const SENDER_EMAIL = "hello@demomailtrap.com";
10 | const RECIPIENT_EMAIL = "mendsalbert@gmail.com";
11 | 
12 | if (!TOKEN) {
13 |   throw new Error("MAILTRAP_TOKEN environment variable is not set");
14 | }
15 | 
16 | const client = new MailtrapClient({ token: TOKEN });
17 | 
18 | const sender = { name: "Mailtrap Test", email: SENDER_EMAIL };
19 | 
20 | client
21 |   .send({
22 |     from: sender,
23 |     to: [{ email: RECIPIENT_EMAIL }],
24 |     subject: "Hello from Mailtrap!",
25 |     text: "Welcome to Mailtrap Sending!",
26 |   })
27 |   .then(console.log)
28 |   .catch(console.error);
29 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { clsx, type ClassValue } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs));
 6 | }
 7 | 
 8 | export const isServer = typeof window === "undefined";
 9 | export const isClient = !isServer;
10 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { clerkMiddleware } from "@clerk/nextjs/server";
 2 | 
 3 | // Make sure that the `/api/webhooks/(.*)` route is not protected here
 4 | export default clerkMiddleware();
 5 | 
 6 | export const config = {
 7 |   matcher: [
 8 |     // Skip Next.js internals and all static files, unless found in search params
 9 |     "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
10 |     // Always run for API routes
11 |     "/(api|trpc)(.*)",
12 |   ],
13 | };
14 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   eslint: {
 4 |     ignoreDuringBuilds: true,
 5 |   },
 6 |   typescript: {
 7 |     ignoreBuildErrors: true,
 8 |   },
 9 |   env: {
10 |     DATABASE_URL: process.env.DATABASE_URL,
11 |     MAILTRAP_API_TOKEN: process.env.MAILTRAP_API_TOKEN,
12 |   },
13 | };
14 | 
15 | export default nextConfig;
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "db:push": "drizzle-kit push",
11 |     "db:studio": "npx drizzle-kit studio"
12 |   },
13 |   "dependencies": {
14 |     "@clerk/nextjs": "^5.5.2",
15 |     "@clerk/themes": "^2.1.35",
16 |     "@google/generative-ai": "^0.17.2",
17 |     "@neondatabase/serverless": "^0.9.5",
18 |     "@radix-ui/react-avatar": "^1.1.1",
19 |     "@radix-ui/react-icons": "^1.3.0",
20 |     "@radix-ui/react-select": "^2.1.1",
21 |     "@radix-ui/react-slot": "^1.1.0",
22 |     "@radix-ui/react-toast": "^1.2.1",
23 |     "@stripe/stripe-js": "^4.4.0",
24 |     "class-variance-authority": "^0.7.0",
25 |     "clsx": "^2.1.1",
26 |     "drizzle-orm": "^0.33.0",
27 |     "framer-motion": "^11.10.0",
28 |     "lucide-react": "^0.439.0",
29 |     "mailtrap": "^3.4.0",
30 |     "micro": "^10.0.1",
31 |     "next": "14.2.9",
32 |     "next-themes": "^0.3.0",
33 |     "react": "^18",
34 |     "react-dom": "^18",
35 |     "react-markdown": "^9.0.1",
36 |     "stripe": "^16.10.0",
37 |     "svix": "^1.33.0",
38 |     "tailwind-merge": "^2.5.2",
39 |     "tailwindcss-animate": "^1.0.7"
40 |   },
41 |   "devDependencies": {
42 |     "@types/node": "^20",
43 |     "@types/react": "^18",
44 |     "@types/react-dom": "^18",
45 |     "drizzle-kit": "^0.24.2",
46 |     "eslint": "^8",
47 |     "eslint-config-next": "14.2.9",
48 |     "postcss": "^8",
49 |     "tailwindcss": "^3.4.1",
50 |     "typescript": "^5"
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/public/thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mendsalbert/threadcraftai/0e14ff674d13330af1af87995190dcb03a6e71df/public/thumbnail.jpg


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |     darkMode: ["class"],
 5 |     content: [
 6 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   theme: {
11 |   	extend: {
12 |   		colors: {
13 |   			background: 'hsl(var(--background))',
14 |   			foreground: 'hsl(var(--foreground))',
15 |   			card: {
16 |   				DEFAULT: 'hsl(var(--card))',
17 |   				foreground: 'hsl(var(--card-foreground))'
18 |   			},
19 |   			popover: {
20 |   				DEFAULT: 'hsl(var(--popover))',
21 |   				foreground: 'hsl(var(--popover-foreground))'
22 |   			},
23 |   			primary: {
24 |   				DEFAULT: 'hsl(var(--primary))',
25 |   				foreground: 'hsl(var(--primary-foreground))'
26 |   			},
27 |   			secondary: {
28 |   				DEFAULT: 'hsl(var(--secondary))',
29 |   				foreground: 'hsl(var(--secondary-foreground))'
30 |   			},
31 |   			muted: {
32 |   				DEFAULT: 'hsl(var(--muted))',
33 |   				foreground: 'hsl(var(--muted-foreground))'
34 |   			},
35 |   			accent: {
36 |   				DEFAULT: 'hsl(var(--accent))',
37 |   				foreground: 'hsl(var(--accent-foreground))'
38 |   			},
39 |   			destructive: {
40 |   				DEFAULT: 'hsl(var(--destructive))',
41 |   				foreground: 'hsl(var(--destructive-foreground))'
42 |   			},
43 |   			border: 'hsl(var(--border))',
44 |   			input: 'hsl(var(--input))',
45 |   			ring: 'hsl(var(--ring))',
46 |   			chart: {
47 |   				'1': 'hsl(var(--chart-1))',
48 |   				'2': 'hsl(var(--chart-2))',
49 |   				'3': 'hsl(var(--chart-3))',
50 |   				'4': 'hsl(var(--chart-4))',
51 |   				'5': 'hsl(var(--chart-5))'
52 |   			}
53 |   		},
54 |   		borderRadius: {
55 |   			lg: 'var(--radius)',
56 |   			md: 'calc(var(--radius) - 2px)',
57 |   			sm: 'calc(var(--radius) - 4px)'
58 |   		}
59 |   	}
60 |   },
61 |   plugins: [require("tailwindcss-animate")],
62 | };
63 | export default config;
64 | 


--------------------------------------------------------------------------------
/threadcraft.drawio:
--------------------------------------------------------------------------------
  1 | <mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36" version="24.7.7">
  2 |   <diagram name="System architecture" id="bEm-xaoiTsK3u-W85eKF">
  3 |     <mxGraphModel dx="2023" dy="753" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
  4 |       <root>
  5 |         <mxCell id="0" />
  6 |         <mxCell id="1" parent="0" />
  7 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-1" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  8 |           <mxGeometry x="320" y="50" width="120" height="60" as="geometry" />
  9 |         </mxCell>
 10 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-2" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;ThreadCraft&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
 11 |           <mxGeometry x="340" y="65" width="80" height="30" as="geometry" />
 12 |         </mxCell>
 13 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-5" value="" style="endArrow=none;html=1;rounded=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" target="GZSkAN4DgeH0bBOix5HT-1">
 14 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
 15 |             <mxPoint x="380" y="180" as="sourcePoint" />
 16 |             <mxPoint x="440" y="140" as="targetPoint" />
 17 |           </mxGeometry>
 18 |         </mxCell>
 19 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-6" value="" style="endArrow=none;html=1;rounded=0;" edge="1" parent="1">
 20 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
 21 |             <mxPoint x="-2" y="180" as="sourcePoint" />
 22 |             <mxPoint x="758" y="180" as="targetPoint" />
 23 |           </mxGeometry>
 24 |         </mxCell>
 25 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-7" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
 26 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
 27 |             <mxPoint y="180" as="sourcePoint" />
 28 |             <mxPoint y="240" as="targetPoint" />
 29 |           </mxGeometry>
 30 |         </mxCell>
 31 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-8" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
 32 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
 33 |             <mxPoint x="757" y="179" as="sourcePoint" />
 34 |             <mxPoint x="757" y="239" as="targetPoint" />
 35 |           </mxGeometry>
 36 |         </mxCell>
 37 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-9" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
 38 |           <mxGeometry x="-60" y="240" width="120" height="60" as="geometry" />
 39 |         </mxCell>
 40 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-10" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Frontend&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
 41 |           <mxGeometry x="-40" y="255" width="80" height="30" as="geometry" />
 42 |         </mxCell>
 43 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-11" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="1">
 44 |           <mxGeometry x="700" y="240" width="120" height="60" as="geometry" />
 45 |         </mxCell>
 46 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-12" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Backend&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
 47 |           <mxGeometry x="720" y="255" width="80" height="30" as="geometry" />
 48 |         </mxCell>
 49 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-14" value="" style="endArrow=none;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="GZSkAN4DgeH0bBOix5HT-9">
 50 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
 51 |             <mxPoint x="270" y="350" as="sourcePoint" />
 52 |             <mxPoint y="380" as="targetPoint" />
 53 |           </mxGeometry>
 54 |         </mxCell>
 55 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-15" value="" style="endArrow=none;html=1;rounded=0;" edge="1" parent="1">
 56 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
 57 |             <mxPoint x="-120" y="380" as="sourcePoint" />
 58 |             <mxPoint x="120" y="380" as="targetPoint" />
 59 |           </mxGeometry>
 60 |         </mxCell>
 61 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-16" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
 62 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
 63 |             <mxPoint x="-119" y="379" as="sourcePoint" />
 64 |             <mxPoint x="-119" y="439" as="targetPoint" />
 65 |           </mxGeometry>
 66 |         </mxCell>
 67 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-17" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
 68 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
 69 |             <mxPoint y="380" as="sourcePoint" />
 70 |             <mxPoint y="440" as="targetPoint" />
 71 |           </mxGeometry>
 72 |         </mxCell>
 73 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-18" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
 74 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
 75 |             <mxPoint x="120" y="380" as="sourcePoint" />
 76 |             <mxPoint x="120" y="440" as="targetPoint" />
 77 |           </mxGeometry>
 78 |         </mxCell>
 79 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-19" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
 80 |           <mxGeometry x="-190" y="440" width="120" height="60" as="geometry" />
 81 |         </mxCell>
 82 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-20" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Pages&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
 83 |           <mxGeometry x="-170" y="455" width="80" height="30" as="geometry" />
 84 |         </mxCell>
 85 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-21" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
 86 |           <mxGeometry x="-60" y="440" width="120" height="60" as="geometry" />
 87 |         </mxCell>
 88 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-22" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Comp&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
 89 |           <mxGeometry x="-40" y="455" width="80" height="30" as="geometry" />
 90 |         </mxCell>
 91 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-23" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
 92 |           <mxGeometry x="70" y="440" width="120" height="60" as="geometry" />
 93 |         </mxCell>
 94 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-24" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Mocks&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
 95 |           <mxGeometry x="90" y="455" width="80" height="30" as="geometry" />
 96 |         </mxCell>
 97 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-26" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
 98 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
 99 |             <mxPoint x="-126" y="508" as="sourcePoint" />
100 |             <mxPoint x="-126" y="568" as="targetPoint" />
101 |           </mxGeometry>
102 |         </mxCell>
103 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-27" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
104 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
105 |             <mxPoint x="1" y="509" as="sourcePoint" />
106 |             <mxPoint x="1" y="569" as="targetPoint" />
107 |           </mxGeometry>
108 |         </mxCell>
109 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-28" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
110 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
111 |             <mxPoint x="131" y="508" as="sourcePoint" />
112 |             <mxPoint x="131" y="568" as="targetPoint" />
113 |           </mxGeometry>
114 |         </mxCell>
115 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-29" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
116 |           <mxGeometry x="-189" y="572" width="120" height="60" as="geometry" />
117 |         </mxCell>
118 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-30" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;layout.tsx&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
119 |           <mxGeometry x="-169" y="587" width="80" height="30" as="geometry" />
120 |         </mxCell>
121 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-31" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
122 |           <mxGeometry x="-59" y="572" width="120" height="60" as="geometry" />
123 |         </mxCell>
124 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-32" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Navbar.tsx&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
125 |           <mxGeometry x="-39" y="587" width="80" height="30" as="geometry" />
126 |         </mxCell>
127 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-33" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
128 |           <mxGeometry x="71" y="572" width="120" height="60" as="geometry" />
129 |         </mxCell>
130 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-34" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Twitter Mock&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
131 |           <mxGeometry x="80.5" y="585" width="99" height="30" as="geometry" />
132 |         </mxCell>
133 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-35" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
134 |           <mxGeometry x="71" y="674" width="119" height="60" as="geometry" />
135 |         </mxCell>
136 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-36" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Twitter Mock&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
137 |           <mxGeometry x="80.5" y="687" width="99" height="30" as="geometry" />
138 |         </mxCell>
139 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-37" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
140 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
141 |             <mxPoint x="131" y="636" as="sourcePoint" />
142 |             <mxPoint x="131.29" y="671" as="targetPoint" />
143 |           </mxGeometry>
144 |         </mxCell>
145 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-38" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
146 |           <mxGeometry x="75" y="778" width="119" height="60" as="geometry" />
147 |         </mxCell>
148 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-39" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;LinkedIn Mock&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
149 |           <mxGeometry x="84.5" y="791" width="99" height="30" as="geometry" />
150 |         </mxCell>
151 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-42" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
152 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
153 |             <mxPoint x="133" y="734" as="sourcePoint" />
154 |             <mxPoint x="133.29" y="769" as="targetPoint" />
155 |           </mxGeometry>
156 |         </mxCell>
157 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-64" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="GZSkAN4DgeH0bBOix5HT-49" target="GZSkAN4DgeH0bBOix5HT-52">
158 |           <mxGeometry relative="1" as="geometry" />
159 |         </mxCell>
160 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-49" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
161 |           <mxGeometry x="-187" y="671" width="120" height="60" as="geometry" />
162 |         </mxCell>
163 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-50" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;page.tsx&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
164 |           <mxGeometry x="-177.5" y="684" width="99" height="30" as="geometry" />
165 |         </mxCell>
166 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-51" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
167 |           <mxGeometry x="-187" y="779" width="119" height="60" as="geometry" />
168 |         </mxCell>
169 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-52" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;generate page&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
170 |           <mxGeometry x="-177.5" y="792" width="99" height="30" as="geometry" />
171 |         </mxCell>
172 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-53" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
173 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
174 |             <mxPoint x="-127" y="735" as="sourcePoint" />
175 |             <mxPoint x="-126.71000000000001" y="770" as="targetPoint" />
176 |           </mxGeometry>
177 |         </mxCell>
178 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-54" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
179 |           <mxGeometry x="-183" y="883" width="119" height="60" as="geometry" />
180 |         </mxCell>
181 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-55" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;sign in / sign out&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
182 |           <mxGeometry x="-173.5" y="896" width="99" height="30" as="geometry" />
183 |         </mxCell>
184 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-56" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
185 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
186 |             <mxPoint x="-125" y="839" as="sourcePoint" />
187 |             <mxPoint x="-124.71000000000001" y="874" as="targetPoint" />
188 |           </mxGeometry>
189 |         </mxCell>
190 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-57" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
191 |           <mxGeometry x="-184" y="984" width="119" height="60" as="geometry" />
192 |         </mxCell>
193 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-58" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Pricing page&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
194 |           <mxGeometry x="-174.5" y="997" width="99" height="30" as="geometry" />
195 |         </mxCell>
196 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-59" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
197 |           <mxGeometry x="-180" y="1088" width="119" height="60" as="geometry" />
198 |         </mxCell>
199 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-60" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;docs page&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
200 |           <mxGeometry x="-170.5" y="1101" width="99" height="30" as="geometry" />
201 |         </mxCell>
202 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-61" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
203 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
204 |             <mxPoint x="-122" y="1044" as="sourcePoint" />
205 |             <mxPoint x="-121.71000000000001" y="1079" as="targetPoint" />
206 |           </mxGeometry>
207 |         </mxCell>
208 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-62" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
209 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
210 |             <mxPoint x="-124.92" y="943" as="sourcePoint" />
211 |             <mxPoint x="-124.63000000000001" y="978" as="targetPoint" />
212 |           </mxGeometry>
213 |         </mxCell>
214 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-65" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
215 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
216 |             <mxPoint x="-127.92" y="635" as="sourcePoint" />
217 |             <mxPoint x="-127.63000000000001" y="670" as="targetPoint" />
218 |           </mxGeometry>
219 |         </mxCell>
220 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-66" value="" style="endArrow=none;html=1;rounded=0;" edge="1" parent="1">
221 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
222 |             <mxPoint x="639.5" y="377" as="sourcePoint" />
223 |             <mxPoint x="879.5" y="377" as="targetPoint" />
224 |           </mxGeometry>
225 |         </mxCell>
226 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-67" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
227 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
228 |             <mxPoint x="640.5" y="376" as="sourcePoint" />
229 |             <mxPoint x="640.5" y="436" as="targetPoint" />
230 |           </mxGeometry>
231 |         </mxCell>
232 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-68" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
233 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
234 |             <mxPoint x="759.5" y="377" as="sourcePoint" />
235 |             <mxPoint x="759.5" y="437" as="targetPoint" />
236 |           </mxGeometry>
237 |         </mxCell>
238 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-69" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
239 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
240 |             <mxPoint x="879.5" y="377" as="sourcePoint" />
241 |             <mxPoint x="879.5" y="437" as="targetPoint" />
242 |           </mxGeometry>
243 |         </mxCell>
244 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-70" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
245 |           <mxGeometry x="569.5" y="437" width="120" height="60" as="geometry" />
246 |         </mxCell>
247 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-71" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;API&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
248 |           <mxGeometry x="589.5" y="452" width="80" height="30" as="geometry" />
249 |         </mxCell>
250 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-72" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
251 |           <mxGeometry x="699.5" y="437" width="120" height="60" as="geometry" />
252 |         </mxCell>
253 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-73" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;AI&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
254 |           <mxGeometry x="719.5" y="452" width="80" height="30" as="geometry" />
255 |         </mxCell>
256 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-74" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
257 |           <mxGeometry x="829.5" y="437" width="120" height="60" as="geometry" />
258 |         </mxCell>
259 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-75" value="&lt;span style=&quot;font-size: 14px;&quot;&gt;Auth&lt;/span&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
260 |           <mxGeometry x="849.5" y="452" width="80" height="30" as="geometry" />
261 |         </mxCell>
262 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-76" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
263 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
264 |             <mxPoint x="633.5" y="505" as="sourcePoint" />
265 |             <mxPoint x="633.5" y="565" as="targetPoint" />
266 |           </mxGeometry>
267 |         </mxCell>
268 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-77" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
269 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
270 |             <mxPoint x="760.5" y="506" as="sourcePoint" />
271 |             <mxPoint x="760.5" y="566" as="targetPoint" />
272 |           </mxGeometry>
273 |         </mxCell>
274 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-78" value="" style="endArrow=classic;html=1;rounded=0;" edge="1" parent="1">
275 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
276 |             <mxPoint x="890.5" y="505" as="sourcePoint" />
277 |             <mxPoint x="890.5" y="565" as="targetPoint" />
278 |           </mxGeometry>
279 |         </mxCell>
280 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-79" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
281 |           <mxGeometry x="570.5" y="569" width="120" height="60" as="geometry" />
282 |         </mxCell>
283 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-80" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Mailtrap&amp;nbsp;&lt;br&gt;Welcome eamil&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
284 |           <mxGeometry x="572.5" y="582" width="120.5" height="30" as="geometry" />
285 |         </mxCell>
286 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-81" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
287 |           <mxGeometry x="700.5" y="569" width="120" height="60" as="geometry" />
288 |         </mxCell>
289 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-82" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Gemini AI&lt;br&gt;Content Gen&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
290 |           <mxGeometry x="715.75" y="582" width="89.5" height="30" as="geometry" />
291 |         </mxCell>
292 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-83" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
293 |           <mxGeometry x="830.5" y="569" width="120" height="60" as="geometry" />
294 |         </mxCell>
295 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-84" value="&lt;font style=&quot;font-size: 14px;&quot;&gt;Clerk&amp;nbsp;&lt;br&gt;User Auth&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
296 |           <mxGeometry x="840" y="582" width="99" height="30" as="geometry" />
297 |         </mxCell>
298 |         <mxCell id="GZSkAN4DgeH0bBOix5HT-94" value="" style="endArrow=none;html=1;rounded=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1">
299 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
300 |             <mxPoint x="759.4100000000001" y="308" as="sourcePoint" />
301 |             <mxPoint x="759" y="380" as="targetPoint" />
302 |           </mxGeometry>
303 |         </mxCell>
304 |       </root>
305 |     </mxGraphModel>
306 |   </diagram>
307 | </mxfile>
308 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/utils/db/actions.ts:
--------------------------------------------------------------------------------
  1 | import { db } from "./dbConfig";
  2 | import { Users, Subscriptions, GeneratedContent } from "./schema";
  3 | import { eq, sql, and, desc } from "drizzle-orm";
  4 | import { sendWelcomeEmail, initMailtrap } from "../mailtrap";
  5 | 
  6 | export async function updateUserPoints(userId: string, points: number) {
  7 |   try {
  8 |     const [updatedUser] = await db
  9 |       .update(Users)
 10 |       .set({ points: sql`${Users.points} + ${points}` })
 11 |       .where(eq(Users.stripeCustomerId, userId))
 12 |       .returning()
 13 |       .execute();
 14 |     return updatedUser;
 15 |   } catch (error) {
 16 |     console.error("Error updating user points:", error);
 17 |     return null;
 18 |   }
 19 | }
 20 | 
 21 | export async function getUserPoints(userId: string) {
 22 |   try {
 23 |     console.log("Fetching points for user:", userId);
 24 |     const users = await db
 25 |       .select({ points: Users.points, id: Users.id, email: Users.email })
 26 |       .from(Users)
 27 |       .where(eq(Users.stripeCustomerId, userId))
 28 |       .execute();
 29 |     console.log("Fetched users:", users);
 30 |     if (users.length === 0) {
 31 |       console.log("No user found with stripeCustomerId:", userId);
 32 |       return 0;
 33 |     }
 34 |     return users[0].points || 0;
 35 |   } catch (error) {
 36 |     console.error("Error fetching user points:", error);
 37 |     return 0;
 38 |   }
 39 | }
 40 | 
 41 | export async function createOrUpdateSubscription(
 42 |   userId: string,
 43 |   stripeSubscriptionId: string,
 44 |   plan: string,
 45 |   status: string,
 46 |   currentPeriodStart: Date,
 47 |   currentPeriodEnd: Date
 48 | ) {
 49 |   try {
 50 |     const [user] = await db
 51 |       .select({ id: Users.id })
 52 |       .from(Users)
 53 |       .where(eq(Users.stripeCustomerId, userId))
 54 |       .limit(1);
 55 | 
 56 |     if (!user) {
 57 |       console.error(`No user found with stripeCustomerId: ${userId}`);
 58 |       return null;
 59 |     }
 60 | 
 61 |     const existingSubscription = await db
 62 |       .select()
 63 |       .from(Subscriptions)
 64 |       .where(eq(Subscriptions.stripeSubscriptionId, stripeSubscriptionId))
 65 |       .limit(1);
 66 | 
 67 |     let subscription;
 68 |     if (existingSubscription.length > 0) {
 69 |       // Update existing subscription
 70 |       [subscription] = await db
 71 |         .update(Subscriptions)
 72 |         .set({
 73 |           plan,
 74 |           status,
 75 |           currentPeriodStart,
 76 |           currentPeriodEnd,
 77 |         })
 78 |         .where(eq(Subscriptions.stripeSubscriptionId, stripeSubscriptionId))
 79 |         .returning()
 80 |         .execute();
 81 |     } else {
 82 |       [subscription] = await db
 83 |         .insert(Subscriptions)
 84 |         .values({
 85 |           userId: user.id,
 86 |           stripeSubscriptionId,
 87 |           plan,
 88 |           status,
 89 |           currentPeriodStart,
 90 |           currentPeriodEnd,
 91 |         })
 92 |         .returning()
 93 |         .execute();
 94 |     }
 95 | 
 96 |     console.log("Subscription created or updated:", subscription);
 97 |     return subscription;
 98 |   } catch (error) {
 99 |     console.error("Error creating or updating subscription:", error);
100 |     return null;
101 |   }
102 | }
103 | 
104 | export async function saveGeneratedContent(
105 |   userId: string,
106 |   content: string,
107 |   prompt: string,
108 |   contentType: string
109 | ) {
110 |   try {
111 |     const [savedContent] = await db
112 |       .insert(GeneratedContent)
113 |       .values({
114 |         userId: sql`(SELECT id FROM ${Users} WHERE stripe_customer_id = ${userId})`,
115 |         content,
116 |         prompt,
117 |         contentType,
118 |       })
119 |       .returning()
120 |       .execute();
121 |     return savedContent;
122 |   } catch (error) {
123 |     console.error("Error saving generated content:", error);
124 |     return null;
125 |   }
126 | }
127 | 
128 | export async function getGeneratedContentHistory(
129 |   userId: string,
130 |   limit: number = 10
131 | ) {
132 |   try {
133 |     const history = await db
134 |       .select({
135 |         id: GeneratedContent.id,
136 |         content: GeneratedContent.content,
137 |         prompt: GeneratedContent.prompt,
138 |         contentType: GeneratedContent.contentType,
139 |         createdAt: GeneratedContent.createdAt,
140 |       })
141 |       .from(GeneratedContent)
142 |       .where(
143 |         eq(
144 |           GeneratedContent.userId,
145 |           sql`(SELECT id FROM ${Users} WHERE stripe_customer_id = ${userId})`
146 |         )
147 |       )
148 |       .orderBy(desc(GeneratedContent.createdAt))
149 |       .limit(limit)
150 |       .execute();
151 |     return history;
152 |   } catch (error) {
153 |     console.error("Error fetching generated content history:", error);
154 |     return [];
155 |   }
156 | }
157 | 
158 | export async function createOrUpdateUser(
159 |   clerkUserId: string,
160 |   email: string,
161 |   name: string
162 | ) {
163 |   try {
164 |     console.log("Creating or updating user:", clerkUserId, email, name);
165 | 
166 |     const [existingUser] = await db
167 |       .select()
168 |       .from(Users)
169 |       .where(eq(Users.stripeCustomerId, clerkUserId))
170 |       .limit(1)
171 |       .execute();
172 | 
173 |     if (existingUser) {
174 |       const [updatedUser] = await db
175 |         .update(Users)
176 |         .set({ name, email })
177 |         .where(eq(Users.stripeCustomerId, clerkUserId))
178 |         .returning()
179 |         .execute();
180 |       console.log("Updated user:", updatedUser);
181 |       return updatedUser;
182 |     }
183 | 
184 |     const [userWithEmail] = await db
185 |       .select()
186 |       .from(Users)
187 |       .where(eq(Users.email, email))
188 |       .limit(1)
189 |       .execute();
190 | 
191 |     if (userWithEmail) {
192 |       const [updatedUser] = await db
193 |         .update(Users)
194 |         .set({ name, stripeCustomerId: clerkUserId })
195 |         .where(eq(Users.email, email))
196 |         .returning()
197 |         .execute();
198 |       console.log("Updated user:", updatedUser);
199 |       sendWelcomeEmail(email, name);
200 |       return updatedUser;
201 |     }
202 | 
203 |     const [newUser] = await db
204 |       .insert(Users)
205 |       .values({ email, name, stripeCustomerId: clerkUserId, points: 50 })
206 |       .returning()
207 |       .execute();
208 |     console.log("New user created:", newUser);
209 |     sendWelcomeEmail(email, name);
210 |     return newUser;
211 |   } catch (error) {
212 |     console.error("Error creating or updating user:", error);
213 |     return null;
214 |   }
215 | }
216 | 


--------------------------------------------------------------------------------
/utils/db/dbConfig.jsx:
--------------------------------------------------------------------------------
 1 | import { neon } from "@neondatabase/serverless";
 2 | 
 3 | import { drizzle } from "drizzle-orm/neon-http";
 4 | 
 5 | import * as schema from "./schema";
 6 | 
 7 | const sql = neon(process.env.DATABASE_URL);
 8 | 
 9 | export const db = drizzle(sql, { schema });
10 | 


--------------------------------------------------------------------------------
/utils/db/schema.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   integer,
 3 |   varchar,
 4 |   pgTable,
 5 |   serial,
 6 |   text,
 7 |   timestamp,
 8 |   boolean,
 9 | } from "drizzle-orm/pg-core";
10 | 
11 | export const Users = pgTable("users", {
12 |   id: serial("id").primaryKey(),
13 |   stripeCustomerId: text("stripe_customer_id").unique(),
14 |   email: text("email").notNull().unique(),
15 |   name: text("name"),
16 |   points: integer("points").default(50),
17 |   createdAt: timestamp("created_at").defaultNow(),
18 | });
19 | 
20 | export const Subscriptions = pgTable("subscriptions", {
21 |   id: serial("id").primaryKey(),
22 |   userId: integer("user_id")
23 |     .references(() => Users.id)
24 |     .notNull(),
25 |   stripeSubscriptionId: varchar("stripe_subscription_id", {
26 |     length: 255,
27 |   }).notNull(),
28 |   plan: varchar("plan", { length: 50 }).notNull(),
29 |   status: varchar("status", { length: 50 }).notNull(),
30 |   currentPeriodStart: timestamp("current_period_start").notNull(),
31 |   currentPeriodEnd: timestamp("current_period_end").notNull(),
32 |   cancelAtPeriodEnd: boolean("cancel_at_period_end").notNull().default(false),
33 | });
34 | 
35 | export const GeneratedContent = pgTable("generated_content", {
36 |   id: serial("id").primaryKey(),
37 |   userId: integer("user_id")
38 |     .references(() => Users.id)
39 |     .notNull(),
40 |   content: text("content").notNull(),
41 |   prompt: text("prompt").notNull(),
42 |   contentType: varchar("content_type", { length: 50 }).notNull(),
43 |   createdAt: timestamp("created_at").defaultNow().notNull(),
44 | });
45 | 


--------------------------------------------------------------------------------
/utils/mailtrap.ts:
--------------------------------------------------------------------------------
 1 | let client: any;
 2 | 
 3 | export const initMailtrap = async () => {
 4 |   if (typeof window === "undefined") {
 5 |     const { MailtrapClient } = await import("mailtrap");
 6 |     client = new MailtrapClient({
 7 |       token: process.env.MAILTRAP_API_TOKEN!,
 8 |     });
 9 |   }
10 | };
11 | 
12 | export const sendWelcomeEmail = async (toEmail: string, name: string) => {
13 |   if (typeof window !== "undefined") {
14 |     console.error("sendWelcomeEmail should only be called on the server side");
15 |     return;
16 |   }
17 | 
18 |   if (!client) {
19 |     await initMailtrap();
20 |   }
21 | 
22 |   const sender = { name: "ThreadCraft AI", email: "hello@demomailtrap.com" };
23 | 
24 |   await client.send({
25 |     from: sender,
26 |     to: [{ email: toEmail }],
27 |     subject: "Welcome to ThreadCraft AI!",
28 |     html: `
29 |       <h1>Welcome to ThreadCraft AI, ${name}!</h1>
30 |       <p>We're excited to have you on board. Get started by...</p>
31 |     `,
32 |   });
33 | };
34 | 


--------------------------------------------------------------------------------