├── .eslintrc.json ├── app ├── icon.ico ├── (auth) │ ├── (routes) │ │ ├── sign-in │ │ │ └── [[...sign-in]] │ │ │ │ └── page.tsx │ │ └── sign-up │ │ │ └── [[...sign-up]] │ │ │ └── page.tsx │ └── layout.tsx ├── (dashboard) │ ├── (routes) │ │ ├── code │ │ │ ├── constants.ts │ │ │ └── page.tsx │ │ ├── video │ │ │ ├── constants.ts │ │ │ └── page.tsx │ │ ├── conversation │ │ │ ├── constants.ts │ │ │ └── page.tsx │ │ ├── music │ │ │ ├── constants.ts │ │ │ └── page.tsx │ │ ├── image │ │ │ ├── constants.ts │ │ │ └── page.tsx │ │ └── dashboard │ │ │ └── page.tsx │ └── layout.tsx ├── (landing) │ ├── error.tsx │ ├── layout.tsx │ └── page.tsx ├── layout.tsx ├── api │ ├── music │ │ └── route.ts │ ├── video │ │ └── route.ts │ ├── conversation │ │ └── route.ts │ ├── code │ │ └── route.ts │ ├── image │ │ └── route.ts │ ├── stripe │ │ └── route.ts │ └── webhook │ │ └── route.ts └── globals.css ├── public ├── pro.png ├── chat.png ├── empty.png ├── home.png ├── logo.png ├── mail.png ├── photo.png └── favicon.ico ├── postcss.config.js ├── lib ├── stripe.ts ├── utils.ts ├── prismadb.ts ├── subscription.ts └── api-limit.ts ├── components ├── toaster-provider.tsx ├── crisp-provider.tsx ├── bot-avatar.tsx ├── crisp-chat.tsx ├── theme-provider.tsx ├── modal-provider.tsx ├── loader.tsx ├── user-avatar.tsx ├── ui │ ├── empty.tsx │ ├── label.tsx │ ├── progress.tsx │ ├── input.tsx │ ├── badge.tsx │ ├── avatar.tsx │ ├── button.tsx │ ├── card.tsx │ ├── dialog.tsx │ ├── select.tsx │ ├── form.tsx │ └── sheet.tsx ├── navbar.tsx ├── heading.tsx ├── subscription-button.tsx ├── mobile-sidebar.tsx ├── landing-navbar.tsx ├── tool-card.tsx ├── free-counter.tsx ├── landing-hero.tsx ├── landing-content.tsx ├── pro-modal.tsx └── sidebar.tsx ├── next.config.js ├── hooks └── use-pro-modal.ts ├── components.json ├── middleware.ts ├── .gitignore ├── tailwind.config.ts ├── tsconfig.json ├── prisma └── schema.prisma ├── .env ├── constants.ts ├── package.json ├── tailwind.config.js └── README.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /app/icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabhjotschugh/Genius-AI-SaaS/HEAD/app/icon.ico -------------------------------------------------------------------------------- /public/pro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabhjotschugh/Genius-AI-SaaS/HEAD/public/pro.png -------------------------------------------------------------------------------- /public/chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabhjotschugh/Genius-AI-SaaS/HEAD/public/chat.png -------------------------------------------------------------------------------- /public/empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabhjotschugh/Genius-AI-SaaS/HEAD/public/empty.png -------------------------------------------------------------------------------- /public/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabhjotschugh/Genius-AI-SaaS/HEAD/public/home.png -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabhjotschugh/Genius-AI-SaaS/HEAD/public/logo.png -------------------------------------------------------------------------------- /public/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabhjotschugh/Genius-AI-SaaS/HEAD/public/mail.png -------------------------------------------------------------------------------- /public/photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabhjotschugh/Genius-AI-SaaS/HEAD/public/photo.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabhjotschugh/Genius-AI-SaaS/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx: -------------------------------------------------------------------------------- 1 | import { SignIn } from "@clerk/nextjs"; 2 | 3 | export default function Page() { 4 | return ; 5 | } -------------------------------------------------------------------------------- /app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx: -------------------------------------------------------------------------------- 1 | import { SignUp } from "@clerk/nextjs"; 2 | 3 | export default function Page() { 4 | return ; 5 | }; -------------------------------------------------------------------------------- /lib/stripe.ts: -------------------------------------------------------------------------------- 1 | import Stripe from "stripe" 2 | 3 | export const stripe = new Stripe(process.env.STRIPE_API_KEY!, { 4 | apiVersion: "2023-08-16", 5 | typescript: true, 6 | }); -------------------------------------------------------------------------------- /components/toaster-provider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Toaster } from "react-hot-toast" 4 | 5 | export const ToasterProvider = () => { 6 | return 7 | }; 8 | -------------------------------------------------------------------------------- /components/crisp-provider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { CrispChat } from "@/components/crisp-chat"; 4 | 5 | export const CrispProvider = () => { 6 | return 7 | }; 8 | -------------------------------------------------------------------------------- /app/(dashboard)/(routes)/code/constants.ts: -------------------------------------------------------------------------------- 1 | import * as z from "zod"; 2 | 3 | export const formSchema = z.object({ 4 | prompt: z.string().min(1, { 5 | message: "Prompt is required." 6 | }), 7 | }); 8 | -------------------------------------------------------------------------------- /app/(dashboard)/(routes)/video/constants.ts: -------------------------------------------------------------------------------- 1 | import * as z from "zod"; 2 | 3 | export const formSchema = z.object({ 4 | prompt: z.string().min(1, { 5 | message: "Prompt is required." 6 | }), 7 | }); 8 | -------------------------------------------------------------------------------- /app/(dashboard)/(routes)/conversation/constants.ts: -------------------------------------------------------------------------------- 1 | import * as z from "zod"; 2 | 3 | export const formSchema = z.object({ 4 | prompt: z.string().min(1, { 5 | message: "Prompt is required." 6 | }), 7 | }); 8 | -------------------------------------------------------------------------------- /app/(dashboard)/(routes)/music/constants.ts: -------------------------------------------------------------------------------- 1 | import * as z from "zod"; 2 | 3 | export const formSchema = z.object({ 4 | prompt: z.string().min(1, { 5 | message: "Music prompt is required" 6 | }), 7 | }); 8 | -------------------------------------------------------------------------------- /app/(landing)/error.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Empty } from "@/components/ui/empty"; 4 | 5 | const Error = () => { 6 | return ( 7 | 8 | ); 9 | } 10 | 11 | export default Error; 12 | -------------------------------------------------------------------------------- /components/bot-avatar.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar, AvatarImage } from "@/components/ui/avatar"; 2 | 3 | export const BotAvatar = () => { 4 | return ( 5 | 6 | 7 | 8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | export function absoluteUrl(path: string) { 8 | return `${process.env.NEXT_PUBLIC_APP_URL}${path}` 9 | } -------------------------------------------------------------------------------- /components/crisp-chat.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useEffect } from "react"; 4 | import { Crisp } from "crisp-sdk-web"; 5 | 6 | export const CrispChat = () => { 7 | useEffect(() => { 8 | Crisp.configure("e780dcf8-1fd4-4f71-81a1-26fe12355e85"); 9 | }, []); 10 | 11 | return null; 12 | }; 13 | -------------------------------------------------------------------------------- /lib/prismadb.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from "@prisma/client" 2 | 3 | declare global { 4 | var prisma: PrismaClient | undefined 5 | } 6 | 7 | const prismadb = globalThis.prisma || new PrismaClient() 8 | if (process.env.NODE_ENV !== "production") globalThis.prisma = prismadb 9 | 10 | export default prismadb; -------------------------------------------------------------------------------- /app/(auth)/layout.tsx: -------------------------------------------------------------------------------- 1 | const AuthLayout = ({ 2 | children 3 | }: { 4 | children: React.ReactNode; 5 | }) => { 6 | return ( 7 |
8 | {children} 9 |
10 | ); 11 | } 12 | 13 | export default AuthLayout; -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | domains: [ 5 | "googleusercontent.com", 6 | "oaidalleapiprodscus.blob.core.windows.net", 7 | "cdn.openai.com" 8 | ] 9 | }, 10 | } 11 | 12 | module.exports = nextConfig 13 | -------------------------------------------------------------------------------- /app/(landing)/layout.tsx: -------------------------------------------------------------------------------- 1 | const LandingLayout = ({ 2 | children 3 | }: { 4 | children: React.ReactNode; 5 | }) => { 6 | return ( 7 |
8 |
9 | {children} 10 |
11 |
12 | ); 13 | } 14 | 15 | export default LandingLayout; -------------------------------------------------------------------------------- /hooks/use-pro-modal.ts: -------------------------------------------------------------------------------- 1 | import { create } from 'zustand'; 2 | 3 | interface useProModalStore { 4 | isOpen: boolean; 5 | onOpen: () => void; 6 | onClose: () => void; 7 | } 8 | 9 | export const useProModal = create((set) => ({ 10 | isOpen: false, 11 | onOpen: () => set({ isOpen: true }), 12 | onClose: () => set({ isOpen: false }), 13 | })); 14 | -------------------------------------------------------------------------------- /components/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { ThemeProvider as NextThemesProvider } from "next-themes" 5 | import { type ThemeProviderProps } from "next-themes/dist/types" 6 | 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 8 | return {children} 9 | } 10 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": true 11 | }, 12 | "aliases": { 13 | "components": "@/components", 14 | "utils": "@/lib/utils" 15 | } 16 | } -------------------------------------------------------------------------------- /app/(landing)/page.tsx: -------------------------------------------------------------------------------- 1 | import { LandingNavbar } from "@/components/landing-navbar"; 2 | import { LandingHero } from "@/components/landing-hero"; 3 | import { LandingContent } from "@/components/landing-content"; 4 | 5 | const LandingPage = () => { 6 | return ( 7 |
8 | 9 | 10 | 11 |
12 | ); 13 | } 14 | 15 | export default LandingPage; -------------------------------------------------------------------------------- /components/modal-provider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useEffect, useState } from "react"; 4 | 5 | import { ProModal } from "@/components/pro-modal"; 6 | 7 | export const ModalProvider = () => { 8 | const [isMounted, setIsMounted] = useState(false); 9 | 10 | useEffect(() => { 11 | setIsMounted(true); 12 | }, []); 13 | 14 | if (!isMounted) { 15 | return null; 16 | } 17 | 18 | return ( 19 | <> 20 | 21 | 22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /components/loader.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image" 2 | 3 | export const Loader = () => { 4 | return ( 5 |
6 |
7 | Logo 12 |
13 |

14 | Genius is thinking... 15 |

16 |
17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /components/user-avatar.tsx: -------------------------------------------------------------------------------- 1 | import { useUser } from "@clerk/nextjs"; 2 | 3 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; 4 | 5 | export const UserAvatar = () => { 6 | const { user } = useUser(); 7 | 8 | return ( 9 | 10 | 11 | 12 | {user?.firstName?.charAt(0)} 13 | {user?.lastName?.charAt(0)} 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /middleware.ts: -------------------------------------------------------------------------------- 1 | import { authMiddleware } from "@clerk/nextjs"; 2 | 3 | // This example protects all routes including api/trpc routes 4 | // Please edit this to allow other routes to be public as needed. 5 | // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your middleware 6 | export default authMiddleware({ 7 | publicRoutes: ["/", "/api/webhook"], 8 | }); 9 | 10 | export const config = { 11 | matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'], 12 | }; 13 | -------------------------------------------------------------------------------- /components/ui/empty.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | 4 | interface EmptyProps { 5 | label: string; 6 | } 7 | 8 | export const Empty = ({ 9 | label 10 | }: EmptyProps) => { 11 | return ( 12 |
13 |
14 | Empty 15 |
16 |

17 | {label} 18 |

19 |
20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /.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 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | .env 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from 'tailwindcss' 2 | 3 | const config: Config = { 4 | content: [ 5 | './pages/**/*.{js,ts,jsx,tsx,mdx}', 6 | './components/**/*.{js,ts,jsx,tsx,mdx}', 7 | './app/**/*.{js,ts,jsx,tsx,mdx}', 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 13 | 'gradient-conic': 14 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | } 20 | export default config 21 | -------------------------------------------------------------------------------- /components/navbar.tsx: -------------------------------------------------------------------------------- 1 | import { UserButton } from "@clerk/nextjs"; 2 | 3 | import { MobileSidebar } from "@/components/mobile-sidebar"; 4 | import { getApiLimitCount } from "@/lib/api-limit"; 5 | import { checkSubscription } from "@/lib/subscription"; 6 | 7 | const Navbar = async () => { 8 | const apiLimitCount = await getApiLimitCount(); 9 | const isPro = await checkSubscription(); 10 | 11 | return ( 12 |
13 | 14 |
15 | 16 |
17 |
18 | ); 19 | } 20 | 21 | export default Navbar; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | import { cva, type VariantProps } from "class-variance-authority" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const labelVariants = cva( 10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 11 | ) 12 | 13 | const Label = React.forwardRef< 14 | React.ElementRef, 15 | React.ComponentPropsWithoutRef & 16 | VariantProps 17 | >(({ className, ...props }, ref) => ( 18 | 23 | )) 24 | Label.displayName = LabelPrimitive.Root.displayName 25 | 26 | export { Label } 27 | -------------------------------------------------------------------------------- /lib/subscription.ts: -------------------------------------------------------------------------------- 1 | import { auth } from "@clerk/nextjs"; 2 | 3 | import prismadb from "@/lib/prismadb"; 4 | 5 | const DAY_IN_MS = 86_400_000; 6 | 7 | export const checkSubscription = async () => { 8 | const { userId } = auth(); 9 | 10 | if (!userId) { 11 | return false; 12 | } 13 | 14 | const userSubscription = await prismadb.userSubscription.findUnique({ 15 | where: { 16 | userId: userId, 17 | }, 18 | select: { 19 | stripeSubscriptionId: true, 20 | stripeCurrentPeriodEnd: true, 21 | stripeCustomerId: true, 22 | stripePriceId: true, 23 | }, 24 | }) 25 | 26 | if (!userSubscription) { 27 | return false; 28 | } 29 | 30 | const isValid = 31 | userSubscription.stripePriceId && 32 | userSubscription.stripeCurrentPeriodEnd?.getTime()! + DAY_IN_MS > Date.now() 33 | 34 | return !!isValid; 35 | }; 36 | -------------------------------------------------------------------------------- /app/(dashboard)/layout.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/navbar"; 2 | import { Sidebar } from "@/components/sidebar"; 3 | import { checkSubscription } from "@/lib/subscription"; 4 | import { getApiLimitCount } from "@/lib/api-limit"; 5 | 6 | const DashboardLayout = async ({ 7 | children, 8 | }: { 9 | children: React.ReactNode 10 | }) => { 11 | const apiLimitCount = await getApiLimitCount(); 12 | const isPro = await checkSubscription(); 13 | 14 | return ( 15 |
16 |
17 | 18 |
19 |
20 | 21 | {children} 22 |
23 |
24 | ); 25 | } 26 | 27 | export default DashboardLayout; -------------------------------------------------------------------------------- /components/heading.tsx: -------------------------------------------------------------------------------- 1 | import { Icon } from "lucide-react"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | 5 | interface HeadingProps { 6 | title: string; 7 | description: string; 8 | icon: Icon; 9 | iconColor?: string; 10 | bgColor?: string; 11 | } 12 | 13 | export const Heading = ({ 14 | title, 15 | description, 16 | icon: Icon, 17 | iconColor, 18 | bgColor, 19 | }: HeadingProps) => { 20 | return ( 21 | <> 22 |
23 |
24 | 25 |
26 |
27 |

{title}

28 |

29 | {description} 30 |

31 |
32 |
33 | 34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /components/ui/progress.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as ProgressPrimitive from "@radix-ui/react-progress" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const Progress = React.forwardRef< 9 | React.ElementRef, 10 | React.ComponentPropsWithoutRef 11 | >(({ className, value, ...props }, ref) => ( 12 | 20 | 24 | 25 | )) 26 | Progress.displayName = ProgressPrimitive.Root.displayName 27 | 28 | export { Progress } 29 | -------------------------------------------------------------------------------- /app/(dashboard)/(routes)/image/constants.ts: -------------------------------------------------------------------------------- 1 | import * as z from "zod"; 2 | 3 | export const formSchema = z.object({ 4 | prompt: z.string().min(1, { 5 | message: "Photo prompt is required" 6 | }), 7 | amount: z.string().min(1), 8 | resolution: z.string().min(1), 9 | }); 10 | 11 | export const amountOptions = [ 12 | { 13 | value: "1", 14 | label: "1 Photo" 15 | }, 16 | { 17 | value: "2", 18 | label: "2 Photos" 19 | }, 20 | { 21 | value: "3", 22 | label: "3 Photos" 23 | }, 24 | { 25 | value: "4", 26 | label: "4 Photos" 27 | }, 28 | { 29 | value: "5", 30 | label: "5 Photos" 31 | } 32 | ]; 33 | 34 | export const resolutionOptions = [ 35 | { 36 | value: "256x256", 37 | label: "256x256", 38 | }, 39 | { 40 | value: "512x512", 41 | label: "512x512", 42 | }, 43 | { 44 | value: "1024x1024", 45 | label: "1024x1024", 46 | }, 47 | ]; 48 | 49 | -------------------------------------------------------------------------------- /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 {} 7 | 8 | const Input = React.forwardRef( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | 20 | ) 21 | } 22 | ) 23 | Input.displayName = "Input" 24 | 25 | export { Input } 26 | -------------------------------------------------------------------------------- /prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | // This is your Prisma schema file, 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema 3 | 4 | generator client { 5 | provider = "prisma-client-js" 6 | } 7 | 8 | datasource db { 9 | provider = "mysql" 10 | url = env("DATABASE_URL") 11 | } 12 | 13 | model UserApiLimit { 14 | id String @id @default(cuid()) 15 | userId String @unique 16 | count Int @default(0) 17 | createdAt DateTime @default(now()) 18 | updatedAt DateTime @updatedAt 19 | } 20 | 21 | model UserSubscription { 22 | id String @id @default(cuid()) 23 | userId String @unique 24 | stripeCustomerId String? @unique @map(name: "stripe_customer_id") 25 | stripeSubscriptionId String? @unique @map(name: "stripe_subscription_id") 26 | stripePriceId String? @map(name: "stripe_price_id") 27 | stripeCurrentPeriodEnd DateTime? @map(name: "stripe_current_period_end") 28 | } -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | import { Inter } from 'next/font/google' 3 | import { ClerkProvider } from '@clerk/nextjs' 4 | 5 | import { ToasterProvider } from '@/components/toaster-provider' 6 | import { ModalProvider } from '@/components/modal-provider' 7 | import { CrispProvider } from '@/components/crisp-provider' 8 | 9 | import './globals.css' 10 | 11 | const font = Inter({ subsets: ['latin'] }); 12 | 13 | export const metadata: Metadata = { 14 | title: 'Genius AI (Saas App)', 15 | description: 'AI Platform', 16 | } 17 | 18 | export default async function RootLayout({ 19 | children, 20 | }: { 21 | children: React.ReactNode 22 | }) { 23 | return ( 24 | 25 | 26 | 27 | 28 | 29 | 30 | {children} 31 | 32 | 33 | 34 | ) 35 | } -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= 2 | CLERK_SECRET_KEY= 3 | 4 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in 5 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up 6 | NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard 7 | NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard 8 | 9 | OPENAI_API_KEY= 10 | 11 | REPLICATE_API_TOKEN= 12 | 13 | # This was inserted by `prisma init`: 14 | # Environment variables declared in this file are automatically made available to Prisma. 15 | # See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema 16 | 17 | # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB. 18 | # See the documentation for all the connection string options: https://pris.ly/d/connection-strings 19 | 20 | DATABASE_URL="mysql://root:prabh12345@localhost:3306/ai-saas" 21 | 22 | STRIPE_API_KEY= 23 | 24 | NEXT_PUBLIC_APP_URL=http://localhost:3000 25 | 26 | STRIPE_WEBHOOK_SECRET= 27 | -------------------------------------------------------------------------------- /constants.ts: -------------------------------------------------------------------------------- 1 | import { Code, ImageIcon, MessageSquare, Music, VideoIcon } from "lucide-react"; 2 | 3 | export const MAX_FREE_COUNTS = 5; 4 | 5 | export const tools = [ 6 | { 7 | label: 'Conversation', 8 | icon: MessageSquare, 9 | href: '/conversation', 10 | color: "text-violet-500", 11 | bgColor: "bg-violet-500/10", 12 | }, 13 | { 14 | label: 'Music Generation', 15 | icon: Music, 16 | href: '/music', 17 | color: "text-emerald-500", 18 | bgColor: "bg-emerald-500/10", 19 | }, 20 | { 21 | label: 'Image Generation', 22 | icon: ImageIcon, 23 | color: "text-pink-700", 24 | bgColor: "bg-pink-700/10", 25 | href: '/image', 26 | }, 27 | { 28 | label: 'Video Generation', 29 | icon: VideoIcon, 30 | color: "text-orange-700", 31 | bgColor: "bg-orange-700/10", 32 | href: '/video', 33 | }, 34 | { 35 | label: 'Code Generation', 36 | icon: Code, 37 | color: "text-green-700", 38 | bgColor: "bg-green-700/10", 39 | href: '/code', 40 | }, 41 | ]; -------------------------------------------------------------------------------- /components/subscription-button.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import axios from "axios"; 4 | import { useState } from "react"; 5 | import { Zap } from "lucide-react"; 6 | import { toast } from "react-hot-toast"; 7 | 8 | import { Button } from "@/components/ui/button"; 9 | 10 | export const SubscriptionButton = ({ 11 | isPro = true 12 | }: { 13 | isPro: boolean; 14 | }) => { 15 | const [loading, setLoading] = useState(false); 16 | 17 | const onClick = async () => { 18 | try { 19 | setLoading(true); 20 | 21 | const response = await axios.get("/api/stripe"); 22 | 23 | window.location.href = response.data.url; 24 | } catch (error) { 25 | toast.error("Feature Coming Soon..."); 26 | } finally { 27 | setLoading(false); 28 | } 29 | }; 30 | 31 | return ( 32 | 36 | ) 37 | }; 38 | -------------------------------------------------------------------------------- /components/mobile-sidebar.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useEffect, useState } from "react"; 4 | import { Menu } from "lucide-react"; 5 | 6 | import { Button } from "@/components/ui/button"; 7 | import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; 8 | import { Sidebar } from "@/components/sidebar"; 9 | 10 | export const MobileSidebar = ({ 11 | apiLimitCount = 0, 12 | isPro = false 13 | }: { 14 | apiLimitCount: number; 15 | isPro: boolean; 16 | }) => { 17 | const [isMounted, setIsMounted] = useState(false); 18 | 19 | useEffect(() => { 20 | setIsMounted(true); 21 | }, []); 22 | 23 | if (!isMounted) { 24 | return null; 25 | } 26 | 27 | return ( 28 | 29 | 30 | 33 | 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | -------------------------------------------------------------------------------- /components/landing-navbar.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Montserrat } from "next/font/google"; 4 | import Image from "next/image" 5 | import Link from "next/link" 6 | import { useAuth } from "@clerk/nextjs"; 7 | 8 | import { cn } from "@/lib/utils"; 9 | import { Button } from "@/components/ui/button"; 10 | 11 | const font = Montserrat({ weight: '600', subsets: ['latin'] }); 12 | 13 | export const LandingNavbar = () => { 14 | const { isSignedIn } = useAuth(); 15 | 16 | return ( 17 | 34 | ) 35 | } -------------------------------------------------------------------------------- /components/ui/badge.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { cva, type VariantProps } from "class-variance-authority" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const badgeVariants = cva( 7 | "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", 8 | { 9 | variants: { 10 | variant: { 11 | default: 12 | "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", 13 | secondary: 14 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", 15 | destructive: 16 | "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", 17 | outline: "text-foreground", 18 | premium: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-primary-foreground border-0" 19 | }, 20 | }, 21 | defaultVariants: { 22 | variant: "default", 23 | }, 24 | } 25 | ) 26 | 27 | export interface BadgeProps 28 | extends React.HTMLAttributes, 29 | VariantProps {} 30 | 31 | function Badge({ className, variant, ...props }: BadgeProps) { 32 | return ( 33 |
34 | ) 35 | } 36 | 37 | export { Badge, badgeVariants } 38 | -------------------------------------------------------------------------------- /components/tool-card.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Image from "next/image"; 4 | 5 | import { 6 | Card, 7 | CardHeader, 8 | CardTitle, 9 | CardDescription, 10 | CardContent, 11 | } from "@/components/ui/card"; 12 | import { Badge } from "@/components/ui/badge"; 13 | import { useRouter } from "next/navigation"; 14 | 15 | interface ToolCardProps { 16 | src: string, 17 | href: string, 18 | title: string, 19 | description: string, 20 | premium?: boolean; 21 | } 22 | 23 | export const ToolCard = ({ 24 | src, 25 | href, 26 | title, 27 | description, 28 | premium 29 | }: ToolCardProps) => { 30 | const router = useRouter(); 31 | 32 | const onClick = () => { 33 | router.push(href); 34 | } 35 | 36 | return ( 37 | 38 | 39 | 40 |
41 | Icon 42 |
43 | {title} 44 | 45 | {description} 46 | {premium && ( 47 | 48 | pro 49 | 50 | )} 51 | 52 | 53 | ); 54 | }; 55 | -------------------------------------------------------------------------------- /lib/api-limit.ts: -------------------------------------------------------------------------------- 1 | import { auth } from "@clerk/nextjs"; 2 | 3 | import prismadb from "@/lib/prismadb"; 4 | import { MAX_FREE_COUNTS } from "@/constants"; 5 | 6 | export const incrementApiLimit = async () => { 7 | const { userId } = auth(); 8 | 9 | if (!userId) { 10 | return; 11 | } 12 | 13 | const userApiLimit = await prismadb.userApiLimit.findUnique({ 14 | where: { userId: userId }, 15 | }); 16 | 17 | if (userApiLimit) { 18 | await prismadb.userApiLimit.update({ 19 | where: { userId: userId }, 20 | data: { count: userApiLimit.count + 1 }, 21 | }); 22 | } else { 23 | await prismadb.userApiLimit.create({ 24 | data: { userId: userId, count: 1 }, 25 | }); 26 | } 27 | }; 28 | 29 | export const checkApiLimit = async () => { 30 | const { userId } = auth(); 31 | 32 | if (!userId) { 33 | return false; 34 | } 35 | 36 | const userApiLimit = await prismadb.userApiLimit.findUnique({ 37 | where: { userId: userId }, 38 | }); 39 | 40 | if (!userApiLimit || userApiLimit.count < MAX_FREE_COUNTS) { 41 | return true; 42 | } else { 43 | return false; 44 | } 45 | }; 46 | 47 | export const getApiLimitCount = async () => { 48 | const { userId } = auth(); 49 | 50 | if (!userId) { 51 | return 0; 52 | } 53 | 54 | const userApiLimit = await prismadb.userApiLimit.findUnique({ 55 | where: { 56 | userId 57 | } 58 | }); 59 | 60 | if (!userApiLimit) { 61 | return 0; 62 | } 63 | 64 | return userApiLimit.count; 65 | }; -------------------------------------------------------------------------------- /app/(dashboard)/(routes)/dashboard/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { ArrowRight } from "lucide-react"; 4 | import { useRouter } from "next/navigation"; 5 | 6 | import { Card } from "@/components/ui/card"; 7 | import { cn } from "@/lib/utils"; 8 | 9 | import { tools } from "@/constants"; 10 | 11 | export default function HomePage() { 12 | const router = useRouter(); 13 | 14 | return ( 15 |
16 |
17 |

18 | Explore the power of AI 19 |

20 |

21 | Chat with the smartest AI - Experience the power of AI 22 |

23 |
24 |
25 | {tools.map((tool) => ( 26 | router.push(tool.href)} key={tool.href} className="p-4 border-black/5 flex items-center justify-between hover:shadow-md transition cursor-pointer"> 27 |
28 |
29 | 30 |
31 |
32 | {tool.label} 33 |
34 |
35 | 36 | 37 | ))} 38 |
39 |
40 | ); 41 | } -------------------------------------------------------------------------------- /components/free-counter.tsx: -------------------------------------------------------------------------------- 1 | import { Zap } from "lucide-react"; 2 | import { useEffect, useState } from "react"; 3 | 4 | import { MAX_FREE_COUNTS } from "@/constants"; 5 | import { Card, CardContent } from "@/components/ui/card"; 6 | import { Button } from "@/components/ui/button"; 7 | import { Progress } from "@/components/ui/progress"; 8 | import { useProModal } from "@/hooks/use-pro-modal"; 9 | 10 | export const FreeCounter = ({ 11 | isPro = false, 12 | apiLimitCount = 0, 13 | }: { 14 | isPro: boolean, 15 | apiLimitCount: number 16 | }) => { 17 | const [mounted, setMounted] = useState(false); 18 | const proModal = useProModal(); 19 | 20 | useEffect(() => { 21 | setMounted(true); 22 | }, []); 23 | 24 | if (!mounted) { 25 | return null; 26 | } 27 | 28 | 29 | if (isPro) { 30 | return null; 31 | } 32 | 33 | return ( 34 |
35 | 36 | 37 |
38 |

39 | {apiLimitCount} / {MAX_FREE_COUNTS} Free Generations 40 |

41 | 42 |
43 | 47 | 48 | 49 |
50 | ) 51 | } -------------------------------------------------------------------------------- /components/landing-hero.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import TypewriterComponent from "typewriter-effect"; 4 | import Link from "next/link"; 5 | import { useAuth } from "@clerk/nextjs"; 6 | 7 | import { Button } from "@/components/ui/button"; 8 | 9 | export const LandingHero = () => { 10 | const { isSignedIn } = useAuth(); 11 | 12 | return ( 13 |
14 |
15 |

The Best AI Tool for

16 |
17 | 30 |
31 |
32 |
33 | Create content using AI 10x faster. 34 |
35 |
36 | 37 | 40 | 41 |
42 |
43 | ); 44 | }; 45 | -------------------------------------------------------------------------------- /app/api/music/route.ts: -------------------------------------------------------------------------------- 1 | import Replicate from "replicate"; 2 | import { auth } from "@clerk/nextjs"; 3 | import { NextResponse } from "next/server"; 4 | 5 | import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit"; 6 | import { checkSubscription } from "@/lib/subscription"; 7 | 8 | const replicate = new Replicate({ 9 | auth: process.env.REPLICATE_API_TOKEN!, 10 | }); 11 | 12 | export async function POST( 13 | req: Request 14 | ) { 15 | try { 16 | const { userId } = auth(); 17 | const body = await req.json(); 18 | const { prompt } = body; 19 | 20 | if (!userId) { 21 | return new NextResponse("Unauthorized", { status: 401 }); 22 | } 23 | 24 | if (!prompt) { 25 | return new NextResponse("Prompt is required", { status: 400 }); 26 | } 27 | 28 | const freeTrial = await checkApiLimit(); 29 | const isPro = await checkSubscription(); 30 | 31 | if (!freeTrial && !isPro) { 32 | return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 }); 33 | } 34 | 35 | const response = await replicate.run( 36 | "riffusion/riffusion:8cf61ea6c56afd61d8f5b9ffd14d7c216c0a93844ce2d82ac1c9ecc9c7f24e05", 37 | { 38 | input: { 39 | prompt_a: prompt 40 | } 41 | } 42 | ); 43 | 44 | if (!isPro) { 45 | await incrementApiLimit(); 46 | } 47 | 48 | return NextResponse.json(response); 49 | } catch (error) { 50 | console.log('[MUSIC_ERROR]', error); 51 | return new NextResponse("Internal Error", { status: 500 }); 52 | } 53 | }; 54 | -------------------------------------------------------------------------------- /app/api/video/route.ts: -------------------------------------------------------------------------------- 1 | import Replicate from "replicate"; 2 | import { auth } from "@clerk/nextjs"; 3 | import { NextResponse } from "next/server"; 4 | 5 | import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit"; 6 | import { checkSubscription } from "@/lib/subscription"; 7 | 8 | const replicate = new Replicate({ 9 | auth: process.env.REPLICATE_API_TOKEN!, 10 | }); 11 | 12 | export async function POST( 13 | req: Request 14 | ) { 15 | try { 16 | const { userId } = auth(); 17 | const body = await req.json(); 18 | const { prompt } = body; 19 | 20 | if (!userId) { 21 | return new NextResponse("Unauthorized", { status: 401 }); 22 | } 23 | 24 | if (!prompt) { 25 | return new NextResponse("Prompt is required", { status: 400 }); 26 | } 27 | 28 | const freeTrial = await checkApiLimit(); 29 | const isPro = await checkSubscription(); 30 | 31 | if (!freeTrial && !isPro) { 32 | return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 }); 33 | } 34 | 35 | const response = await replicate.run( 36 | "anotherjesse/zeroscope-v2-xl:71996d331e8ede8ef7bd76eba9fae076d31792e4ddf4ad057779b443d6aea62f", 37 | { 38 | input: { 39 | prompt, 40 | } 41 | } 42 | ); 43 | 44 | if (!isPro) { 45 | await incrementApiLimit(); 46 | } 47 | 48 | return NextResponse.json(response); 49 | } catch (error) { 50 | console.log('[VIDEO_ERROR]', error); 51 | return new NextResponse("Internal Error", { status: 500 }); 52 | } 53 | }; 54 | -------------------------------------------------------------------------------- /app/api/conversation/route.ts: -------------------------------------------------------------------------------- 1 | import { auth } from '@clerk/nextjs'; 2 | import { NextResponse } from 'next/server'; 3 | import OpenAI from 'openai'; 4 | 5 | import { checkSubscription } from "@/lib/subscription"; 6 | import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit"; 7 | 8 | const openai = new OpenAI({ 9 | apiKey: process.env.OPENAI_API_KEY, 10 | }); 11 | 12 | export async function POST( 13 | req: Request 14 | ) { 15 | try { 16 | const { userId } = auth(); 17 | const body = await req.json(); 18 | const { messages } = body; 19 | 20 | if (!userId) { 21 | return new NextResponse("Unauthorized", { status: 401 }); 22 | } 23 | 24 | if (!openai.apiKey) { 25 | return new NextResponse('OpenAI API Key not configured', { status: 500 }); 26 | } 27 | 28 | if (!messages) { 29 | return new NextResponse("Messages are required", { status: 400 }); 30 | } 31 | 32 | const freeTrial = await checkApiLimit(); 33 | const isPro = await checkSubscription(); 34 | 35 | if (!freeTrial && !isPro) { 36 | return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 }); 37 | } 38 | 39 | const response = await openai.chat.completions.create({ 40 | model: 'gpt-3.5-turbo', 41 | messages, 42 | }); 43 | 44 | if (!isPro) { 45 | await incrementApiLimit(); 46 | } 47 | 48 | return NextResponse.json(response.choices[0].message); 49 | } catch (error) { 50 | console.log('[CONVERSATION_ERROR]', error); 51 | return new NextResponse('Internal error', { status: 500 }); 52 | } 53 | }; 54 | -------------------------------------------------------------------------------- /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, 10 | React.ComponentPropsWithoutRef 11 | >(({ className, ...props }, ref) => ( 12 | 20 | )) 21 | Avatar.displayName = AvatarPrimitive.Root.displayName 22 | 23 | const AvatarImage = React.forwardRef< 24 | React.ElementRef, 25 | React.ComponentPropsWithoutRef 26 | >(({ className, ...props }, ref) => ( 27 | 32 | )) 33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName 34 | 35 | const AvatarFallback = React.forwardRef< 36 | React.ElementRef, 37 | React.ComponentPropsWithoutRef 38 | >(({ className, ...props }, ref) => ( 39 | 47 | )) 48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName 49 | 50 | export { Avatar, AvatarImage, AvatarFallback } 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ai-saas", 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 | "postinstall": "prisma generate" 11 | }, 12 | "dependencies": { 13 | "@clerk/nextjs": "^4.24.1", 14 | "@hookform/resolvers": "^3.3.1", 15 | "@prisma/client": "^5.3.1", 16 | "@radix-ui/react-avatar": "^1.0.3", 17 | "@radix-ui/react-dialog": "^1.0.4", 18 | "@radix-ui/react-label": "^2.0.2", 19 | "@radix-ui/react-progress": "^1.0.3", 20 | "@radix-ui/react-select": "^1.2.2", 21 | "@radix-ui/react-slot": "^1.0.2", 22 | "@types/node": "20.6.3", 23 | "@types/react": "18.2.22", 24 | "@types/react-dom": "18.2.7", 25 | "autoprefixer": "10.4.16", 26 | "axios": "^1.5.0", 27 | "class-variance-authority": "^0.7.0", 28 | "clsx": "^2.0.0", 29 | "crisp-sdk-web": "^1.0.21", 30 | "eslint": "8.49.0", 31 | "eslint-config-next": "13.5.2", 32 | "lucide": "^0.279.0", 33 | "lucide-react": "^0.279.0", 34 | "lucide-react-native": "^0.279.0", 35 | "next": "13.5.2", 36 | "next-themes": "^0.2.1", 37 | "openai": "^4.10.0", 38 | "postcss": "8.4.30", 39 | "react": "18.2.0", 40 | "react-dom": "18.2.0", 41 | "react-hook-form": "^7.46.2", 42 | "react-hot-toast": "^2.4.1", 43 | "react-markdown": "^8.0.7", 44 | "replicate": "^0.18.0", 45 | "stripe": "^13.7.0", 46 | "tailwind-merge": "^1.14.0", 47 | "tailwindcss": "3.3.3", 48 | "tailwindcss-animate": "^1.0.7", 49 | "typescript": "5.2.2", 50 | "typewriter-effect": "^2.21.0", 51 | "zod": "^3.22.2", 52 | "zustand": "^4.4.1" 53 | }, 54 | "devDependencies": { 55 | "prisma": "^5.3.1" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /components/landing-content.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; 4 | 5 | const testimonials = [ 6 | { 7 | name: "Prabhjot Singh", 8 | avatar: "P", 9 | title: "Software Engineer", 10 | description: "This is the best application I've ever used!", 11 | profileLink: "https://www.linkedin.com/in/prabhjot-singh-chugh/", 12 | }, 13 | { 14 | name: "Srishti Sharma", 15 | avatar: "S", 16 | title: "Software Engineer", 17 | description: "I use this daily for generating new photos!", 18 | profileLink: "https://www.linkedin.com/in/srishti-sharma-653497241/", 19 | }, 20 | ]; 21 | 22 | export const LandingContent = () => { 23 | return ( 24 |
25 |

Testimonials

26 |
27 | {testimonials.map((item) => ( 28 | 29 | 30 | 31 |
32 |

33 | 34 | {item.name} 35 | 36 |

37 |

{item.title}

38 |
39 | 40 | 41 | {item.description} 42 | 43 | 44 | 45 | ))} 46 |
47 |
48 | ); 49 | }; 50 | -------------------------------------------------------------------------------- /app/api/code/route.ts: -------------------------------------------------------------------------------- 1 | import { auth } from "@clerk/nextjs"; 2 | import { NextResponse } from "next/server"; 3 | import OpenAI from 'openai'; 4 | 5 | import { checkSubscription } from "@/lib/subscription"; 6 | import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit"; 7 | 8 | const openai = new OpenAI({ 9 | apiKey: process.env.OPENAI_API_KEY, 10 | }); 11 | 12 | const instructionMessage: OpenAI.Chat.Completions.CreateChatCompletionRequestMessage = { 13 | role: "system", 14 | content: "You are a code generator. You must answer only in markdown code snippets. Use code comments for explanations." 15 | }; 16 | 17 | export async function POST( 18 | req: Request 19 | ) { 20 | try { 21 | const { userId } = auth(); 22 | const body = await req.json(); 23 | const { messages } = body; 24 | 25 | if (!userId) { 26 | return new NextResponse("Unauthorized", { status: 401 }); 27 | } 28 | 29 | if (!openai.apiKey) { 30 | return new NextResponse("OpenAI API Key not configured.", { status: 500 }); 31 | } 32 | 33 | if (!messages) { 34 | return new NextResponse("Messages are required", { status: 400 }); 35 | } 36 | 37 | const freeTrial = await checkApiLimit(); 38 | const isPro = await checkSubscription(); 39 | 40 | if (!freeTrial && !isPro) { 41 | return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 }); 42 | } 43 | 44 | const response = await openai.chat.completions.create({ 45 | model: "gpt-3.5-turbo", 46 | messages: [instructionMessage, ...messages] 47 | }); 48 | 49 | if (!isPro) { 50 | await incrementApiLimit(); 51 | } 52 | 53 | return NextResponse.json(response.choices[0].message); 54 | } catch (error) { 55 | console.log('[CONVERSATION_ERROR]', error); 56 | return new NextResponse('Internal error', { status: 500 }); 57 | } 58 | }; 59 | -------------------------------------------------------------------------------- /app/api/image/route.ts: -------------------------------------------------------------------------------- 1 | import { auth } from "@clerk/nextjs"; 2 | import { NextResponse } from "next/server"; 3 | import OpenAI from 'openai'; 4 | 5 | import { checkSubscription } from "@/lib/subscription"; 6 | import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit"; 7 | 8 | const openai = new OpenAI({ 9 | apiKey: process.env.OPENAI_API_KEY, 10 | }); 11 | 12 | export async function POST( 13 | req: Request 14 | ) { 15 | try { 16 | const { userId } = auth(); 17 | const body = await req.json(); 18 | const { prompt, amount = 1, resolution = "512x512" } = body; 19 | 20 | if (!userId) { 21 | return new NextResponse("Unauthorized", { status: 401 }); 22 | } 23 | 24 | if (!openai.apiKey) { 25 | return new NextResponse("OpenAI API Key not configured.", { status: 500 }); 26 | } 27 | 28 | if (!prompt) { 29 | return new NextResponse("Prompt is required", { status: 400 }); 30 | } 31 | 32 | if (!amount) { 33 | return new NextResponse("Amount is required", { status: 400 }); 34 | } 35 | 36 | if (!resolution) { 37 | return new NextResponse("Resolution is required", { status: 400 }); 38 | } 39 | 40 | const freeTrial = await checkApiLimit(); 41 | const isPro = await checkSubscription(); 42 | 43 | if (!freeTrial && !isPro) { 44 | return new NextResponse("Free trial has expired. Please upgrade to pro.", { status: 403 }); 45 | } 46 | 47 | const response = await openai.images.generate({ 48 | prompt, 49 | n: parseInt(amount, 10), 50 | size: resolution, 51 | }); 52 | 53 | if (!isPro) { 54 | await incrementApiLimit(); 55 | } 56 | 57 | const responseData = response.data || response; 58 | 59 | return NextResponse.json(responseData); 60 | } catch (error) { 61 | console.log('[IMAGE_ERROR]', error); 62 | return new NextResponse("Internal Error", { status: 500 }); 63 | } 64 | }; 65 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html, 6 | body, 7 | :root { 8 | height: 100%; 9 | } 10 | 11 | @layer base { 12 | :root { 13 | --background: 0 0% 100%; 14 | --foreground: 20 14.3% 4.1%; 15 | 16 | --muted: 60 4.8% 95.9%; 17 | --muted-foreground: 25 5.3% 44.7%; 18 | 19 | --popover: 0 0% 100%; 20 | --popover-foreground: 20 14.3% 4.1%; 21 | 22 | --card: 0 0% 100%; 23 | --card-foreground: 20 14.3% 4.1%; 24 | 25 | --border: 20 5.9% 90%; 26 | --input: 20 5.9% 90%; 27 | 28 | --primary: 248 90% 66%; 29 | --primary-foreground: 60 9.1% 97.8%; 30 | 31 | --secondary: 60 4.8% 95.9%; 32 | --secondary-foreground: 24 9.8% 10%; 33 | 34 | --accent: 60 4.8% 95.9%; 35 | --accent-foreground: 24 9.8% 10%; 36 | 37 | --destructive: 0 84.2% 60.2%; 38 | --destructive-foreground: 60 9.1% 97.8%; 39 | 40 | --ring: 248 90% 66%; 41 | 42 | --radius: 0.5rem; 43 | } 44 | 45 | .dark { 46 | --background: 20 14.3% 4.1%; 47 | --foreground: 60 9.1% 97.8%; 48 | 49 | --muted: 12 6.5% 15.1%; 50 | --muted-foreground: 24 5.4% 63.9%; 51 | 52 | --popover: 20 14.3% 4.1%; 53 | --popover-foreground: 60 9.1% 97.8%; 54 | 55 | --card: 20 14.3% 4.1%; 56 | --card-foreground: 60 9.1% 97.8%; 57 | 58 | --border: 12 6.5% 15.1%; 59 | --input: 12 6.5% 15.1%; 60 | 61 | --primary: 60 9.1% 97.8%; 62 | --primary-foreground: 24 9.8% 10%; 63 | 64 | --secondary: 12 6.5% 15.1%; 65 | --secondary-foreground: 60 9.1% 97.8%; 66 | 67 | --accent: 12 6.5% 15.1%; 68 | --accent-foreground: 60 9.1% 97.8%; 69 | 70 | --destructive: 0 62.8% 30.6%; 71 | --destructive-foreground: 0 85.7% 97.3%; 72 | 73 | --ring: 12 6.5% 15.1%; 74 | } 75 | } 76 | 77 | @layer base { 78 | * { 79 | @apply border-border; 80 | } 81 | body { 82 | @apply bg-background text-foreground; 83 | } 84 | } -------------------------------------------------------------------------------- /app/api/stripe/route.ts: -------------------------------------------------------------------------------- 1 | import { auth, currentUser } from "@clerk/nextjs"; 2 | import { NextResponse } from "next/server"; 3 | 4 | import prismadb from "@/lib/prismadb"; 5 | import { stripe } from "@/lib/stripe"; 6 | import { absoluteUrl } from "@/lib/utils"; 7 | 8 | const settingsUrl = absoluteUrl("/settings"); 9 | 10 | export async function GET() { 11 | try { 12 | const { userId } = auth(); 13 | const user = await currentUser(); 14 | 15 | if (!userId || !user) { 16 | return new NextResponse("Unauthorized", { status: 401 }); 17 | } 18 | 19 | const userSubscription = await prismadb.userSubscription.findUnique({ 20 | where: { 21 | userId 22 | } 23 | }) 24 | 25 | if (userSubscription && userSubscription.stripeCustomerId) { 26 | const stripeSession = await stripe.billingPortal.sessions.create({ 27 | customer: userSubscription.stripeCustomerId, 28 | return_url: settingsUrl, 29 | }) 30 | 31 | return new NextResponse(JSON.stringify({ url: stripeSession.url })) 32 | } 33 | 34 | const stripeSession = await stripe.checkout.sessions.create({ 35 | success_url: settingsUrl, 36 | cancel_url: settingsUrl, 37 | payment_method_types: ["card"], 38 | mode: "subscription", 39 | billing_address_collection: "auto", 40 | customer_email: user.emailAddresses[0].emailAddress, 41 | line_items: [ 42 | { 43 | price_data: { 44 | currency: "USD", 45 | product_data: { 46 | name: "Genius Pro", 47 | description: "Unlimited AI Generations" 48 | }, 49 | unit_amount: 2000, 50 | recurring: { 51 | interval: "month" 52 | } 53 | }, 54 | quantity: 1, 55 | }, 56 | ], 57 | metadata: { 58 | userId, 59 | }, 60 | }) 61 | 62 | return new NextResponse(JSON.stringify({ url: stripeSession.url })) 63 | } catch (error) { 64 | console.log("[STRIPE_ERROR]", error); 65 | return new NextResponse("Internal Error", { status: 500 }); 66 | } 67 | }; 68 | -------------------------------------------------------------------------------- /app/api/webhook/route.ts: -------------------------------------------------------------------------------- 1 | import Stripe from "stripe" 2 | import { headers } from "next/headers" 3 | import { NextResponse } from "next/server" 4 | 5 | import prismadb from "@/lib/prismadb" 6 | import { stripe } from "@/lib/stripe" 7 | 8 | export async function POST(req: Request) { 9 | const body = await req.text() 10 | const signature = headers().get("Stripe-Signature") as string 11 | 12 | let event: Stripe.Event 13 | 14 | try { 15 | event = stripe.webhooks.constructEvent( 16 | body, 17 | signature, 18 | process.env.STRIPE_WEBHOOK_SECRET! 19 | ) 20 | } catch (error: any) { 21 | return new NextResponse(`Webhook Error: ${error.message}`, { status: 400 }) 22 | } 23 | 24 | const session = event.data.object as Stripe.Checkout.Session 25 | 26 | if (event.type === "checkout.session.completed") { 27 | const subscription = await stripe.subscriptions.retrieve( 28 | session.subscription as string 29 | ) 30 | 31 | if (!session?.metadata?.userId) { 32 | return new NextResponse("User id is required", { status: 400 }); 33 | } 34 | 35 | await prismadb.userSubscription.create({ 36 | data: { 37 | userId: session?.metadata?.userId, 38 | stripeSubscriptionId: subscription.id, 39 | stripeCustomerId: subscription.customer as string, 40 | stripePriceId: subscription.items.data[0].price.id, 41 | stripeCurrentPeriodEnd: new Date( 42 | subscription.current_period_end * 1000 43 | ), 44 | }, 45 | }) 46 | } 47 | 48 | if (event.type === "invoice.payment_succeeded") { 49 | const subscription = await stripe.subscriptions.retrieve( 50 | session.subscription as string 51 | ) 52 | 53 | await prismadb.userSubscription.update({ 54 | where: { 55 | stripeSubscriptionId: subscription.id, 56 | }, 57 | data: { 58 | stripePriceId: subscription.items.data[0].price.id, 59 | stripeCurrentPeriodEnd: new Date( 60 | subscription.current_period_end * 1000 61 | ), 62 | }, 63 | }) 64 | } 65 | 66 | return new NextResponse(null, { status: 200 }) 67 | }; 68 | -------------------------------------------------------------------------------- /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 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: "bg-primary text-primary-foreground hover:bg-primary/90", 13 | destructive: 14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90", 15 | outline: 16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 17 | secondary: 18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80", 19 | ghost: "hover:bg-accent hover:text-accent-foreground", 20 | link: "text-primary underline-offset-4 hover:underline", 21 | premium: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white border-0", 22 | }, 23 | size: { 24 | default: "h-10 px-4 py-2", 25 | sm: "h-9 rounded-md px-3", 26 | lg: "h-11 rounded-md px-8", 27 | icon: "h-10 w-10", 28 | }, 29 | }, 30 | defaultVariants: { 31 | variant: "default", 32 | size: "default", 33 | }, 34 | } 35 | ) 36 | 37 | export interface ButtonProps 38 | extends React.ButtonHTMLAttributes, 39 | VariantProps { 40 | asChild?: boolean 41 | } 42 | 43 | const Button = React.forwardRef( 44 | ({ className, variant, size, asChild = false, ...props }, ref) => { 45 | const Comp = asChild ? Slot : "button" 46 | return ( 47 | 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 8 | >(({ className, ...props }, ref) => ( 9 |
17 | )) 18 | Card.displayName = "Card" 19 | 20 | const CardHeader = React.forwardRef< 21 | HTMLDivElement, 22 | React.HTMLAttributes 23 | >(({ className, ...props }, ref) => ( 24 |
29 | )) 30 | CardHeader.displayName = "CardHeader" 31 | 32 | const CardTitle = React.forwardRef< 33 | HTMLParagraphElement, 34 | React.HTMLAttributes 35 | >(({ className, ...props }, ref) => ( 36 |

44 | )) 45 | CardTitle.displayName = "CardTitle" 46 | 47 | const CardDescription = React.forwardRef< 48 | HTMLParagraphElement, 49 | React.HTMLAttributes 50 | >(({ className, ...props }, ref) => ( 51 |

56 | )) 57 | CardDescription.displayName = "CardDescription" 58 | 59 | const CardContent = React.forwardRef< 60 | HTMLDivElement, 61 | React.HTMLAttributes 62 | >(({ className, ...props }, ref) => ( 63 |

64 | )) 65 | CardContent.displayName = "CardContent" 66 | 67 | const CardFooter = React.forwardRef< 68 | HTMLDivElement, 69 | React.HTMLAttributes 70 | >(({ className, ...props }, ref) => ( 71 |
76 | )) 77 | CardFooter.displayName = "CardFooter" 78 | 79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } 80 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | darkMode: ["class"], 4 | content: [ 5 | './pages/**/*.{ts,tsx}', 6 | './components/**/*.{ts,tsx}', 7 | './app/**/*.{ts,tsx}', 8 | './src/**/*.{ts,tsx}', 9 | ], 10 | theme: { 11 | container: { 12 | center: true, 13 | padding: "2rem", 14 | screens: { 15 | "2xl": "1400px", 16 | }, 17 | }, 18 | extend: { 19 | colors: { 20 | border: "hsl(var(--border))", 21 | input: "hsl(var(--input))", 22 | ring: "hsl(var(--ring))", 23 | background: "hsl(var(--background))", 24 | foreground: "hsl(var(--foreground))", 25 | primary: { 26 | DEFAULT: "hsl(var(--primary))", 27 | foreground: "hsl(var(--primary-foreground))", 28 | }, 29 | secondary: { 30 | DEFAULT: "hsl(var(--secondary))", 31 | foreground: "hsl(var(--secondary-foreground))", 32 | }, 33 | destructive: { 34 | DEFAULT: "hsl(var(--destructive))", 35 | foreground: "hsl(var(--destructive-foreground))", 36 | }, 37 | muted: { 38 | DEFAULT: "hsl(var(--muted))", 39 | foreground: "hsl(var(--muted-foreground))", 40 | }, 41 | accent: { 42 | DEFAULT: "hsl(var(--accent))", 43 | foreground: "hsl(var(--accent-foreground))", 44 | }, 45 | popover: { 46 | DEFAULT: "hsl(var(--popover))", 47 | foreground: "hsl(var(--popover-foreground))", 48 | }, 49 | card: { 50 | DEFAULT: "hsl(var(--card))", 51 | foreground: "hsl(var(--card-foreground))", 52 | }, 53 | }, 54 | borderRadius: { 55 | lg: "var(--radius)", 56 | md: "calc(var(--radius) - 2px)", 57 | sm: "calc(var(--radius) - 4px)", 58 | }, 59 | keyframes: { 60 | "accordion-down": { 61 | from: { height: 0 }, 62 | to: { height: "var(--radix-accordion-content-height)" }, 63 | }, 64 | "accordion-up": { 65 | from: { height: "var(--radix-accordion-content-height)" }, 66 | to: { height: 0 }, 67 | }, 68 | }, 69 | animation: { 70 | "accordion-down": "accordion-down 0.2s ease-out", 71 | "accordion-up": "accordion-up 0.2s ease-out", 72 | }, 73 | }, 74 | }, 75 | plugins: [require("tailwindcss-animate")], 76 | } -------------------------------------------------------------------------------- /components/pro-modal.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import axios from "axios"; 4 | import { useState } from "react"; 5 | import { Check, Zap } from "lucide-react"; 6 | import { toast } from "react-hot-toast"; 7 | 8 | import { 9 | Dialog, 10 | DialogContent, 11 | DialogHeader, 12 | DialogTitle, 13 | DialogDescription, 14 | DialogFooter 15 | } from "@/components/ui/dialog"; 16 | import { Badge } from "@/components/ui/badge"; 17 | import { Button } from "@/components/ui/button"; 18 | import { useProModal } from "@/hooks/use-pro-modal"; 19 | import { tools } from "@/constants"; 20 | import { Card } from "@/components/ui/card"; 21 | import { cn } from "@/lib/utils"; 22 | 23 | export const ProModal = () => { 24 | const proModal = useProModal(); 25 | const [loading, setLoading] = useState(false); 26 | 27 | const onSubscribe = async () => { 28 | try { 29 | setLoading(true); 30 | const response = await axios.get("/api/stripe"); 31 | 32 | window.location.href = response.data.url; 33 | } catch (error) { 34 | toast.error("Feature Coming Soon..."); 35 | } finally { 36 | setLoading(false); 37 | } 38 | } 39 | 40 | return ( 41 | 42 | 43 | 44 | 45 |
46 | Upgrade to Genius 47 | 48 | pro 49 | 50 |
51 | 52 | 53 | {tools.map((tool) => ( 54 | 55 |
56 |
57 | 58 |
59 |
60 | {tool.label} 61 |
62 |
63 | 64 | 65 | ))} 66 | 67 | 68 | 69 | 73 | 74 | 75 | 76 | ); 77 | }; 78 | -------------------------------------------------------------------------------- /components/sidebar.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Link from "next/link"; 4 | import Image from "next/image"; 5 | import { Montserrat } from 'next/font/google' 6 | import { Code, ImageIcon, LayoutDashboard, MessageSquare, Music, Settings, VideoIcon } from "lucide-react"; 7 | import { usePathname } from "next/navigation"; 8 | 9 | import { cn } from "@/lib/utils"; 10 | import { FreeCounter } from "@/components/free-counter"; 11 | 12 | const poppins = Montserrat ({ weight: '600', subsets: ['latin'] }); 13 | 14 | const routes = [ 15 | { 16 | label: 'Dashboard', 17 | icon: LayoutDashboard, 18 | href: '/dashboard', 19 | color: "text-sky-500" 20 | }, 21 | { 22 | label: 'Conversation', 23 | icon: MessageSquare, 24 | href: '/conversation', 25 | color: "text-violet-500", 26 | }, 27 | { 28 | label: 'Image Generation', 29 | icon: ImageIcon, 30 | color: "text-pink-700", 31 | href: '/image', 32 | }, 33 | { 34 | label: 'Video Generation', 35 | icon: VideoIcon, 36 | color: "text-orange-700", 37 | href: '/video', 38 | }, 39 | { 40 | label: 'Music Generation', 41 | icon: Music, 42 | color: "text-emerald-500", 43 | href: '/music', 44 | }, 45 | { 46 | label: 'Code Generation', 47 | icon: Code, 48 | color: "text-green-700", 49 | href: '/code', 50 | }, 51 | ]; 52 | 53 | export const Sidebar = ({ 54 | apiLimitCount = 0, 55 | isPro = false 56 | }: { 57 | apiLimitCount: number; 58 | isPro: boolean; 59 | }) => { 60 | const pathname = usePathname(); 61 | 62 | return ( 63 |
64 |
65 | 66 |
67 | Logo 68 |
69 |

70 | Genius 71 |

72 | 73 |
74 | {routes.map((route) => ( 75 | 83 |
84 | 85 | {route.label} 86 |
87 | 88 | ))} 89 |
90 |
91 | 95 |
96 | ); 97 | }; 98 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Genius AI (SaaS App) 2 | "Genius AI" is a versatile content generation platform powered by cutting-edge artificial intelligence technologies, enabling users to effortlessly create images, videos, music, code, and text chat with innovative AI-driven tools. 3 | 4 | ## Features: 5 | - **Multi-Content Generation**: Create images, videos, music, code, and text chat effortlessly with AI-powered tools. 6 | - **User-Friendly Interface**: An intuitive and responsive user interface designed for seamless content creation. 7 | - **AI Integration**: Harness the power of OpenAI and Replicate AI for diverse content generation. 8 | - **Efficient Data Management**: Optimize routing and direct database access for efficient data handling. 9 | - **Customizable**: Tailor the AI-generated content to meet your specific creative needs. 10 | - **Security**: Robust security measures to safeguard user data and privacy. 11 | - **Community Building**: Foster collaboration and innovation within the 'Genius AI' community. 12 | - **Accessibility**: Ongoing improvements to ensure inclusivity for users with disabilities. 13 | - **Educational Resources**: Access tutorials and educational modules for maximizing platform capabilities. 14 | 15 | ## Homepage 16 | ![1](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/f54a0298-dfe1-4cb5-bbd7-c67e2cb5487b) 17 | 18 | ## Login 19 | ![Login](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/6ebdc6e2-0d86-4475-a052-2afd8dbca850) 20 | 21 | ## Dashboard 22 | ![2](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/37c084a7-328b-4eba-a045-a8f4e4471d60) 23 | 24 | 25 | ## Generated Outputs 26 | ![3](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/de12efe2-8c9f-4869-9d7e-ba2e0694ccdc) 27 | 28 | ![4](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/fc0a0aa5-9668-43a4-a95a-2939ca426a4f) 29 | 30 | ![5](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/5cd91155-d7d4-4bd4-a02f-efae676ad1ae) 31 | 32 | ![3](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/cfdd2147-0b20-4c28-aca5-a20adea4b1f8) 33 | 34 | ![2](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/b1a78db5-1c6a-478f-ba94-168376021b23) 35 | 36 | ![1](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/80720691-d1c2-4d74-bf9e-d4346d7e9580) 37 | 38 | 39 | ![6](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/1b226a4b-48da-46e1-8016-8320eb3df1e9) 40 | 41 | ![7](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/762618f3-9107-480e-85bd-406baed3b8e0) 42 | 43 | ![8](https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/c3f52408-819b-4e44-a100-a32b64ca4267) 44 | 45 | ## Live Demo 46 | https://github.com/prabhjotschugh/Genius-AI-SaaS/assets/64200536/09876671-ada1-4647-9275-6c502bbc05b5 47 | 48 | 49 | To run the app - 50 | ## Install packages 51 | 52 | ```shell 53 | npm i 54 | ``` 55 | 56 | ## Setup .env file 57 | 58 | ```js 59 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= 60 | CLERK_SECRET_KEY= 61 | 62 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in 63 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up 64 | NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard 65 | NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard 66 | 67 | OPENAI_API_KEY= 68 | REPLICATE_API_TOKEN= 69 | 70 | DATABASE_URL= 71 | 72 | STRIPE_API_KEY= 73 | STRIPE_WEBHOOK_SECRET= 74 | 75 | NEXT_PUBLIC_APP_URL="http://localhost:3000" 76 | ``` 77 | 78 | ## Setup Prisma 79 | 80 | Add MySQL Database (I used MySQL Workbench) 81 | 82 | ```shell 83 | npx prisma db push 84 | npx prisma generate 85 | 86 | ``` 87 | 88 | ## Start the app 89 | 90 | ```shell 91 | npm run dev 92 | ``` 93 | -------------------------------------------------------------------------------- /app/(dashboard)/(routes)/music/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as z from "zod"; 4 | import axios from "axios"; 5 | import { useState } from "react"; 6 | import { zodResolver } from "@hookform/resolvers/zod"; 7 | import { useForm } from "react-hook-form"; 8 | import { toast } from "react-hot-toast"; 9 | import { useRouter } from "next/navigation"; 10 | import { Music, Send } from "lucide-react"; 11 | 12 | import { Heading } from "@/components/heading"; 13 | import { Button } from "@/components/ui/button"; 14 | import { Input } from "@/components/ui/input"; 15 | import { Form, FormControl, FormField, FormItem } from "@/components/ui/form"; 16 | import { Loader } from "@/components/loader"; 17 | import { Empty } from "@/components/ui/empty"; 18 | import { useProModal } from "@/hooks/use-pro-modal"; 19 | 20 | import { formSchema } from "./constants"; 21 | 22 | const MusicPage = () => { 23 | const proModal = useProModal(); 24 | const router = useRouter(); 25 | const [music, setMusic] = useState(); 26 | 27 | const form = useForm>({ 28 | resolver: zodResolver(formSchema), 29 | defaultValues: { 30 | prompt: "", 31 | } 32 | }); 33 | 34 | const isLoading = form.formState.isSubmitting; 35 | 36 | const onSubmit = async (values: z.infer) => { 37 | try { 38 | setMusic(undefined); 39 | 40 | const response = await axios.post('/api/music', values); 41 | console.log(response) 42 | 43 | setMusic(response.data.audio); 44 | form.reset(); 45 | } catch (error: any) { 46 | if (error?.response?.status === 403) { 47 | proModal.onOpen(); 48 | } else { 49 | toast.error("Something went wrong."); 50 | } 51 | } finally { 52 | router.refresh(); 53 | } 54 | } 55 | 56 | return ( 57 |
58 | 65 |
66 |
67 | 82 | ( 85 | 86 | 87 | 93 | 94 | 95 | )} 96 | /> 97 | 100 | 101 | 102 | {isLoading && ( 103 |
104 | 105 |
106 | )} 107 | {!music && !isLoading && ( 108 | 109 | )} 110 | {music && ( 111 | 114 | )} 115 |
116 |
117 | ); 118 | } 119 | 120 | export default MusicPage; 121 | -------------------------------------------------------------------------------- /app/(dashboard)/(routes)/video/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as z from "zod"; 4 | import axios from "axios"; 5 | import { useState } from "react"; 6 | import { zodResolver } from "@hookform/resolvers/zod"; 7 | import { useForm } from "react-hook-form"; 8 | import { toast } from "react-hot-toast"; 9 | import { FileAudio } from "lucide-react"; 10 | import { useRouter } from "next/navigation"; 11 | 12 | import { Heading } from "@/components/heading"; 13 | import { Button } from "@/components/ui/button"; 14 | import { Input } from "@/components/ui/input"; 15 | import { Form, FormControl, FormField, FormItem } from "@/components/ui/form"; 16 | import { Loader } from "@/components/loader"; 17 | import { Empty } from "@/components/ui/empty"; 18 | import { useProModal } from "@/hooks/use-pro-modal"; 19 | 20 | import { formSchema } from "./constants"; 21 | 22 | const VideoPage = () => { 23 | const router = useRouter(); 24 | const proModal = useProModal(); 25 | const [video, setVideo] = useState(); 26 | 27 | const form = useForm>({ 28 | resolver: zodResolver(formSchema), 29 | defaultValues: { 30 | prompt: "", 31 | } 32 | }); 33 | 34 | const isLoading = form.formState.isSubmitting; 35 | 36 | const onSubmit = async (values: z.infer) => { 37 | try { 38 | setVideo(undefined); 39 | 40 | const response = await axios.post('/api/video', values); 41 | 42 | setVideo(response.data[0]); 43 | form.reset(); 44 | } catch (error: any) { 45 | if (error?.response?.status === 403) { 46 | proModal.onOpen(); 47 | } else { 48 | toast.error("Something went wrong."); 49 | } 50 | } finally { 51 | router.refresh(); 52 | } 53 | } 54 | 55 | return ( 56 |
57 | 64 |
65 |
66 | 81 | ( 84 | 85 | 86 | 92 | 93 | 94 | )} 95 | /> 96 | 99 | 100 | 101 | {isLoading && ( 102 |
103 | 104 |
105 | )} 106 | {!video && !isLoading && ( 107 | 108 | )} 109 | {video && ( 110 | 113 | )} 114 |
115 |
116 | ); 117 | } 118 | 119 | export default VideoPage; 120 | -------------------------------------------------------------------------------- /components/ui/dialog.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as DialogPrimitive from "@radix-ui/react-dialog" 5 | import { X } from "lucide-react" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const Dialog = DialogPrimitive.Root 10 | 11 | const DialogTrigger = DialogPrimitive.Trigger 12 | 13 | const DialogPortal = ({ 14 | className, 15 | ...props 16 | }: DialogPrimitive.DialogPortalProps) => ( 17 | 18 | ) 19 | DialogPortal.displayName = DialogPrimitive.Portal.displayName 20 | 21 | const DialogOverlay = React.forwardRef< 22 | React.ElementRef, 23 | React.ComponentPropsWithoutRef 24 | >(({ className, ...props }, ref) => ( 25 | 33 | )) 34 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName 35 | 36 | const DialogContent = React.forwardRef< 37 | React.ElementRef, 38 | React.ComponentPropsWithoutRef 39 | >(({ className, children, ...props }, ref) => ( 40 | 41 | 42 | 50 | {children} 51 | 52 | 53 | Close 54 | 55 | 56 | 57 | )) 58 | DialogContent.displayName = DialogPrimitive.Content.displayName 59 | 60 | const DialogHeader = ({ 61 | className, 62 | ...props 63 | }: React.HTMLAttributes) => ( 64 |
71 | ) 72 | DialogHeader.displayName = "DialogHeader" 73 | 74 | const DialogFooter = ({ 75 | className, 76 | ...props 77 | }: React.HTMLAttributes) => ( 78 |
85 | ) 86 | DialogFooter.displayName = "DialogFooter" 87 | 88 | const DialogTitle = React.forwardRef< 89 | React.ElementRef, 90 | React.ComponentPropsWithoutRef 91 | >(({ className, ...props }, ref) => ( 92 | 100 | )) 101 | DialogTitle.displayName = DialogPrimitive.Title.displayName 102 | 103 | const DialogDescription = React.forwardRef< 104 | React.ElementRef, 105 | React.ComponentPropsWithoutRef 106 | >(({ className, ...props }, ref) => ( 107 | 112 | )) 113 | DialogDescription.displayName = DialogPrimitive.Description.displayName 114 | 115 | export { 116 | Dialog, 117 | DialogTrigger, 118 | DialogContent, 119 | DialogHeader, 120 | DialogFooter, 121 | DialogTitle, 122 | DialogDescription, 123 | } 124 | -------------------------------------------------------------------------------- /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 } 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, 17 | React.ComponentPropsWithoutRef 18 | >(({ className, children, ...props }, ref) => ( 19 | 27 | {children} 28 | 29 | 30 | 31 | 32 | )) 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName 34 | 35 | const SelectContent = React.forwardRef< 36 | React.ElementRef, 37 | React.ComponentPropsWithoutRef 38 | >(({ className, children, position = "popper", ...props }, ref) => ( 39 | 40 | 51 | 58 | {children} 59 | 60 | 61 | 62 | )) 63 | SelectContent.displayName = SelectPrimitive.Content.displayName 64 | 65 | const SelectLabel = React.forwardRef< 66 | React.ElementRef, 67 | React.ComponentPropsWithoutRef 68 | >(({ className, ...props }, ref) => ( 69 | 74 | )) 75 | SelectLabel.displayName = SelectPrimitive.Label.displayName 76 | 77 | const SelectItem = React.forwardRef< 78 | React.ElementRef, 79 | React.ComponentPropsWithoutRef 80 | >(({ className, children, ...props }, ref) => ( 81 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | {children} 96 | 97 | )) 98 | SelectItem.displayName = SelectPrimitive.Item.displayName 99 | 100 | const SelectSeparator = React.forwardRef< 101 | React.ElementRef, 102 | React.ComponentPropsWithoutRef 103 | >(({ className, ...props }, ref) => ( 104 | 109 | )) 110 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName 111 | 112 | export { 113 | Select, 114 | SelectGroup, 115 | SelectValue, 116 | SelectTrigger, 117 | SelectContent, 118 | SelectLabel, 119 | SelectItem, 120 | SelectSeparator, 121 | } 122 | -------------------------------------------------------------------------------- /components/ui/form.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as LabelPrimitive from "@radix-ui/react-label" 3 | import { Slot } from "@radix-ui/react-slot" 4 | import { 5 | Controller, 6 | ControllerProps, 7 | FieldPath, 8 | FieldValues, 9 | FormProvider, 10 | useFormContext, 11 | } from "react-hook-form" 12 | 13 | import { cn } from "@/lib/utils" 14 | import { Label } from "@/components/ui/label" 15 | 16 | const Form = FormProvider 17 | 18 | type FormFieldContextValue< 19 | TFieldValues extends FieldValues = FieldValues, 20 | TName extends FieldPath = FieldPath 21 | > = { 22 | name: TName 23 | } 24 | 25 | const FormFieldContext = React.createContext( 26 | {} as FormFieldContextValue 27 | ) 28 | 29 | const FormField = < 30 | TFieldValues extends FieldValues = FieldValues, 31 | TName extends FieldPath = FieldPath 32 | >({ 33 | ...props 34 | }: ControllerProps) => { 35 | return ( 36 | 37 | 38 | 39 | ) 40 | } 41 | 42 | const useFormField = () => { 43 | const fieldContext = React.useContext(FormFieldContext) 44 | const itemContext = React.useContext(FormItemContext) 45 | const { getFieldState, formState } = useFormContext() 46 | 47 | const fieldState = getFieldState(fieldContext.name, formState) 48 | 49 | if (!fieldContext) { 50 | throw new Error("useFormField should be used within ") 51 | } 52 | 53 | const { id } = itemContext 54 | 55 | return { 56 | id, 57 | name: fieldContext.name, 58 | formItemId: `${id}-form-item`, 59 | formDescriptionId: `${id}-form-item-description`, 60 | formMessageId: `${id}-form-item-message`, 61 | ...fieldState, 62 | } 63 | } 64 | 65 | type FormItemContextValue = { 66 | id: string 67 | } 68 | 69 | const FormItemContext = React.createContext( 70 | {} as FormItemContextValue 71 | ) 72 | 73 | const FormItem = React.forwardRef< 74 | HTMLDivElement, 75 | React.HTMLAttributes 76 | >(({ className, ...props }, ref) => { 77 | const id = React.useId() 78 | 79 | return ( 80 | 81 |
82 | 83 | ) 84 | }) 85 | FormItem.displayName = "FormItem" 86 | 87 | const FormLabel = React.forwardRef< 88 | React.ElementRef, 89 | React.ComponentPropsWithoutRef 90 | >(({ className, ...props }, ref) => { 91 | const { error, formItemId } = useFormField() 92 | 93 | return ( 94 |