Building AI App with React NextJs TypeScript Google & Stripe

Learn to build an ai app using Google Gemini by obtaining an api key, sending user prompts, and displaying the generated response in a simple ui.

Learn to implement server actions in Next.js, moving code to server side to safely interact with databases and third-party services like Google, while handling client-side events with use client.

Capture user input with an input component, store it in state, and pass it as an argument to generate text using set C and UI components; prep for UI setup.

Learn to set up Shadcn UI in a Next.js project with TypeScript, initialize and configure components, and implement an input field and a button to capture prompts and fetch results.

Build a dynamic prompt input in a React Next.js TypeScript app using the session ui input, manage the query state, and render the AI response in a card.

Learn to render markdown content in a react app using the react-markdown library, install the package, import it, and display markdown content.

Implement Clerk authentication to secure a Next.js app, enabling sign-in with email or Google, configuring env vars, and wrapping the app with Clerk provider to protect dashboard routes with middleware.

Build a reusable top navigation bar in a Next.js app with a top-nav component, moving layout code, and conditionally show the dashboard link using the use user hook.

Create a dashboard layout with a sidebar navigation and main content area using a four-column grid, configuring a column span for the sidebar and three for content.

Build a side navigation using lucide react icons by creating a menu array with dashboard, history, billing, and settings items and routes, then render with flex and hover styles.

Learn to implement an active side nav item in a Next.js dashboard using path name hook from next/navigation, wrapping items in links, and applying styling based on the current path.

Learn to build a responsive mobile navigation that hides text on small screens while showing icons, adjusts layout at medium breakpoints, and centers icons for a polished mobile experience.

Learn to implement static template data in a React Next.js AI app, wiring hard coded service templates for blog ideas, content, rewriting, and code tasks in a utils/template file.

Render templates in a dashboard using a responsive grid, mapping each template to a card with an icon, name, and a line-clamped description, with hover effects.

Learn to implement light and dark mode in a Next.js app by using next themes, creating a theme provider, wrapping the root layout, and adding a dropdown mode toggle.

Implement clickable templates with next/link to navigate to a dynamic template page, display generated content, and enable edits within a dashboard template using a dynamic slug.

Learn to render a dynamic template form page in a React TypeScript app by defining template and form interfaces, mapping by slug, and displaying input or text area fields.

Implement a template card showing an image from template.icon, the template name, and its description, while handling a two-item form (input and text area) in a React Next.js TypeScript project.

Build a form with an input field and a generate content button, wiring onsubmit and onchange handlers to prevent default, log submissions, and log input changes for a client component.

Deploy the app to Vercel from the command line, log in, configure environment variables, adjust install and build commands, and review logs for udemy.vercel.app in production.

Learn to fetch content from ai by wiring a submit handler and building a dynamic prompt, show results in a rich text editor, and manage loading and errors.

Integrate the Toast UI rich text editor in a React Next.js project, switching between markdown and wysiwyg modes while syncing content with useRef and useEffect.