AI SaaS Image Generator & Chatbot: React NextJs TypeScript

Build a full-stack AI-powered image generator and chatbot using React, Next.js, and TypeScript, integrating Replicate AI, OpenAI, and Gemini AI with a Tailwind UI setup.

Create a reusable top navigation bar as a React Next.js TypeScript component. Display a logo, home link, and login button, integrated into the app layout for all pages.

Create an animated gradient headline for the AI image generator on a landing page, featuring a layout, gradient text, an image slider, and an input field that generates AI images.

The homepage highlights a generate image input that lets users type prompts to create images, wired through a dedicated generate image input component with input and a generate image button.

Create a hero image slider component in a Next.js project, importing images, using layout fill with object fit cover, and styling with rounded corners while sourcing royalty-free mountain images.

Build a thumbnail row component to display four thumbnails beneath the main image in a transparent overlay, using a thumbnails array in a React Next.js TypeScript app.

Select and download diverse images from Pixabay to create clickable thumbnails, update the project assets with city, desert, and space images, and display the chosen image as the main image.

Demonstrates building a client-side image preview in a React Next.js TypeScript app by managing current image state, updating the main image on thumbnail clicks, and disabling auto slide.

Automate the image slider with a React useEffect loop and set interval to cycle thumbnails every three seconds, updating the current and next index and cleaning up.

Implement Clerk authentication to identify users, store image records with user emails in the dashboard, protect routes with middleware, and integrate sign-in and sign-out components via a provider.

Implement a login/logout UI that toggles between a sign in button and a user button, using a modal login window and customizable components.

Set up toast notifications with React Hot Toast to display success or error messages when generating images, and navigate logged-in users to the image space using a global context.

Learn to build a global image context in React TypeScript to manage image prompts, loading, and AI generation, with database save/fetch and dashboard display.

Learn to secure Next.js server actions in an AI image generator app by using server-side code, environment variable handling, and auth protection to require login before image generation.

Use replicate AI to generate email imagery, manage API keys and server-side calls, choose affordable models, and save generated images to Cloudinary via a database workflow.

Learn to set up Cloudinary, obtain API keys, and configure image uploads using upload stream with nano ID, then store the secure image URL in your database.

connect to mongodb using mongoose, set up atlas cluster, obtain connection string, store in env variable, and create a db.ts utility to handle connections with proper error handling.

Create a mongoose image model with a schema in models folder, including user email, username, image name, and url, with timestamps, while ensuring database connection for serverless functions on Vercel.

Save the generated image by connecting the model and database, uploading via buffer, and storing the URL, prompt, and the current user's email and username.

Learn how to implement a submit-driven image generator workflow: validate signed-in users, show loading states, generate images from prompts, save to the database, and redirect to the image page.

Implement a paginated server action to fetch the currently logged-in user's images from the database, display them in the dashboard, and enable downloads.

Create a new image type in utils/types/image.ts and build a user dashboard that lists all images, enabling downloads, with a top nav dashboard link shown only to logged-in users.

In the dashboard, fetch and display user generated images via a server action, support pagination with page and limit, compute total pages, and render images using next/image.

Learn to implement a default loading page in a Next.js app using the app directory, featuring a centered spinner and smooth page transitions with caching behavior.

Learn to implement light and dark mode in a React Next.js app by adding a theme provider, wrapping the layout, and building a client-side mode toggle that respects system preferences.

Render and display images in the dashboard by creating an image card component and mapping through images in a responsive grid. Link each image to a dedicated image detail view.

Build a reusable image card component in a Next.js React app with a left thumbnail, title and creator metadata, hover effects, and next image optimization.

Refactor an image card into its own component, move it into a components/cars folder as image card.tsx, and prepare pagination to show at least three images per page.

Create a navigation pagination component in a Next.js dashboard, receive page and total pages props, render page links with next/link and buttons, update the URL with a pace query parameter.

Learn to implement pagination in a React Next.js TypeScript app with previous and next buttons updating the page query, using current/total-page logic and lucid chevron icons.

Create a server action to fetch a single image from the database by its id, connect to the database, and render the image on the page using that id.

Explore how to fetch an image by id from the dashboard, render it with layout fill, and provide download, share, and full-screen view options, with a public sharing pathway.

Create an image edit buttons component with a download button and share and view options that receive the image prop and handle download on click.

Implement two new buttons for download and share. Use the file server package's save as for downloads and navigator.clipboard.writeText to copy the image URL, via a public view route.

Explore the public image view page at /image/[id], displaying an image card with name, creator, and creation date beside the full image, with a shareable link copied to clipboard.

Learn how to turn a simple image generator into a saas with a credit-based system, onboarding credits, and a PayPal buy-credits flow in the navigation.

Learn to integrate PayPal in Next.js with react-paypal-js by installing the package, obtaining a sandbox client ID, setting NEXT_PUBLIC_PAYPAL_CLIENT_ID, and wrapping components with the PayPalScriptProvider for currency-aware transactions.

Learn to implement a protected buy credits page in a React Next.js app that uses PayPal for purchases, requires login, and offers 10, 20, and 50 credit options.

Learn to implement PayPal payments in a React Next.js TypeScript app to sell credits using the PayPal script reducer, create and capture orders, and persist credits in the database.

Create a Mongoose credit schema and model to store user credits, using email as the identifier, credits as a number, and a points reference, with timestamps.

Create a server action to save credits by connecting to the database, retrieving the current user's email, and updating or creating a credit record.

Save credit to database inside the success handler, format amount and credits from purchase details, then update the UI with the new balance and show a toast notification.

Create a loading component with a spinning Lucid React icon, centered on a translucent background while PayPal buttons load, and fetch the logged-in user's credits via a server action.

Fetch the current user's credits from the database using their email, expose them via a React context, and display the credits in the navigation for a Next.js TypeScript app.

Display user credits as a top badge over the icon, color red for under ten and green for ten or more, and show 99 plus when overflow.

Provide new users with five free credits on signup to try image generation, automatically creating a credit record if none exists using useEffect and a user email check.

Spend credits on each image generation by validating user credits, deducting one credit, updating the UI in real time, and guiding users to buy more if credits are insufficient.

Buy credits updates the UI in real time by saving to the database and refreshing credits via context and the get user credits function, with a toast confirmation.