Building Ai App With React Nextjs Typescript Google & Stripe

Master AI apps with React NextJs TypeScript MongoDB Tailwind ShadcnUI Google Gemini Stripe Subscription Webhooks Context

What you'll learn

How to build a full-stack AI-powered application using NextJs, React and TypeScript

Integration of Google Gemini AI for content generation and AI features

Implementation of server-side actions in NextJs for efficient data handling

Setting up and using Clerk for user authentication and management

Creating a responsive dashboard layout with light and dark mode themes

Developing dynamic template systems for AI-generated content

Connecting and interacting with MongoDB for data storage and retrieval

Implementing a subscription system using Stripe for payments and billing

Building a usage tracking system with credit limits and progress bars

Deploying a NextJs application to Vercel and handling production environments

Creating a landing page with promotional content and sign-up features

Implementing advanced features like rich text editing, search functionality, and infinite scrolling for query history

Requirements

Basic Understanding of JavaScript: Students should have a fundamental knowledge of JavaScript, including ES6 features, as this course builds upon these concepts to develop applications using React and NextJs.

Familiarity with React: While prior experience with React is not mandatory, a basic understanding of React components, state management, and props will be beneficial for grasping the course material more effectively.

Willingness to Learn: A strong motivation to learn and explore new technologies, including TypeScript, Google Gemini AI, and Stripe integration, is essential. Students should be prepared to engage with hands-on coding exercises and projects throughout the course.

Description

Dive into the cutting-edge world of AI-powered web applications with this comprehensive course on building advanced apps using React, Next.js, and TypeScript. This hands-on program will guide you through creating a sophisticated AI application from scratch, integrating the latest technologies and best practices in web development.In this course, you'll learn how to:Integrate Google Gemini AI to add intelligent, content-generation capabilities to your appDevelop creative AI-powered app ideas and bring them to lifeImplement AI features in various web applications, from content creation to data analysisDesign a sleek, responsive UI using Tailwind CSS and ShadcnUI componentsBuild a full-stack application with MongoDB for efficient data storage and retrievalCreate a subscription-based system using Stripe for payments and recurring billingDevelop and handle Stripe webhooks for real-time payment event processingUtilize React Context for efficient state management across your applicationDeploy your AI-powered application to production using VercelImplement real-world use cases for AI in web applicationsExclusive PDF Booklet: Enhance your learning with a comprehensive companion guide containing all code snippets used in the course. This invaluable resource allows you to:Follow along easily during video lecturesReview and practice code offline at your own paceHave a quick reference guide for future projectsReinforce your understanding by seeing code in both video and written formatsAccelerate your learning by having a visual aid alongside the video contentThroughout the course, you'll build a real-world AI-powered SaaS application, gaining practical experience with each technology and concept. You'll start with ideation and design, progress through development and AI integration, and finish with deployment and monetization strategies.To support your learning journey, this course includes a comprehensive PDF booklet containing all the code snippets used in the video lectures. This valuable resource allows you to follow along easily, review code offline, and have a quick reference guide for future projects.By the end of this course, you'll have the skills to conceptualize, create, and deploy sophisticated AI-enhanced web applications that are not only functional but also scalable and marketable. Whether you're a seasoned developer looking to harness the power of AI or an ambitious beginner ready to dive into the future of web development, this course will equip you with the knowledge and hands-on experience to build impressive AI-integrated applications.Join now and transform your development skills to meet the growing demand for AI-powered web applications in today's tech industry!

Overview

Section 1: Introduction

Lecture 1 About the Course

Lecture 2 Project Overview

Lecture 3 PDF Booklet & Source Code

Lecture 4 NextJs Project Setup

Section 2: Google Gemini Generative AI

Lecture 5 Using Google Gemini AI

Lecture 6 Server Actions in NextJs

Lecture 7 Passing Prompts

Section 3: Shadcn UI

Lecture 8 Using Shadcn UI

Lecture 9 Dynamic Prompt

Lecture 10 Render Markdown

Section 4: Authentication

Lecture 11 Clerk Authentication

Lecture 12 Top Navigation

Section 5: Layouts & Navigation

Lecture 13 Dashboard Layout

Lecture 14 SideNav Items

Lecture 15 Active SideNav Item

Lecture 16 Responsive Mobile Nav

Section 6: Services Template

Lecture 17 Template Data

Lecture 18 Using Static Template Data

Lecture 19 Render Templates in Dashboard

Section 7: Light & Dark Mode

Lecture 20 Light and Dark Mode Theme Toggle

Section 8: Copy, Searching & Filtering

Lecture 21 Copy Feature and Toast Notifications

Lecture 22 Search Bar and Active Nav CSS Update

Lecture 23 Template Searching or Filtering

Section 9: Display Template

Lecture 24 Dynamic Template Page

Lecture 25 Display Template Form Fields

Lecture 26 Template Details

Lecture 27 Template Form Input and Change Events

Section 10: Deployment

Lecture 28 Deploy to Vercel

Section 11: Rich Text Editor

Lecture 29 Getting Content from AI

Lecture 30 Rich Text Editor for Generated Content

Section 12: Mongo DB

Lecture 31 MongoDB Connection

Lecture 32 Query Schema

Lecture 33 Save Query to DB

Section 13: Usage History

Lecture 34 History Page

Lecture 35 Get Queries Server Action

Lecture 36 Loading History

Lecture 37 Load More Queries

Lecture 38 History Table

Lecture 39 Organize Interfaces

Section 14: Credit Usage Count

Lecture 40 Usage Count from Database

Lecture 41 Usage Context

Lecture 42 Credit Usage Progress Bar

Lecture 43 Fixed SideNav on Scroll and Progress Bar

Section 15: Mobile Navigation

Lecture 44 Mobile Navigation

Lecture 45 Mobile Nav Toggle

Lecture 46 Popup Modal

Section 16: Membership Plan

Lecture 47 Join Membership Modal

Lecture 48 Membership Page

Lecture 49 Stripe Setup

Lecture 50 Plan Card Component

Lecture 51 Display Plan on Membership Page

Section 17: Checkout & Transaction

Lecture 52 Transaction Model

Lecture 53 Check Users Previous Subscriptions

Lecture 54 Create Stripe Checkout Session

Lecture 55 Handle Checkout

Section 18: Webhook

Lecture 56 Stripe Webhook

Lecture 57 Webhook API Endpoint

Lecture 58 Deploy and Try Webhook in Production

Section 19: Subscription

Lecture 59 Loading on Checkout

Lecture 60 Current Subscription Status

Lecture 61 Prevent Content Generation based on Subscribed Status

Lecture 62 Conditional Promo Content based on Subscribed Status

Section 20: Billing & Setting

Lecture 63 Customer Portal Session

Lecture 64 Billing Page

Lecture 65 Settings Page

Lecture 66 Generative AI Page

Section 21: Landing Page

Lecture 67 Landing Page Code

Lecture 68 Landing Page Background Image

Lecture 69 Sign In Popup Modal

Section 22: Promo Cards

Lecture 70 Promo Card Component Code

Lecture 71 Promo Card Component

Lecture 72 Using Promo Card in Landing Page

Lecture 73 Footer

Lecture 74 Final Deployment

Aspiring Web Developers: This course is ideal for individuals who are new to web development and want to learn how to build modern applications using popular technologies like React, NextJs, and TypeScript.,React Developers: Developers who already have a basic understanding of React and want to expand their skill set by learning how to integrate AI functionalities and payment systems into their applications.,Full-Stack Developers: Those looking to enhance their full-stack development skills by learning how to implement server actions, manage databases with MongoDB, and create a subscription-based application.,AI Enthusiasts: Individuals interested in leveraging AI technologies, specifically Google Gemini, to create intelligent applications that can generate content and improve user experiences.,Entrepreneurs and Startups: Entrepreneurs who want to build their own SaaS products or AI-driven applications and need practical knowledge on integrating payment systems and user authentication.,Students in Tech Fields: Students studying computer science or related fields who want to gain hands-on experience with cutting-edge technologies and frameworks that are in high demand in the job market.