├── .eslintrc.json
├── .gitignore
├── README.md
├── components
    ├── AppLayout
    │   ├── AppLayout.js
    │   └── index.js
    └── Logo
    │   ├── Logo.js
    │   └── index.js
├── context
    └── postsContext.js
├── hooks
    └── useCopyButton.js
├── lib
    └── mongodb.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── api
    │   ├── addTokens.js
    │   ├── auth
    │   │   └── [...auth0].js
    │   ├── deletePost.js
    │   ├── generatePost.js
    │   ├── getPosts.js
    │   └── webhooks
    │   │   └── stripe.js
    ├── index.js
    ├── post
    │   ├── [postId].js
    │   └── new.js
    ├── success.js
    └── token-topup.js
├── postcss.config.js
├── public
    ├── brainium.svg
    ├── favicon.ico
    └── favicon.png
├── styles
    └── globals.css
├── tailwind.config.js
└── utils
    └── getAppProps.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
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 | 
 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 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # video
35 | *.mp4


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Brainium
 2 | 
 3 | Brainium is a full-stack, AI-powered SAAS blog generator that uses GPT-3 to generate SEO-optimized blog posts instantly. Currently, Brainium is in beta and is only available to a limited number of users. If you would like to be notified when Brainium is available to the public, please sign up for our [waitlist](https://brainium.app/).
 4 | 
 5 | Brainium built with:
 6 | 
 7 | - [Next.js](https://nextjs.org/)
 8 | - [React](https://reactjs.org/)
 9 | - [Tailwind CSS](https://tailwindcss.com/)
10 | - [MongoDB](https://www.mongodb.com/)
11 | - [Auth0](https://auth0.com/)
12 | - [GPT-3](https://openai.com/blog/openai-api/)
13 | - [Stripe](https://stripe.com/)
14 | - [AWS](https://aws.amazon.com/)
15 | - [OpenAI](https://openai.com/)
16 | - [Micro Cors](https://github.com/possibilities/micro-cors)
17 | - [Font Awesome](https://fontawesome.com/)
18 | 


--------------------------------------------------------------------------------
/components/AppLayout/AppLayout.js:
--------------------------------------------------------------------------------
  1 | import Image from "next/image";
  2 | import Link from "next/link";
  3 | import PostsContext from "../../context/postsContext";
  4 | import { useUser } from "@auth0/nextjs-auth0/client";
  5 | import React, { useContext, useEffect, useState } from "react";
  6 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  7 | import { faCoins } from "@fortawesome/free-solid-svg-icons";
  8 | import { Logo } from "../Logo";
  9 | 
 10 | export const AppLayout = ({
 11 |   children,
 12 |   availableTokens,
 13 |   posts: postsFromSSR,
 14 |   postId,
 15 |   postCreated,
 16 | }) => {
 17 |   const { user } = useUser();
 18 | 
 19 |   const [isMobile, setIsMobile] = useState(false);
 20 | 
 21 |   const { setPostsFromSSR, posts, getPosts, noMorePosts } =
 22 |     useContext(PostsContext);
 23 | 
 24 |   useEffect(() => {
 25 |     setPostsFromSSR(postsFromSSR);
 26 | 
 27 |     if (postId) {
 28 |       const exists = postsFromSSR.find((post) => post._id === postId);
 29 |       if (!exists) {
 30 |         getPosts({ getNewerPosts: true, lastPostDate: postCreated });
 31 |       }
 32 |     }
 33 |   }, [postsFromSSR, setPostsFromSSR, postId, getPosts, postCreated]);
 34 | 
 35 |   const PostCard = ({ post }) => {
 36 |     return (
 37 |       <Link
 38 |         key={post?._id}
 39 |         href={`/post/${post?._id}`}
 40 |         className={`py-1 border border-white/0 block text-ellipsis overflow-hidden whitespace-nowrap my-1 px-2 bg-white/10 cursor-pointer rounded-sm ${
 41 |           postId === post?._id ? "bg-white/20 border-white" : ""
 42 |         }`}
 43 |       >
 44 |         {post?.topic}
 45 |       </Link>
 46 |     );
 47 |   };
 48 | 
 49 |   // isMobile state
 50 |   useEffect(() => {
 51 |     const handleResize = () => {
 52 |       if (window.innerWidth < 768) {
 53 |         setIsMobile(true);
 54 |       } else {
 55 |         setIsMobile(false);
 56 |       }
 57 |     };
 58 | 
 59 |     window.addEventListener("resize", handleResize);
 60 |     handleResize();
 61 |     return () => window.removeEventListener("resize", handleResize);
 62 |   }, []);
 63 | 
 64 |   const MOBILE_VIEW = (
 65 |     <aside className="h-screen relative">
 66 |       <main className="h-full overflow-y-auto">
 67 |         {/* Header Container - 1x */}
 68 |         <div className="text-center justify-center items-center">
 69 |           <section className="flex flex-col text-white overflow-hidden">
 70 |             <div className="bg-slate-800 px-2">
 71 |               <header className="flex flex-row justify-between items-center">
 72 |                 <Logo />
 73 |                 <div className="bg-slate-800 flex items-center gap-2 h-20 px-2 align-center">
 74 |                   {!!user ? (
 75 |                     <>
 76 |                       <Link
 77 |                         href="/api/auth/logout"
 78 |                         className="block px-4 py-2 text-sm text-right text-gray-600 hover:bg-gray-100 hover:text-gray-900"
 79 |                         role="menuitem"
 80 |                       >
 81 |                         <div className="flex">
 82 |                           <Image
 83 |                             src={user?.picture}
 84 |                             alt={user?.name}
 85 |                             height={20}
 86 |                             width={20}
 87 |                             className="w-7 h-7 mr-2 rounded-full"
 88 |                           />
 89 |                           <p className="text-xs">{user?.name}</p>
 90 |                         </div>
 91 |                         Sign out
 92 |                       </Link>
 93 |                     </>
 94 |                   ) : (
 95 |                     <Link href="/api/auth/login" className="btn">
 96 |                       Login
 97 |                     </Link>
 98 |                   )}
 99 |                 </div>
100 |               </header>
101 | 
102 |               <div>
103 |                 <div className="flex flex-col text-white overflow-hidden">
104 |                   <div className="bg-slate-800 py-2">
105 |                     <Link href="/post/new" className="btn">
106 |                       New post
107 |                     </Link>
108 |                     <Link
109 |                       href="/token-topup"
110 |                       className="block mt-2 text-center"
111 |                     >
112 |                       <FontAwesomeIcon
113 |                         icon={faCoins}
114 |                         className="text-yellow-500"
115 |                       />
116 |                       <span className="pl-1">
117 |                         {availableTokens} tokens avaliable
118 |                       </span>
119 |                     </Link>
120 |                   </div>
121 |                 </div>
122 |               </div>
123 |             </div>
124 |           </section>
125 |         </div>
126 | 
127 |         {/* Child Container - 2x */}
128 |         <div className="flex text-center justify-center items-center">
129 |           <section id="children__props" className="flex-1">
130 |             {children
131 |               ? React.cloneElement(children, { availableTokens })
132 |               : null}
133 |           </section>
134 |         </div>
135 | 
136 |         {/* Posts Container - 1x */}
137 |         <div className="text-center justify-center items-center w-full max-h-[132px] overflow-y-auto absolute bottom-0 z-50">
138 |           <main className="bg-gray-800 text-white shadow-xl w-full content-center overflow-auto">
139 |             {posts.map((post) => (
140 |               <PostCard post={post} key={post._id} />
141 |             ))}
142 |             {!noMorePosts && (
143 |               <div
144 |                 onClick={() =>
145 |                   getPosts({
146 |                     lastPostDate: posts[posts.length - 1]?.created,
147 |                   })
148 |                 }
149 |                 className="hover:underline text-sm text-slate-400 text-center cursor-pointer m-4"
150 |               >
151 |                 {posts.length === 0 ? "No Posts" : "Load more posts"}
152 |               </div>
153 |             )}
154 |           </main>
155 |         </div>
156 |       </main>
157 |     </aside>
158 |   );
159 | 
160 |   const DESKTOP_VIEW = (
161 |     <aside className="grid grid-cols-[300px_1fr] h-screen max-h-screen">
162 |       {/* Sidebar Container - 1x */}
163 |       <section className="flex flex-col text-white overflow-hidden">
164 |         <div className="bg-slate-800 px-2">
165 |           <Logo />
166 |           <Link href="/post/new" className="btn">
167 |             New post
168 |           </Link>
169 |           <Link href="/token-topup" className="block mt-2 text-center">
170 |             <FontAwesomeIcon icon={faCoins} className="text-yellow-500" />
171 |             <span className="pl-1">{availableTokens} tokens avaliable</span>
172 |           </Link>
173 |         </div>
174 |         <main className="px-4 flex-1 overflow-auto bg-gradient-to-b from-slate-800 to-[#8dadbe]">
175 |           {posts.map((post) => (
176 |             <PostCard post={post} key={post._id} />
177 |           ))}
178 |           {!noMorePosts && (
179 |             <div
180 |               onClick={() =>
181 |                 getPosts({
182 |                   lastPostDate: posts[posts.length - 1]?.created,
183 |                 })
184 |               }
185 |               className="hover:underline text-sm text-slate-400 text-center cursor-pointer mt-4"
186 |             >
187 |               Load more posts
188 |             </div>
189 |           )}
190 |         </main>
191 |         <div className="bg-[#8dadbe] flex items-center gap-2 border-t border-t-black/50 h-20 px-2">
192 |           {!!user ? (
193 |             <>
194 |               <div className="min-w-[50px]">
195 |                 <Image
196 |                   src={user?.picture}
197 |                   alt={user?.name}
198 |                   height={50}
199 |                   width={50}
200 |                   className="rounded-full"
201 |                 />
202 |               </div>
203 |               <div className="flex-1">
204 |                 <div className="font-bold">{user?.email}</div>
205 |                 <Link href="/api/auth/logout" className="text-sm">
206 |                   Logout
207 |                 </Link>
208 |               </div>
209 |             </>
210 |           ) : (
211 |             <Link href="/api/auth/login">Login</Link>
212 |           )}
213 |         </div>
214 |       </section>
215 | 
216 |       {/* Child Container - 1x */}
217 |       {children ? React.cloneElement(children, { availableTokens }) : null}
218 |     </aside>
219 |   );
220 | 
221 |   return <>{isMobile ? MOBILE_VIEW : DESKTOP_VIEW}</>;
222 | };
223 | 


--------------------------------------------------------------------------------
/components/AppLayout/index.js:
--------------------------------------------------------------------------------
1 | export * from "./AppLayout";
2 | 


--------------------------------------------------------------------------------
/components/Logo/Logo.js:
--------------------------------------------------------------------------------
 1 | import { faBrain } from "@fortawesome/free-solid-svg-icons";
 2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 3 | import { useState } from "react";
 4 | 
 5 | export const Logo = () => {
 6 |   const [effect, setEffect] = useState(false);
 7 | 
 8 |   return (
 9 |     <div className="text-3xl text-center py-4 font-heading">
10 |       Brainium {""}
11 |       <FontAwesomeIcon
12 |         icon={faBrain}
13 |         type="button"
14 |         className={`${
15 |           effect && "animate-wiggle"
16 |         } text-2xl text-slate-400 cursor-pointer animate-pulse hover:scale-125 transition-transform duration-300 ease-in-out`}
17 |         onClick={() => {
18 |           setEffect(true);
19 |         }}
20 |         onAnimationEnd={() => setEffect(false)}
21 |       />
22 |     </div>
23 |   );
24 | };
25 | 


--------------------------------------------------------------------------------
/components/Logo/index.js:
--------------------------------------------------------------------------------
1 | export * from "./Logo";
2 | 


--------------------------------------------------------------------------------
/context/postsContext.js:
--------------------------------------------------------------------------------
 1 | import { createContext, useCallback, useReducer, useState } from "react";
 2 | 
 3 | const PostsContext = createContext({});
 4 | 
 5 | export default PostsContext;
 6 | 
 7 | function postsReducer(state, action) {
 8 |   switch (action.type) {
 9 |     case "addPost": {
10 |       const newPosts = [...state];
11 |       action.posts.forEach((post) => {
12 |         const exists = newPosts.find((p) => p._id === post._id);
13 |         if (!exists) {
14 |           newPosts.push(post);
15 |         }
16 |       });
17 |       return newPosts;
18 |     }
19 | 
20 |     case "deletePost": {
21 |       const newPosts = [];
22 |       state.forEach((post) => {
23 |         if (post._id !== action.postId) {
24 |           newPosts.push(post);
25 |         }
26 |       });
27 |       return newPosts;
28 |     }
29 |     default:
30 |       return state;
31 |   }
32 | }
33 | 
34 | export const PostsProvider = ({ children }) => {
35 |   const [posts, dispatch] = useReducer(postsReducer, []);
36 |   const [noMorePosts, setNoMorePosts] = useState(false);
37 | 
38 |   const deletePost = useCallback((postId) => {
39 |     dispatch({ type: "deletePost", postId });
40 |   }, []);
41 | 
42 |   const setPostsFromSSR = useCallback((postsFromSSR = []) => {
43 |     dispatch({ type: "addPost", posts: postsFromSSR });
44 |   }, []);
45 | 
46 |   const getPosts = useCallback(
47 |     async ({ lastPostDate, getNewerPosts = false }) => {
48 |       const result = await fetch("/api/getPosts", {
49 |         method: "POST",
50 |         headers: {
51 |           "Content-Type": "application/json",
52 |         },
53 |         body: JSON.stringify({
54 |           lastPostDate,
55 |           getNewerPosts,
56 |         }),
57 |       });
58 | 
59 |       const json = await result.json();
60 |       const postsResult = json?.posts || [];
61 |       if (postsResult.length < 5) {
62 |         setNoMorePosts(true);
63 |       }
64 | 
65 |       dispatch({ type: "addPost", posts: postsResult });
66 |     },
67 |     []
68 |   );
69 | 
70 |   return (
71 |     <PostsContext.Provider
72 |       value={{
73 |         posts,
74 |         setPostsFromSSR,
75 |         getPosts,
76 |         noMorePosts,
77 |         deletePost,
78 |       }}
79 |     >
80 |       {children}
81 |     </PostsContext.Provider>
82 |   );
83 | };
84 | 


--------------------------------------------------------------------------------
/hooks/useCopyButton.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   faClipboard,
 3 |   faClipboardCheck,
 4 | } from "@fortawesome/free-solid-svg-icons";
 5 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 6 | import React, { useState } from "react";
 7 | 
 8 | export const useCopyButton = () => {
 9 |   const [copied, setCopied] = useState(false);
10 | 
11 |   const copyPost = () => {
12 |     setCopied((prev) => !prev);
13 |     console.log("Copied post to clipboard");
14 |   };
15 | 
16 |   return (
17 |     <button onClick={() => copyPost()}>
18 |       <div className="text-sm font-bold p-2 bg-stone-200 rounded-sm">
19 |         {copied ? (
20 |           <FontAwesomeIcon icon={faClipboardCheck}></FontAwesomeIcon>
21 |         ) : (
22 |           <FontAwesomeIcon icon={faClipboard}></FontAwesomeIcon>
23 |         )}
24 |       </div>
25 |     </button>
26 |   );
27 | };
28 | 


--------------------------------------------------------------------------------
/lib/mongodb.js:
--------------------------------------------------------------------------------
 1 | import { MongoClient } from "mongodb";
 2 | 
 3 | if (!process.env.MONGODB_URI) {
 4 |   throw new Error('Invalid/Missing environment variable: "MONGODB_URI"');
 5 | }
 6 | 
 7 | const uri = process.env.MONGODB_URI;
 8 | 
 9 | let client;
10 | let clientPromise;
11 | 
12 | if (process.env.NODE_ENV === "development") {
13 |   // In development mode, use a global variable so that the value
14 |   // is preserved across module reloads caused by HMR (Hot Module Replacement).
15 |   if (!global._mongoClientPromise) {
16 |     client = new MongoClient(uri);
17 |     global._mongoClientPromise = client.connect();
18 |   }
19 |   clientPromise = global._mongoClientPromise;
20 | } else {
21 |   // In production mode, it's best to not use a global variable.
22 |   client = new MongoClient(uri);
23 |   clientPromise = client.connect();
24 | 
25 |   console.log(`\nMongoDB connected: ${uri}`);
26 | }
27 | 
28 | // Export a module-scoped MongoClient promise. By doing this in a
29 | // separate module, the client can be shared across functions.
30 | export default clientPromise;
31 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   images: {
 5 |     domains: ["lh3.googleusercontent.com", "s.gravatar.com"],
 6 |   },
 7 | };
 8 | 
 9 | module.exports = nextConfig;
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-openai-starter",
 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 |   },
11 |   "dependencies": {
12 |     "@auth0/nextjs-auth0": "^2.2.1",
13 |     "@fortawesome/fontawesome-svg-core": "^6.2.1",
14 |     "@fortawesome/free-solid-svg-icons": "^6.2.1",
15 |     "@fortawesome/react-fontawesome": "^0.2.0",
16 |     "@next/font": "^13.1.6",
17 |     "@webdeveducation/next-verify-stripe": "^1.0.1",
18 |     "copy-text-to-clipboard": "^3.1.0",
19 |     "micro-cors": "^0.1.1",
20 |     "mongodb": "^4.13.0",
21 |     "next": "13.1.6",
22 |     "numeral": "^2.0.6",
23 |     "openai": "^3.1.0",
24 |     "react": "18.2.0",
25 |     "react-dom": "18.2.0",
26 |     "stripe": "^11.8.0"
27 |   },
28 |   "devDependencies": {
29 |     "autoprefixer": "^10.4.13",
30 |     "eslint": "8.33.0",
31 |     "eslint-config-next": "13.1.6",
32 |     "postcss": "^8.4.21",
33 |     "tailwindcss": "^3.2.4"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import "../styles/globals.css";
 2 | import { UserProvider } from "@auth0/nextjs-auth0/client";
 3 | import { PostsProvider } from "../context/postsContext";
 4 | import { DM_Sans, DM_Serif_Display } from "@next/font/google";
 5 | import "@fortawesome/fontawesome-svg-core/styles.css";
 6 | import { config } from "@fortawesome/fontawesome-svg-core";
 7 | config.autoAddCss = false;
 8 | 
 9 | const dmSans = DM_Sans({
10 |   weight: ["400", "500", "700"],
11 |   subsets: ["latin"],
12 |   variable: "--font-dm-sans",
13 | });
14 | 
15 | const dmSerifDisplay = DM_Serif_Display({
16 |   weight: ["400"],
17 |   subsets: ["latin"],
18 |   variable: "--font-dm-serif",
19 | });
20 | 
21 | function MyApp({ Component, pageProps }) {
22 |   const getLayout = Component.getLayout || ((page) => page);
23 | 
24 |   return (
25 |     <UserProvider>
26 |       <PostsProvider>
27 |         <main
28 |           id="main__content"
29 |           className={`${dmSans.variable} ${dmSerifDisplay.variable} font-body h-full`}
30 |         >
31 |           {getLayout(<Component {...pageProps} />, pageProps)}
32 |         </main>
33 |       </PostsProvider>
34 |     </UserProvider>
35 |   );
36 | }
37 | 
38 | export default MyApp;
39 | 


--------------------------------------------------------------------------------
/pages/api/addTokens.js:
--------------------------------------------------------------------------------
 1 | import { getSession } from "@auth0/nextjs-auth0";
 2 | import stripeInit from "stripe";
 3 | 
 4 | const stripe = stripeInit(process.env.STRIPE_SECRET_KEY);
 5 | 
 6 | export default async function handler(req, res) {
 7 |   const { user } = await getSession(req, res);
 8 | 
 9 |   const lineItems = [
10 |     {
11 |       price: process.env.STRIPE_PRODUCT_PRICE_ID,
12 |       quantity: 1,
13 |     },
14 |   ];
15 | 
16 |   const protocol =
17 |     process.env.NODE_ENV === "development" ? "http://" : "https://";
18 |   const host = req.headers.host;
19 | 
20 |   const checkoutSession = await stripe.checkout.sessions.create({
21 |     line_items: lineItems,
22 |     mode: "payment",
23 |     success_url: `${protocol}${host}/success`,
24 |     payment_intent_data: {
25 |       metadata: {
26 |         sub: user?.sub,
27 |       },
28 |     },
29 |     metadata: {
30 |       sub: user?.sub,
31 |     },
32 |   });
33 | 
34 |   console.log("\nUser: ", user);
35 | 
36 |   res.status(200).json({ session: checkoutSession });
37 | }
38 | 


--------------------------------------------------------------------------------
/pages/api/auth/[...auth0].js:
--------------------------------------------------------------------------------
1 | import { handleAuth } from "@auth0/nextjs-auth0";
2 | 
3 | export default handleAuth();
4 | 


--------------------------------------------------------------------------------
/pages/api/deletePost.js:
--------------------------------------------------------------------------------
 1 | import { getSession, withApiAuthRequired } from "@auth0/nextjs-auth0";
 2 | import { ObjectId } from "mongodb";
 3 | import clientPromise from "../../lib/mongodb";
 4 | 
 5 | export default withApiAuthRequired(async function handler(req, res) {
 6 |   try {
 7 |     const {
 8 |       user: { sub },
 9 |     } = await getSession(req, res);
10 |     const client = await clientPromise;
11 |     const db = client.db("AI-Blog-Generator");
12 |     const userProfile = await db.collection("users").findOne({
13 |       auth0Id: sub,
14 |     });
15 | 
16 |     const { postId } = req.body;
17 | 
18 |     await db.collection("posts").deleteOne({
19 |       userId: userProfile?._id,
20 |       _id: new ObjectId(postId),
21 |     });
22 | 
23 |     res
24 |       .status(200)
25 |       .json({
26 |         success: true,
27 |         message: `Post deleted for user ${userProfile?.email}`,
28 |       });
29 |   } catch (error) {
30 |     console.error("\nERROR TRYING TO DELETE A POST:", error);
31 |   }
32 | });
33 | 


--------------------------------------------------------------------------------
/pages/api/generatePost.js:
--------------------------------------------------------------------------------
 1 | import { getSession, withApiAuthRequired } from "@auth0/nextjs-auth0";
 2 | import { Configuration, OpenAIApi } from "openai";
 3 | import clientPromise from "../../lib/mongodb";
 4 | 
 5 | export default withApiAuthRequired(async function handler(req, res) {
 6 |   const { user } = await getSession(req, res);
 7 |   const client = await clientPromise;
 8 |   const db = client.db("AI-Blog-Generator");
 9 |   const userProfile = await db.collection("users").findOne({
10 |     auth0Id: user?.sub,
11 |   });
12 | 
13 |   if (!userProfile?.availableTokens) {
14 |     res.status(403);
15 |     return;
16 |   }
17 | 
18 |   const config = new Configuration({
19 |     apiKey: process.env.OPENAI_API_KEY,
20 |   });
21 | 
22 |   const openai = new OpenAIApi(config);
23 | 
24 |   const { topic, keywords } = req.body;
25 | 
26 |   if (!topic || !keywords) {
27 |     res.status(422).json({
28 |       success: false,
29 |       error: "Missing topic or keywords",
30 |     });
31 |   }
32 | 
33 |   if (topic.length > 80 || keywords.length > 80) {
34 |     res.status(422).json({
35 |       success: false,
36 |       error: "Topic or keywords are too long",
37 |     });
38 |   }
39 | 
40 |   const response = await openai.createCompletion({
41 |     model: "text-davinci-003",
42 |     temperature: 0, // 0 = no creativity, 1 = very creative
43 |     max_tokens: 3600,
44 |     prompt: `Write a long and detailed SEO-friendly blog about ${topic}, that targets the following comma-separated keywords: ${keywords}. 
45 |     The content should formatted in SEO-friendly HTML. 
46 |     The response must also include appropriate HTML title and meta description content.
47 |     The return format must be stringified JSON in the following format:
48 |     {
49 |       "postContent: post content here
50 |       "title": title goes here,
51 |       "metaDescription": meta description goes here
52 |     }`,
53 |   });
54 | 
55 |   console.log("\nRESPONSE", response);
56 | 
57 |   await db.collection("users").updateOne(
58 |     {
59 |       auth0Id: user?.sub,
60 |     },
61 |     {
62 |       $inc: {
63 |         availableTokens: -1,
64 |       },
65 |     }
66 |   );
67 | 
68 |   const parsed = JSON.parse(
69 |     response.data.choices[0]?.text.split("\n").join("")
70 |   );
71 | 
72 |   const post = await db.collection("posts").insertOne({
73 |     postContent: parsed?.postContent,
74 |     title: parsed?.title,
75 |     metaDescription: parsed?.metaDescription,
76 |     topic,
77 |     keywords,
78 |     userId: userProfile?._id,
79 |     created: new Date(),
80 |   });
81 | 
82 |   console.log("\nPOST", post);
83 | 
84 |   res.status(200).json({
85 |     postId: post?.insertedId,
86 |   });
87 | });
88 | 


--------------------------------------------------------------------------------
/pages/api/getPosts.js:
--------------------------------------------------------------------------------
 1 | import { getSession, withApiAuthRequired } from "@auth0/nextjs-auth0";
 2 | import clientPromise from "../../lib/mongodb";
 3 | 
 4 | export default withApiAuthRequired(async function handler(req, res) {
 5 |   try {
 6 |     const {
 7 |       user: { sub },
 8 |     } = await getSession(req, res);
 9 |     const client = await clientPromise;
10 |     const db = client.db("AI-Blog-Generator");
11 |     const userProfile = await db.collection("users").findOne({
12 |       auth0Id: sub,
13 |     });
14 | 
15 |     const { lastPostDate, getNewerPosts } = req.body;
16 | 
17 |     const posts = await db
18 |       .collection("posts")
19 |       .find({
20 |         userId: userProfile?._id,
21 |         created: { [getNewerPosts ? "$gt" : "$lt"]: new Date(lastPostDate) },
22 |       })
23 |       .limit(getNewerPosts ? 0 : 5)
24 |       .sort({ created: -1 })
25 |       .toArray();
26 | 
27 |     res.status(200).json({
28 |       posts,
29 |     });
30 |   } catch (error) {
31 |     console.error("\nERROR:", error);
32 |     res.status(500).json({ success: false, message: error.message });
33 |   }
34 | });
35 | 


--------------------------------------------------------------------------------
/pages/api/webhooks/stripe.js:
--------------------------------------------------------------------------------
 1 | import Cors from "micro-cors";
 2 | import stripeInit from "stripe";
 3 | import verifyStripe from "@webdeveducation/next-verify-stripe";
 4 | import clientPromise from "../../../lib/mongodb";
 5 | 
 6 | const cors = Cors({
 7 |   allowMethods: ["POST", "HEAD"],
 8 | });
 9 | 
10 | export const config = {
11 |   api: {
12 |     bodyParser: false,
13 |   },
14 | };
15 | 
16 | const stripe = stripeInit(process.env.STRIPE_SECRET_KEY);
17 | const endpointSecret = process.env.STRIPE_WEBHOOK_SECRET;
18 | 
19 | const handler = async (req, res) => {
20 |   if (req.method === "POST") {
21 |     let event;
22 | 
23 |     try {
24 |       event = await verifyStripe({
25 |         req,
26 |         stripe,
27 |         endpointSecret,
28 |       });
29 |     } catch (error) {
30 |       console.error("\nERROR: ", error);
31 |     }
32 | 
33 |     switch (event.type) {
34 |       case "payment_intent.succeeded": {
35 |         const client = await clientPromise;
36 |         const db = client.db("AI-Blog-Generator");
37 | 
38 |         const paymentIntent = event?.data?.object;
39 |         const auth0Id = paymentIntent?.metadata?.sub;
40 | 
41 |         console.log("\nAUTH 0 ID: ", paymentIntent);
42 | 
43 |         const userProfile = await db.collection("users").updateOne(
44 |           {
45 |             auth0Id,
46 |           },
47 |           {
48 |             $inc: {
49 |               availableTokens: 20,
50 |             },
51 |             $setOnInsert: {
52 |               auth0Id,
53 |             },
54 |           },
55 |           {
56 |             upsert: true,
57 |           }
58 |         );
59 |       }
60 |       default:
61 |         console.error(`\nUnhandled event type: ${event.type}`);
62 |     }
63 |     res.status(200).json({ received: true });
64 |   }
65 | };
66 | 
67 | export default cors(handler);
68 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { useEffect, useState } from "react";
 3 | import { Logo } from "../components/Logo";
 4 | 
 5 | export default function Home() {
 6 |   const [isMobile, setIsMobile] = useState(false);
 7 | 
 8 |   const VIDEO_SOURCE = (
 9 |     <video
10 |       aria-hidden="true"
11 |       muted
12 |       className="z-20 h-screen w-screen object-cover relative transition-opacity duration-300 pointer visible opacity-100"
13 |       autoPlay
14 |       loop
15 |       playsInline
16 |     >
17 |       <source
18 |         src="https://res.cloudinary.com/dwn6kesnb/video/upload/v1678987222/samples/landing-page-vids/3224100290_fdmt8b.mp4"
19 |         type="video/mp4"
20 |       />
21 |       Your browser does not support the video tag.{" "}
22 |     </video>
23 |   );
24 | 
25 |   // isMobile state
26 |   useEffect(() => {
27 |     const handleResize = () => {
28 |       if (window.innerWidth < 768) {
29 |         setIsMobile(true);
30 |       } else {
31 |         setIsMobile(false);
32 |       }
33 |     };
34 | 
35 |     window.addEventListener("resize", handleResize);
36 |     handleResize();
37 |     return () => window.removeEventListener("resize", handleResize);
38 |   }, []);
39 | 
40 |   const MOBILE_VIEW = (
41 |     <div className="w-screen h-screen static">
42 |       {VIDEO_SOURCE}
43 |       <div className="overflow-hidden flex justify-center items-center">
44 |         <div className="z-50 text-white w-11/12 px-10 pb-10 pt-2 m-auto h-fit text-center max-w-screen-sm rounded-lg bg-slate-900/80 backdrop-blur-md absolute left-0 right-0 top-0 bottom-0">
45 |           <Logo />
46 |           <p>
47 |             The AI-powered SAAS solution to generate SEO-optimized blog posts in
48 |             minutes. Get high-quality content, without sacrificing your time.
49 |           </p>
50 |           <Link
51 |             href="/post/new"
52 |             className="btn mt-3 hover:transform hover:scale-105 transition-all duration-400 ease-in-out"
53 |           >
54 |             Begin
55 |           </Link>
56 |         </div>
57 |       </div>
58 |     </div>
59 |   );
60 | 
61 |   const DESKTOP_VIEW = (
62 |     <div className="w-screen h-screen static">
63 |       {VIDEO_SOURCE}
64 |       <div className="overflow-hidden flex justify-center items-center">
65 |         <div className="z-50 text-white px-10 pb-10 pt-2 m-auto h-fit text-center max-w-screen-sm rounded-lg bg-slate-900/80 backdrop-blur-md absolute left-0 right-0 top-0 bottom-0">
66 |           <Logo />
67 |           <p>
68 |             The AI-powered SAAS solution to generate SEO-optimized blog posts in
69 |             minutes. Get high-quality content, without sacrificing your time.
70 |           </p>
71 |           <Link
72 |             href="/post/new"
73 |             className="btn mt-3 hover:transform hover:scale-105 transition-all duration-400 ease-in-out"
74 |           >
75 |             Begin
76 |           </Link>
77 |         </div>
78 |       </div>
79 |     </div>
80 |   );
81 | 
82 |   return <>{isMobile ? MOBILE_VIEW : DESKTOP_VIEW}</>;
83 | }
84 | 


--------------------------------------------------------------------------------
/pages/post/[postId].js:
--------------------------------------------------------------------------------
  1 | import { getSession, withPageAuthRequired } from "@auth0/nextjs-auth0";
  2 | import { faHashtag } from "@fortawesome/free-solid-svg-icons";
  3 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  4 | import { ObjectId } from "mongodb";
  5 | import { useRouter } from "next/router";
  6 | import { useContext, useEffect, useState } from "react";
  7 | import { AppLayout } from "../../components/AppLayout";
  8 | import PostsContext from "../../context/postsContext";
  9 | 
 10 | import clientPromise from "../../lib/mongodb";
 11 | import { getAppProps } from "../../utils/getAppProps";
 12 | 
 13 | export default function Post(props) {
 14 |   const router = useRouter();
 15 | 
 16 |   const [generating, setGenerating] = useState(false);
 17 |   const [isMobile, setIsMobile] = useState(false);
 18 |   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 19 | 
 20 |   const { deletePost } = useContext(PostsContext);
 21 | 
 22 |   const handleDeleteConfirm = async () => {
 23 |     try {
 24 |       const response = await fetch("/api/deletePost", {
 25 |         method: "POST",
 26 |         headers: {
 27 |           "Content-Type": "application/json",
 28 |         },
 29 |         body: JSON.stringify({
 30 |           postId: props?.id,
 31 |         }),
 32 |       });
 33 |       const json = await response.json();
 34 | 
 35 |       if (json?.success) {
 36 |         deletePost(props?.id);
 37 |         router.replace("/post/new");
 38 |       }
 39 |     } catch (error) {
 40 |       console.error("\nERROR: ", error);
 41 |     }
 42 |   };
 43 | 
 44 |   // setGenerating(true) on mount
 45 |   useEffect(() => {
 46 |     setGenerating(true);
 47 | 
 48 |     return () => clearTimeout();
 49 |   }, []);
 50 | 
 51 |   // if theres a post, setGenerating to false
 52 |   useEffect(() => {
 53 |     if (props?.title) {
 54 |       setGenerating(false);
 55 | 
 56 |       return () => clearTimeout();
 57 |     }
 58 |   }, [props?.title]);
 59 | 
 60 |   const VIDEO_SOURCE = (
 61 |     <video
 62 |       aria-hidden="true"
 63 |       muted
 64 |       className="z-20 h-screen w-screen object-cover transition-opacity duration-300 pointer visible opacity-100"
 65 |       autoPlay
 66 |       loop
 67 |       playsInline
 68 |     >
 69 |       <source
 70 |         src="https://res.cloudinary.com/dwn6kesnb/video/upload/v1678987222/samples/landing-page-vids/3224100290_fdmt8b.mp4"
 71 |         type="video/mp4"
 72 |       />
 73 |       Your browser does not support the video tag.{" "}
 74 |     </video>
 75 |   );
 76 | 
 77 |   // isMobile state
 78 |   useEffect(() => {
 79 |     const handleResize = () => {
 80 |       if (window.innerWidth < 768) {
 81 |         setIsMobile(true);
 82 |       } else {
 83 |         setIsMobile(false);
 84 |       }
 85 |     };
 86 | 
 87 |     window.addEventListener("resize", handleResize);
 88 |     handleResize();
 89 |     return () => window.removeEventListener("resize", handleResize);
 90 |   }, []);
 91 | 
 92 |   const MOBILE_VIEW = (
 93 |     <div className="w-fit h-fit m-auto relative">
 94 |       {VIDEO_SOURCE}
 95 |       <div className="absolute w-full h-full left-0 right-0 top-0 bottom-0">
 96 |         {generating && (
 97 |           <div className="absolute bg-white bg-opacity-50 flex items-center justify-center">
 98 |             <div className="text-2xl font-bold text-slate-800">
 99 |               <FontAwesomeIcon icon={faHashtag} /> Getting post...
100 |             </div>
101 |           </div>
102 |         )}
103 | 
104 |         {!generating && (
105 |           <div className="overflow-auto p-2 h-full md:m-0 py-6 md:px-6 mb-28">
106 |             <div className="mb-32">
107 |               <div className="text-sm font-bold p-2 bg-stone-200 bg-slate-100/80 rounded-sm backdrop-blur-sm">
108 |                 SEO title and meta description
109 |               </div>
110 |               <div className="p-4 my-2 border border-stone-200 bg-slate-100/80 rounded-md backdrop-blur-sm">
111 |                 <div className="text-blue-600 text-2xl font-bold ">
112 |                   {props?.title}
113 |                 </div>
114 |                 <div className="mt-2">{props?.metaDescription}</div>
115 |               </div>
116 |               <div className="text-sm font-bold mt-6 p-2 bg-stone-200 bg-slate-100/80 backdrop-blur-sm rounded-sm">
117 |                 Keywords
118 |               </div>
119 |               <div className="flex flex-wrap pt-2 gap-1">
120 |                 {props?.keywords?.split(",").map((keyword, i) => (
121 |                   <div
122 |                     key={i}
123 |                     className="p-2 rounded-full bg-slate-800 text-white"
124 |                   >
125 |                     <FontAwesomeIcon icon={faHashtag} /> {keyword}
126 |                   </div>
127 |                 ))}
128 |               </div>
129 |               <div className="text-sm font-bold mt-6 p-2 bg-stone-200 rounded-sm bg-slate-100/80 backdrop-blur-sm">
130 |                 Blog post
131 |               </div>
132 |               <div
133 |                 className="p-6 my-2 border border-stone-200 bg-slate-100/80 backdrop-blur-sm rounded-md "
134 |                 dangerouslySetInnerHTML={{ __html: props?.postContent || "" }}
135 |               />
136 |               <div className="my-4">
137 |                 {!showDeleteConfirm && (
138 |                   <button
139 |                     className="btn bg-red-600 hover:bg-red-700"
140 |                     onClick={() => setShowDeleteConfirm(true)}
141 |                   >
142 |                     Delete Post
143 |                   </button>
144 |                 )}
145 |                 {showDeleteConfirm && (
146 |                   <div>
147 |                     <p className="p-2 bg-red-300 text-center">
148 |                       Are you sure you want to delete this post? This action is
149 |                       irreversible.
150 |                     </p>
151 |                     <div className="grid grid-cols-2 gap-2">
152 |                       <button
153 |                         className="btn bg-stone-600 hover:bg-stone-700"
154 |                         onClick={() => setShowDeleteConfirm(false)}
155 |                       >
156 |                         cancel
157 |                       </button>
158 |                       <button
159 |                         className="btn bg-red-600 hover:bg-red-700"
160 |                         onClick={handleDeleteConfirm}
161 |                       >
162 |                         confirm delete
163 |                       </button>
164 |                     </div>
165 |                   </div>
166 |                 )}
167 |               </div>
168 |             </div>
169 |           </div>
170 |         )}
171 |       </div>
172 |     </div>
173 |   );
174 | 
175 |   const DESKTOP_VIEW = (
176 |     <div className="w-fit h-fit m-auto relative">
177 |       {VIDEO_SOURCE}
178 |       <div className="absolute w-full h-full left-0 right-0 top-0 bottom-0">
179 |         {generating && (
180 |           <div className="absolute bg-white bg-opacity-50 flex items-center justify-center">
181 |             <div className="text-2xl font-bold text-slate-800">
182 |               <FontAwesomeIcon icon={faHashtag} /> Getting post...
183 |             </div>
184 |           </div>
185 |         )}
186 | 
187 |         {!generating && (
188 |           <div className="overflow-auto p-2 h-full md:m-0 py-6 md:px-6 mb-24">
189 |             <div className="">
190 |               <div className="text-sm font-bold p-2 bg-stone-200 bg-slate-100/80 rounded-sm backdrop-blur-sm">
191 |                 SEO title and meta description
192 |               </div>
193 |               <div className="p-4 my-2 border border-stone-200 bg-slate-100/80 rounded-md backdrop-blur-sm">
194 |                 <div className="text-blue-600 text-2xl font-bold ">
195 |                   {props?.title}
196 |                 </div>
197 |                 <div className="mt-2">{props?.metaDescription}</div>
198 |               </div>
199 |               <div className="text-sm font-bold mt-6 p-2 bg-stone-200 bg-slate-100/80 backdrop-blur-sm rounded-sm">
200 |                 Keywords
201 |               </div>
202 |               <div className="flex flex-wrap pt-2 gap-1">
203 |                 {props?.keywords?.split(",").map((keyword, i) => (
204 |                   <div
205 |                     key={i}
206 |                     className="p-2 rounded-full bg-slate-800 text-white"
207 |                   >
208 |                     <FontAwesomeIcon icon={faHashtag} /> {keyword}
209 |                   </div>
210 |                 ))}
211 |               </div>
212 |               <div className="text-sm font-bold mt-6 p-2 bg-stone-200 rounded-sm bg-slate-100/80 backdrop-blur-sm">
213 |                 Blog post
214 |               </div>
215 |               <div
216 |                 className="p-6 my-2 border border-stone-200 bg-slate-100/80 backdrop-blur-sm rounded-md "
217 |                 dangerouslySetInnerHTML={{ __html: props?.postContent || "" }}
218 |               />
219 |               <div className="my-4">
220 |                 {!showDeleteConfirm && (
221 |                   <button
222 |                     className="btn bg-red-600 hover:bg-red-700"
223 |                     onClick={() => setShowDeleteConfirm(true)}
224 |                   >
225 |                     Delete Post
226 |                   </button>
227 |                 )}
228 |                 {showDeleteConfirm && (
229 |                   <div>
230 |                     <p className="p-2 bg-red-300 text-center">
231 |                       Are you sure you want to delete this post? This action is
232 |                       irreversible.
233 |                     </p>
234 |                     <div className="grid grid-cols-2 gap-2">
235 |                       <button
236 |                         className="btn bg-stone-600 hover:bg-stone-700"
237 |                         onClick={() => setShowDeleteConfirm(false)}
238 |                       >
239 |                         cancel
240 |                       </button>
241 |                       <button
242 |                         className="btn bg-red-600 hover:bg-red-700"
243 |                         onClick={handleDeleteConfirm}
244 |                       >
245 |                         confirm delete
246 |                       </button>
247 |                     </div>
248 |                   </div>
249 |                 )}
250 |               </div>
251 |             </div>
252 |           </div>
253 |         )}
254 |       </div>
255 |     </div>
256 |   );
257 | 
258 |   return <>{isMobile ? MOBILE_VIEW : DESKTOP_VIEW}</>;
259 | }
260 | 
261 | Post.getLayout = function getLayout(page, pageProps) {
262 |   return <AppLayout {...pageProps}>{page}</AppLayout>;
263 | };
264 | 
265 | export const getServerSideProps = withPageAuthRequired({
266 |   async getServerSideProps(ctx) {
267 |     const props = await getAppProps(ctx);
268 | 
269 |     const userSession = await getSession(ctx.req, ctx.res);
270 |     const client = await clientPromise;
271 |     const db = client.db("AI-Blog-Generator");
272 |     const user = await db.collection("users").findOne({
273 |       auth0Id: userSession?.user?.sub,
274 |     });
275 | 
276 |     const post = await db.collection("posts").findOne({
277 |       _id: new ObjectId(ctx?.params?.postId),
278 |       userId: user?._id,
279 |     });
280 | 
281 |     if (!post) {
282 |       return {
283 |         redirect: {
284 |           destination: "/post/new",
285 |           permanent: false,
286 |         },
287 |       };
288 |     }
289 | 
290 |     return {
291 |       props: {
292 |         id: ctx?.params?.postId,
293 |         postContent: post?.postContent,
294 |         title: post?.title,
295 |         metaDescription: post?.metaDescription,
296 |         keywords: post?.keywords,
297 |         postCreated: post?.created.toString(),
298 |         ...props,
299 |       },
300 |     };
301 |   },
302 | });
303 | 


--------------------------------------------------------------------------------
/pages/post/new.js:
--------------------------------------------------------------------------------
  1 | import { withPageAuthRequired } from "@auth0/nextjs-auth0";
  2 | import { faBrain } from "@fortawesome/free-solid-svg-icons";
  3 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  4 | import { redirect } from "next/dist/server/api-utils";
  5 | import { useRouter } from "next/router";
  6 | import { useEffect, useState } from "react";
  7 | import { AppLayout } from "../../components/AppLayout";
  8 | import { getAppProps } from "../../utils/getAppProps";
  9 | 
 10 | export default function NewPost(props) {
 11 |   const router = useRouter();
 12 | 
 13 |   const [topic, setTopic] = useState("");
 14 |   const [keywords, setKeywords] = useState("");
 15 |   const [generating, setGenerating] = useState(false);
 16 |   const [isMobile, setIsMobile] = useState(false);
 17 | 
 18 |   const handleSubmit = async (e) => {
 19 |     e.preventDefault();
 20 |     setGenerating(true);
 21 | 
 22 |     try {
 23 |       const response = await fetch(`/api/generatePost`, {
 24 |         method: "POST",
 25 |         headers: {
 26 |           "Content-Type": "application/json",
 27 |         },
 28 |         body: JSON.stringify({
 29 |           topic,
 30 |           keywords,
 31 |         }),
 32 |       });
 33 | 
 34 |       const json = await response.json();
 35 | 
 36 |       if (json?.postId) {
 37 |         router.push(`/post/${json?.postId}`);
 38 |       }
 39 |     } catch (error) {
 40 |       console.error("\nERROR: ", error);
 41 |       setGenerating(false);
 42 |     }
 43 |   };
 44 | 
 45 |   // isMobile state
 46 |   useEffect(() => {
 47 |     const handleResize = () => {
 48 |       if (window.innerWidth < 768) {
 49 |         setIsMobile(true);
 50 |       } else {
 51 |         setIsMobile(false);
 52 |       }
 53 |     };
 54 | 
 55 |     window.addEventListener("resize", handleResize);
 56 |     handleResize();
 57 |     return () => window.removeEventListener("resize", handleResize);
 58 |   }, []);
 59 | 
 60 |   const VIDEO_SOURCE = (
 61 |     <video
 62 |       aria-hidden="true"
 63 |       muted
 64 |       className="z-20 h-screen w-screen object-cover transition-opacity duration-300 pointer visible opacity-100"
 65 |       autoPlay
 66 |       loop
 67 |       playsInline
 68 |     >
 69 |       <source
 70 |         src="https://res.cloudinary.com/dwn6kesnb/video/upload/v1678987222/samples/landing-page-vids/3224100290_fdmt8b.mp4"
 71 |         type="video/mp4"
 72 |       />
 73 |       Your browser does not support the video tag.{" "}
 74 |     </video>
 75 |   );
 76 | 
 77 |   const MOBILE_VIEW = (
 78 |     <main className="h-1/2 overflow-hidden">
 79 |       {!!generating && (
 80 |         <div className="text-green-500 mt-3 flex h-full animate-pulse w-full flex-col justify-center items-center">
 81 |           <FontAwesomeIcon icon={faBrain} className="text-8xl" />
 82 |           <h6>Generating...</h6>
 83 |         </div>
 84 |       )}
 85 | 
 86 |       {!generating && (
 87 |         <div className="w-full h-fit flex flex-col relative overflow-auto">
 88 |           {VIDEO_SOURCE}
 89 |           <div className="p-2 w-full z-20 m-auto absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
 90 |             <form
 91 |               onSubmit={handleSubmit}
 92 |               className="m-auto w-full backdrop-blur-sm max-w-screen-sm bg-slate-100/80 p-4 rounded-md shadow-lg border border-slate-200 shadow-gray-800"
 93 |             >
 94 |               <div>
 95 |                 <label>
 96 |                   <strong>Generate a blog post on the topic of:</strong>
 97 |                 </label>
 98 |                 <textarea
 99 |                   className="resize-none border border-slate-500 w-full block my-2 px-4 py-2 rounded-sm"
100 |                   value={topic}
101 |                   maxLength={80}
102 |                   onChange={(e) => setTopic(e.target.value)}
103 |                 />
104 |               </div>
105 |               <div>
106 |                 <label>
107 |                   <strong>Targeting the following keywords:</strong>
108 |                 </label>
109 |                 <textarea
110 |                   className="resize-none border border-slate-500 w-full block my-2 px-4 py-2 rounded-sm"
111 |                   value={keywords}
112 |                   maxLength={80}
113 |                   onChange={(e) => setKeywords(e.target.value)}
114 |                 />
115 |                 <small className="block mb-2">
116 |                   * Separate keywords with a comma
117 |                 </small>
118 |               </div>
119 | 
120 |               <button
121 |                 type="submit"
122 |                 className="btn"
123 |                 disabled={!topic.trim() || !keywords.trim()}
124 |               >
125 |                 Generate
126 |               </button>
127 |             </form>
128 |           </div>
129 |         </div>
130 |       )}
131 |     </main>
132 |   );
133 | 
134 |   const DESKTOP_VIEW = (
135 |     <main className="h-full overflow-hidden">
136 |       {!!generating && (
137 |         <div className="text-green-500 flex h-full animate-pulse w-full flex-col justify-center items-center">
138 |           <FontAwesomeIcon icon={faBrain} className="text-8xl" />
139 |           <h6>Generating...</h6>
140 |         </div>
141 |       )}
142 | 
143 |       {!generating && (
144 |         <div className="w-full h-full flex flex-col relative overflow-auto">
145 |           {VIDEO_SOURCE}
146 |           <div className="p-2 h-auto w-full z-20 m-auto absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
147 |             <form
148 |               onSubmit={handleSubmit}
149 |               className="m-auto w-full max-w-screen-sm backdrop-blur-sm bg-slate-100/80 p-4 rounded-md shadow-lg border border-slate-200 shadow-gray-00"
150 |             >
151 |               <div>
152 |                 <label>
153 |                   <strong>Generate a blog post on the topic of:</strong>
154 |                 </label>
155 |                 <textarea
156 |                   className="resize-none border border-slate-500 w-full block my-2 px-4 py-2 rounded-sm"
157 |                   value={topic}
158 |                   maxLength={80}
159 |                   onChange={(e) => setTopic(e.target.value)}
160 |                 />
161 |               </div>
162 |               <div>
163 |                 <label>
164 |                   <strong>Targeting the following keywords:</strong>
165 |                 </label>
166 |                 <textarea
167 |                   className="resize-none border border-slate-500 w-full block my-2 px-4 py-2 rounded-sm"
168 |                   value={keywords}
169 |                   maxLength={80}
170 |                   onChange={(e) => setKeywords(e.target.value)}
171 |                 />
172 |                 <small className="block mb-2">
173 |                   * Separate keywords with a comma
174 |                 </small>
175 |               </div>
176 | 
177 |               <button
178 |                 type="submit"
179 |                 className="btn"
180 |                 disabled={!topic.trim() || !keywords.trim()}
181 |               >
182 |                 Generate
183 |               </button>
184 |             </form>
185 |           </div>
186 |         </div>
187 |       )}
188 |     </main>
189 |   );
190 | 
191 |   return isMobile ? MOBILE_VIEW : DESKTOP_VIEW;
192 | }
193 | 
194 | NewPost.getLayout = function getLayout(page, pageProps) {
195 |   return <AppLayout {...pageProps}>{page}</AppLayout>;
196 | };
197 | 
198 | export const getServerSideProps = withPageAuthRequired({
199 |   async getServerSideProps(ctx) {
200 |     const props = await getAppProps(ctx);
201 | 
202 |     if (!props.availableTokens) {
203 |       return {
204 |         redirect: {
205 |           destination: "/token-topup",
206 |           permanent: false,
207 |         },
208 |       };
209 |     }
210 | 
211 |     return {
212 |       props,
213 |     };
214 |   },
215 | });
216 | 


--------------------------------------------------------------------------------
/pages/success.js:
--------------------------------------------------------------------------------
 1 | import { withPageAuthRequired } from "@auth0/nextjs-auth0";
 2 | import { useEffect, useState } from "react";
 3 | import { AppLayout } from "../components/AppLayout";
 4 | import { getAppProps } from "../utils/getAppProps";
 5 | 
 6 | export default function Success(props) {
 7 |   const tokens = props?.availableTokens;
 8 | 
 9 |   const [isMobile, setIsMobile] = useState(false);
10 | 
11 |   useEffect(() => {
12 |     const handleResize = () => {
13 |       if (window.innerWidth < 768) {
14 |         setIsMobile(true);
15 |       } else {
16 |         setIsMobile(false);
17 |       }
18 |     };
19 | 
20 |     window.addEventListener("resize", handleResize);
21 |     handleResize();
22 |     return () => window.removeEventListener("resize", handleResize);
23 |   }, []);
24 | 
25 |   const MOBILE_VIEW = (
26 |     <div className="flex flex-col items-center justify-center">
27 |       <h1 className="text-2xl font-bold">Thank you for your purchase!</h1>
28 |       <p className="text-sm px-2">
29 |         You have {tokens} tokens available. You can use these tokens to generate
30 |         posts.
31 |       </p>
32 |       <p className="text-xs">
33 |         Navigate to the dashboard to start generating posts.
34 |       </p>
35 |     </div>
36 |   );
37 | 
38 |   const DESKTOP_VIEW = (
39 |     <div className="flex flex-col items-center justify-center">
40 |       <h1 className="text-4xl font-bold">Thank you for your purchase!</h1>
41 |       <p className="text-normal px-4">
42 |         You have {tokens} tokens available. You can use these tokens to generate
43 |         posts.
44 |       </p>
45 |       <p className="text-sm">
46 |         Navigate to the dashboard to start generating posts.
47 |       </p>
48 |     </div>
49 |   );
50 | 
51 |   return <>{isMobile ? MOBILE_VIEW : DESKTOP_VIEW}</>;
52 | }
53 | 
54 | Success.getLayout = function getLayout(page, pageProps) {
55 |   return <AppLayout {...pageProps}>{page}</AppLayout>;
56 | };
57 | 
58 | export const getServerSideProps = withPageAuthRequired({
59 |   async getServerSideProps(ctx) {
60 |     const props = await getAppProps(ctx);
61 |     return {
62 |       props,
63 |     };
64 |   },
65 | });
66 | 


--------------------------------------------------------------------------------
/pages/token-topup.js:
--------------------------------------------------------------------------------
  1 | import { withPageAuthRequired } from "@auth0/nextjs-auth0";
  2 | import { useEffect, useState } from "react";
  3 | import { AppLayout } from "../components/AppLayout";
  4 | import { getAppProps } from "../utils/getAppProps";
  5 | 
  6 | export default function TokenTopup() {
  7 |   const [isMobile, setIsMobile] = useState(false);
  8 | 
  9 |   const handleClick = async () => {
 10 |     const result = await fetch(`/api/addTokens`, {
 11 |       method: "POST",
 12 |     });
 13 |     const json = await result.json();
 14 |     window.location.href = json.session.url;
 15 |   };
 16 | 
 17 |   const VIDEO_SOURCE = (
 18 |     <video
 19 |       aria-hidden="true"
 20 |       muted
 21 |       className="z-20 h-screen w-screen object-cover transition-opacity duration-300 pointer visible opacity-100"
 22 |       autoPlay
 23 |       loop
 24 |       playsInline
 25 |     >
 26 |       <source
 27 |         src="https://res.cloudinary.com/dwn6kesnb/video/upload/v1678987222/samples/landing-page-vids/3224100290_fdmt8b.mp4"
 28 |         type="video/mp4"
 29 |       />
 30 |       Your browser does not support the video tag.{" "}
 31 |     </video>
 32 |   );
 33 | 
 34 |   const MOBILE_VIEW = (
 35 |     <div className="w-full h-full flex flex-col relative mb-14">
 36 |       {VIDEO_SOURCE}
 37 |       <div
 38 |         className="z-50 w-11/12 h-fit absolute left-0 right-0 top-0 bottom-0 m-auto backdrop-blur-sm max-w-screen-sm bg-slate-100/80 p-4 rounded-md shadow-lg border border-slate-200 shadow-gray-800
 39 |       "
 40 |       >
 41 |         <h1 className="text-4xl font-bold text-center -mb-2 ">How it works:</h1>
 42 |         <div>
 43 |           <ol className="list-decimal list-inside text-normal text-left p-4">
 44 |             <li>
 45 |               Click the button below to be redirected to the payment page.
 46 |             </li>
 47 |             <li>Enter your card details and click &lsquo;Pay&rsquo;.</li>
 48 |             <li>
 49 |               3 You will be redirected back to the app and your tokens will be
 50 |               added.
 51 |             </li>
 52 |             <li>You can use the tokens to generate posts.</li>
 53 |           </ol>
 54 |         </div>
 55 |         <button className="btn " onClick={handleClick}>
 56 |           Add tokens
 57 |         </button>
 58 |       </div>
 59 |     </div>
 60 |   );
 61 | 
 62 |   const DESKTOP_VIEW = (
 63 |     <div className="w-full h-full flex flex-col relative">
 64 |       {VIDEO_SOURCE}
 65 |       <div
 66 |         className="z-50 w-11/12 h-fit absolute left-0 right-0 top-0 bottom-0 m-auto backdrop-blur-sm max-w-screen-sm bg-slate-100/80 p-4 rounded-md shadow-lg border border-slate-200 shadow-gray-800
 67 |       "
 68 |       >
 69 |         <h1 className="text-4xl font-bold text-center -mb-2 ">How it works:</h1>
 70 |         <div>
 71 |           <ol className="list-decimal list-inside text-normal p-4">
 72 |             <li>
 73 |               Click the button below to be redirected to the payment page.
 74 |             </li>
 75 |             <li>Enter your card details and click &lsquo;Pay&rsquo;.</li>
 76 |             <li>
 77 |               You will be redirected back to the app and your tokens will be
 78 |               added.
 79 |             </li>
 80 |             <li>You can use the tokens to generate posts.</li>
 81 |           </ol>
 82 |         </div>
 83 |         <button className="btn " onClick={handleClick}>
 84 |           Add tokens
 85 |         </button>
 86 |       </div>
 87 |     </div>
 88 |   );
 89 | 
 90 |   // isMobile state
 91 |   useEffect(() => {
 92 |     const handleResize = () => {
 93 |       if (window.innerWidth < 768) {
 94 |         setIsMobile(true);
 95 |       } else {
 96 |         setIsMobile(false);
 97 |       }
 98 |     };
 99 | 
100 |     window.addEventListener("resize", handleResize);
101 |     handleResize();
102 |     return () => window.removeEventListener("resize", handleResize);
103 |   }, []);
104 | 
105 |   return <>{isMobile ? MOBILE_VIEW : DESKTOP_VIEW}</>;
106 | }
107 | 
108 | TokenTopup.getLayout = function getLayout(page, pageProps) {
109 |   return <AppLayout {...pageProps}>{page}</AppLayout>;
110 | };
111 | 
112 | export const getServerSideProps = withPageAuthRequired({
113 |   async getServerSideProps(ctx) {
114 |     const props = await getAppProps(ctx);
115 |     return {
116 |       props,
117 |     };
118 |   },
119 | });
120 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/brainium.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M184 0c30.9 0 56 25.1 56 56V456c0 30.9-25.1 56-56 56c-28.9 0-52.7-21.9-55.7-50.1c-5.2 1.4-10.7 2.1-16.3 2.1c-35.3 0-64-28.7-64-64c0-7.4 1.3-14.6 3.6-21.2C21.4 367.4 0 338.2 0 304c0-31.9 18.7-59.5 45.8-72.3C37.1 220.8 32 207 32 192c0-30.7 21.6-56.3 50.4-62.6C80.8 123.9 80 118 80 112c0-29.9 20.6-55.1 48.3-62.1C131.3 21.9 155.1 0 184 0zM328 0c28.9 0 52.6 21.9 55.7 49.9c27.8 7 48.3 32.1 48.3 62.1c0 6-.8 11.9-2.4 17.4c28.8 6.2 50.4 31.9 50.4 62.6c0 15-5.1 28.8-13.8 39.7C493.3 244.5 512 272.1 512 304c0 34.2-21.4 63.4-51.6 74.8c2.3 6.6 3.6 13.8 3.6 21.2c0 35.3-28.7 64-64 64c-5.6 0-11.1-.7-16.3-2.1c-3 28.2-26.8 50.1-55.7 50.1c-30.9 0-56-25.1-56-56V56c0-30.9 25.1-56 56-56z"/></svg>


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/keithhetrick/Brainium/492da1b5f6da9c6b0b488bb6c4c5894c9a613dac/public/favicon.ico


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/keithhetrick/Brainium/492da1b5f6da9c6b0b488bb6c4c5894c9a613dac/public/favicon.png


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   a:hover {
 7 |     @apply underline;
 8 |   }
 9 | 
10 |   h1,
11 |   h2,
12 |   h3,
13 |   h4,
14 |   h5,
15 |   h6 {
16 |     @apply font-heading my-6 font-bold;
17 |   }
18 | 
19 |   h1 {
20 |     @apply text-4xl;
21 |   }
22 | 
23 |   h2 {
24 |     @apply text-3xl;
25 |   }
26 | 
27 |   h3 {
28 |     @apply text-2xl;
29 |   }
30 | 
31 |   h4 {
32 |     @apply text-xl;
33 |   }
34 | 
35 |   h5 {
36 |     @apply text-lg;
37 |   }
38 | 
39 |   p {
40 |     @apply my-2;
41 |   }
42 | 
43 |   ul,
44 |   ol {
45 |     @apply my-4;
46 |     @apply text-left;
47 |   }
48 | 
49 |   ul {
50 |     list-style-type: disc;
51 |   }
52 | 
53 |   ol {
54 |     list-style-type: decimal;
55 |   }
56 | 
57 |   li {
58 |     @apply my-2;
59 |   }
60 | }
61 | 
62 | @layer components {
63 |   .btn {
64 |     @apply disabled:bg-green-200 disabled:cursor-not-allowed hover:no-underline bg-green-500 tracking-wider w-full text-center text-white font-bold cursor-pointer uppercase px-4 py-2 rounded-md hover:bg-green-600 transition-colors block;
65 |   }
66 | }
67 | 
68 | @media (max-width: 640px) {
69 |   .sidebar {
70 |     display: none;
71 |   }
72 | 
73 |   .hamburger {
74 |     display: block;
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./app/**/*.{js,ts,jsx,tsx}",
 5 |     "./pages/**/*.{js,ts,jsx,tsx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx}",
 7 |     // Or if using `src` directory:
 8 |     "./src/**/*.{js,ts,jsx,tsx}",
 9 |   ],
10 |   theme: {
11 |     extend: {
12 |       fontFamily: {
13 |         body: "var(--font-dm-sans)",
14 |         heading: "var(--font-dm-serif)",
15 |       },
16 |       animation: {
17 |         shine: "shine 1s",
18 |       },
19 |       keyframes: {
20 |         shine: {
21 |           "100%": { left: "125%" },
22 |         },
23 |       },
24 |     },
25 |   },
26 |   plugins: [],
27 | };
28 | 


--------------------------------------------------------------------------------
/utils/getAppProps.js:
--------------------------------------------------------------------------------
 1 | import { getSession } from "@auth0/nextjs-auth0";
 2 | import clientPromise from "../lib/mongodb";
 3 | 
 4 | export const getAppProps = async (ctx) => {
 5 |   const userSession = await getSession(ctx.req, ctx.res);
 6 |   const client = await clientPromise;
 7 |   const db = client.db("AI-Blog-Generator");
 8 |   const user = await db.collection("users").findOne({
 9 |     auth0Id: userSession?.user?.sub,
10 |   });
11 | 
12 |   if (!user) {
13 |     return {
14 |       availableTokens: 0,
15 |       posts: [],
16 |     };
17 |   }
18 | 
19 |   const posts = await db
20 |     .collection("posts")
21 |     .find({ userId: user?._id })
22 |     .limit(5)
23 |     .sort({ created: -1 })
24 |     .toArray();
25 | 
26 |   return {
27 |     availableTokens: user?.availableTokens,
28 |     posts: posts?.map(({ created, _id, userId, ...rest }) => ({
29 |       _id: _id?.toString(),
30 |       created: created?.toString(),
31 |       ...rest,
32 |     })),
33 |     postId: ctx.params?.postId || null,
34 |   };
35 | };
36 | 


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