mini

Author: pranjalpruthi

.gitignore

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

README.md

@@ -0,0 +1,87 @@
+# Getting Started
+
+## Prerequisites
+- Node.js and yarn/bun installed
+- Accounts and API keys for:
+  - Supabase
+  - Stripe (if using payments)
+  - Clerk (if using authentication)
+
+## Setup
+
+1. Clone the repository:
+   ```
+   git clone <repository-url>
+   cd <project-directory>
+   ```
+
+2. Install dependencies:
+   ```
+   yarn
+   ```
+
+3. Set up environment variables:
+   Create a `.env` file in the root directory with the following variables:
+   ```
+   SUPABASE_URL=<your-supabase-project-url>
+   SUPABASE_SERVICE_KEY=<your-supabase-service-key>
+
+   # If using Stripe
+   STRIPE_SECRET_KEY=<your-stripe-secret-key>
+   NEXT_PUBLIC_STRIPE_PRICE_ID=<your-stripe-price-id>
+
+   # If using Clerk
+   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-clerk-publishable-key>
+   CLERK_SECRET_KEY=<your-clerk-secret-key>
+   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
+   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
+   ```
+
+4. Configure features:
+   In `config.ts`, set the desired features:
+   ```typescript
+   const config = {
+     auth: {
+       enabled: true, // Set to false if not using Clerk
+     },
+     payments: {
+       enabled: true, // Set to false if not using Stripe
+     }
+   };
+   ```
+
+5. Set up the database:
+   Run Prisma migrations:
+   ```
+   npx prisma migrate dev
+   ```
+
+6. Start the development server:
+   ```
+   yarn dev
+   ```
+
+7. Open your browser and navigate to `http://localhost:3000` to see your application running.
+
+## Additional Configuration
+
+- Webhooks: Set up webhooks for Clerk (if using auth) at `/api/auth/webhook` and for Stripe (if using payments) at `/api/payments/webhook`.
+- Customize the landing page, dashboard, and other components as needed.
+- Modify the Prisma schema in `prisma/schema.prisma` if you need to change the database structure.
+
+## Important Security Notes
+
+- Enable Row Level Security (RLS) in your Supabase project to ensure data protection at the database level.
+- Always make Supabase calls on the server-side (in API routes or server components) to keep your service key secure.
+
+## Learn More
+
+Refer to the documentation of the individual technologies used in this project for more detailed information:
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [Supabase Documentation](https://supabase.io/docs)
+- [Prisma Documentation](https://www.prisma.io/docs)
+- [Clerk Documentation](https://clerk.dev/docs) (if using auth)
+- [Stripe Documentation](https://stripe.com/docs) (if using payments)

app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,21 @@
+"use client"
+import PageWrapper from "@/components/wrapper/page-wrapper";
+import config from "@/config";
+import { SignIn } from "@clerk/nextjs";
+import { useRouter } from "next/navigation";
+
+export default function SignInPage() {
+    const router = useRouter()
+
+    if (!config?.auth?.enabled) {
+        router.back()
+    }
+
+    return (
+        <PageWrapper >
+            <div className="flex min-w-screen justify-center my-[5rem]">
+                <SignIn />
+            </div>
+        </PageWrapper>
+    );
+}

app/(auth)/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,21 @@
+"use client"
+import PageWrapper from "@/components/wrapper/page-wrapper";
+import config from "@/config";
+import { SignUp } from "@clerk/nextjs";
+import { useRouter } from "next/navigation";
+
+export default function SignUpPage() {
+    const router = useRouter()
+
+    if (!config?.auth?.enabled) {
+        router.back()
+    }
+
+    return (
+        <PageWrapper >
+            <div className="flex min-w-screen justify-center my-[5rem]">
+                <SignUp />
+            </div>
+        </PageWrapper>
+    );
+}

app/(auth)/user-profile/[[...user-profile]]/page.tsx

@@ -0,0 +1,23 @@
+"use client"
+import PageWrapper from "@/components/wrapper/page-wrapper";
+import config from "@/config";
+import { UserProfile } from "@clerk/nextjs";
+import { useRouter } from "next/navigation";
+
+const UserProfilePage = () => {
+    const router = useRouter()
+
+    if (!config?.auth?.enabled) {
+        router.back()
+    }
+    return (
+        <PageWrapper >
+            <div className="h-full flex items-center justify-center p-9">
+                {config?.auth?.enabled && <UserProfile path="/user-profile" routing="path" />}
+            </div>
+        </PageWrapper>
+    )
+}
+
+
+export default UserProfilePage;

app/api/auth/webhook/route.ts

@@ -0,0 +1,111 @@
+import { userCreate } from "@/utils/data/user/userCreate";
+import { userUpdate } from "@/utils/data/user/userUpdate";
+import { WebhookEvent } from "@clerk/nextjs/server";
+import { headers } from "next/headers";
+import { NextResponse } from "next/server";
+import { Webhook } from "svix";
+
+export async function POST(req: Request) {
+  // You can find this in the Clerk Dashboard -> Webhooks -> choose the webhook
+  const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET;
+
+  if (!WEBHOOK_SECRET) {
+    throw new Error(
+      "Please add WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local"
+    );
+  }
+
+  // Get the headers - await the headers() call
+  const headerPayload = await headers();
+  const svix_id = headerPayload.get("svix-id");
+  const svix_timestamp = headerPayload.get("svix-timestamp");
+  const svix_signature = headerPayload.get("svix-signature");
+
+  // If there are no headers, error out
+  if (!svix_id || !svix_timestamp || !svix_signature) {
+    return new Response("Error occured -- no svix headers", {
+      status: 400,
+    });
+  }
+
+  // Get the body
+  const payload = await req.json();
+  const body = JSON.stringify(payload);
+
+  // Create a new SVIX instance with your secret.
+  const wh = new Webhook(WEBHOOK_SECRET);
+
+  let evt: WebhookEvent;
+
+  // Verify the payload with the headers
+  try {
+    evt = wh.verify(body, {
+      "svix-id": svix_id,
+      "svix-timestamp": svix_timestamp,
+      "svix-signature": svix_signature,
+    }) as WebhookEvent;
+  } catch (err) {
+    console.error("Error verifying webhook:", err);
+    return new Response("Error occured", {
+      status: 400,
+    });
+  }
+
+  // Get the ID and type
+  const { id } = evt.data;
+  const eventType = evt.type;
+
+
+  switch (eventType) {
+    case "user.created":
+      try {
+        await userCreate({
+          email: payload?.data?.email_addresses?.[0]?.email_address,
+          first_name: payload?.data?.first_name,
+          last_name: payload?.data?.last_name,
+          profile_image_url: payload?.data?.profile_image_url,
+          user_id: payload?.data?.id,
+        });
+
+        return NextResponse.json({
+          status: 200,
+          message: "User info inserted",
+        });
+      } catch (error: any) {
+        return NextResponse.json({
+          status: 400,
+          message: error.message,
+        });
+      }
+      break;
+
+    case "user.updated":
+      try {
+        await userUpdate({
+          email: payload?.data?.email_addresses?.[0]?.email_address,
+          first_name: payload?.data?.first_name,
+          last_name: payload?.data?.last_name,
+          profile_image_url: payload?.data?.profile_image_url,
+          user_id: payload?.data?.id,
+        });
+
+        return NextResponse.json({
+          status: 200,
+          message: "User info updated",
+        });
+      } catch (error: any) {
+        return NextResponse.json({
+          status: 400,
+          message: error.message,
+        });
+      }
+      break;
+
+    default:
+      return new Response("Error occured -- unhandeled event type", {
+        status: 400,
+      });
+  }
+
+  return new Response("", { status: 201 });
+}

app/api/payments/create-checkout-session/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from "next/server";
+import Stripe from "stripe";
+
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
+
+export async function POST(req: NextRequest) {
+  const { userId, email, priceId, subscription } = await req.json();
+
+  if (subscription) {
+    try {
+      const session = await stripe.checkout.sessions.create({
+        payment_method_types: ["card"],
+        line_items: [{ price: priceId, quantity: 1 }],
+        metadata: { userId, email, subscription },
+        mode: "subscription",
+        success_url: `${process.env.FRONTEND_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
+        cancel_url: `${process.env.FRONTEND_URL}/cancel`,
+        allow_promotion_codes: true,
+      });
+
+
+      return NextResponse.json({ sessionId: session.id });
+    } catch (error) {
+      console.error("Error creating checkout session:", error);
+      return NextResponse.json({ error: "Failed to create checkout session" });
+    }
+  } else {
+    try {
+      const session = await stripe.checkout.sessions.create({
+        payment_method_types: ["card"],
+        line_items: [{ price: priceId, quantity: 1 }],
+        metadata: { userId, email, subscription },
+        mode: "payment",
+        success_url: `${process.env.FRONTEND_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
+        cancel_url: `${process.env.FRONTEND_URL}/cancel`,
+      });
+
+      return NextResponse.json({ sessionId: session.id });
+    } catch (error) {
+      console.error("Error creating checkout session:", error);
+      return NextResponse.json({ error: "Failed to create checkout session" });
+    }
+  }
+}