Build Google Generative AI Powered Local Business Directory App for Real World with React NextJs TypeScript + PDF Book

What you'll learn

Streamlined Developer Experience

AI Integration with Google Gemini

Real-World Application Development

Image Upload and Optimization with Cloudinary

Type-Safe Development with TypeScript

Responsive Design with Tailwind CSS

Component Library Integration (shadcn/ui)

Secure Authentication with Clerk

NoSQL Database Management (MongoDB)

Server-Side Rendering with NextJs

State Management using React Context

Easy Form Handling

Dynamic Search & Filter Functionality

Pagination Implementation

Admin Panel for Business Management

SEO Optimization Techniques

Deployment Workflow on Vercel

Performance Optimization Strategies

Error Handling and Debugging

Database Integration and Server Actions

Requirements

Basic understanding of jаvascript and React

Familiarity with HTML and CSS

Description

AI Local Business Directory App: A Modern Web Development JourneyEmbark on an exciting journey into the world of modern web development with this comprehensive Udemy course, "AI Local Business Directory App with React NextJs TypeScript". This course offers a hands-on approach to building a real-world application that combines cutting-edge technologies with practical, easy-to-follow lessons. Our AI-powered local business directory app showcases the power of NextJs, React, and TypeScript in creating a robust, scalable, and user-friendly web application. Through this project, you'll gain invaluable experience in developing a full-stack application that addresses real-world needs while incorporating the latest trends in web development.Key Features:AI-Powered Functionality: Leverage Google's Gemini AI to generate dynamic, engaging business descriptionsModern Tech Stack: Utilize NextJs, React, and TypeScript for a powerful and type-safe development experienceSleek UI Design: Implement responsive and attractive interfaces using Tailwind CSS and shadcnui componentsSecure Authentication: Integrate Clerk for hassle-free, robust user authentication and managementDatabase Integration: Connect to MongoDB for efficient data storage and retrievalImage Handling: Use Cloudinary for seamless image uploads and managementDeployment Made Easy: Learn to deploy your application on Vercel for a smooth production experienceCourse Highlights:Simplified Learning Path: This course is designed to be easy to follow, with clear explanations and step-by-step guidance.Real-World Application: Build a practical, usable application that solves actual business needs in the local directory space.Clean Developer Experience: Focus on writing clean, maintainable code with TypeScript and modern React practices.AI Integration: Explore the exciting world of AI integration in web applications using Google's Gemini AI.Responsive Design: Create a fully responsive application that looks great on all devices using Tailwind CSS.Authentication and Security: Implement secure user authentication and authorization with Clerk.Database Management: Learn to work with MongoDB for efficient data storage and retrieval in a NoSQL environment.Image Optimization: Handle image uploads and optimization using Cloudinary's powerful features.Server-Side Rendering: Harness the power of NextJs for improved performance and SEO.State Management: Implement context-based state management for a smooth user experience.Form Handling: Create and manage complex forms with ease using custom solution.Search Functionality: Implement dynamic search features with server-side actions and client-side updates.Pagination: Learn to implement efficient pagination for large datasets.Admin Panel: Develop an admin interface for managing businesses and users.SEO Optimization: Implement best practices for search engine optimization.Deployment Workflow: Master the process of deploying a NextJs application on Vercel.PDF Booklet: A PDF book with source code to guide you through each video lectures, a great learning experienceThis course is perfect for developers looking to enhance their skills in modern web development. By building this AI-powered local business directory, you'll gain practical experience with a wide range of technologies and concepts that are highly sought after in today's job market. Whether you're a beginner looking to dive into full-stack development or an experienced developer wanting to update your skills with the latest technologies, this course offers something for everyone. The clean, simplified approach ensures that you can focus on learning without getting bogged down in unnecessary complexities. By the end of this course, you'll have built a fully functional, AI-enhanced web application from scratch, giving you the confidence and skills to tackle your own projects or contribute effectively to professional development teams. Join us on this exciting journey and take your web development skills to the next level!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Live Preview

Lecture 3 PDF Book - Google AI React NextJs TypeScript Local Business Directory App

Lecture 4 Source Code

Section 2: Project Setup with ShadcnUI

Lecture 5 NextJs Project Setup

Lecture 6 Theme Provider

Lecture 7 Mode Toggle

Lecture 8 Hydration Warning Fix

Lecture 9 Navigation

Lecture 10 Using Logo

Section 3: Authentication & Protecting Pages

Lecture 11 Clerk Authentication

Lecture 12 Clerk SignIn and SignOut

Lecture 13 Protected Dashboard Page

Section 4: Navigation

Lecture 14 Add Business Link

Lecture 15 Navigation Icons

Lecture 16 Conditional Dashboard Link

Section 5: Business Context

Lecture 17 Add Business Page Layout

Lecture 18 Business Type

Lecture 19 Business Context

Lecture 20 Accessing Business Context

Section 6: Form Fields

Lecture 21 Form Input Fields Array

Lecture 22 Display Input Fields

Lecture 23 Input Events in Context

Lecture 24 Using Local Storage

Section 7: Preview Card

Lecture 25 Preview Card

Lecture 26 Preview Card Header

Lecture 27 Preview Card Content

Lecture 28 SignIn User Before Adding Business

Section 8: Mongo Database

Lecture 29 MongoDB Setup

Lecture 30 Business Model

Section 9: Save Business

Lecture 31 Save Business Server Action

Lecture 32 Create New Business

Lecture 33 Notification, Local Storage and Redirect

Lecture 34 Clerk Redirect and Loading Button

Section 10: Display Businesses

Lecture 35 Get Businesses Server Action

Lecture 36 User's Businesses List on Dashboard

Lecture 37 Display Businesses in Card

Section 11: Business Create and Edit Form

Lecture 38 Business Edit Page

Lecture 39 Get Single Business

Lecture 40 Business Form for Create and Edit

Lecture 41 Reset Form on Add Business Click

Section 12: Image Upload

Lecture 42 Upload to Cloudinary Setup

Lecture 43 Handle Logo Server Action

Lecture 44 Logo Upload Client

Lecture 45 Logo Uploading

Section 13: Google Gemini AI

Lecture 46 Google Gemini Server Action

Lecture 47 Calling AI to Generate Description

Lecture 48 AI Generated Description

Section 14: Edit Business Modal

Lecture 49 Update Business

Lecture 50 Show Modal for Edit Description

Lecture 51 Modal Dialog Box

Section 15: Rich Text Editor for Business Description

Lecture 52 Generate AI Description in Modal

Lecture 53 Using Rich Text Editor

Lecture 54 Render HTML Description

Lecture 55 React Quill CSS Code

Lecture 56 React Quill Editor Custom CSS

Section 16: Check Ownership & Toggle Publish

Lecture 57 Check Ownership

Lecture 58 Allow Delete or Unpublish

Lecture 59 Toggle Published on Context

Lecture 60 Toggle Published on Preview Card

Section 17: Display Businesses with Pagination

Lecture 61 Latest Businesses with Pagination

Lecture 62 Display Businesses on Home Page

Lecture 63 Display Businesses on Preview Card

Lecture 64 Previous and Next Buttons

Lecture 65 Business Card Component

Lecture 66 Pagination Component

Lecture 67 Numbered Pagination Link

Section 18: Single Business View with SEO

Lecture 68 Loading Skeleton Card

Lecture 69 Business by Slug

Lecture 70 Single Business Card

Lecture 71 Description Component

Lecture 72 Strip HTML and Truncate Code

Lecture 73 SEO Metadata

Section 19: Business Highlight on Sidebar

Lecture 74 Business View Page with Sidebar

Lecture 75 Business Highlight Card

Lecture 76 Business Highlight Card Website URL

Lecture 77 Business Highlight Card Phone Email and Hours

Lecture 78 Copy to Clipboard

Section 20: Business Search

Lecture 79 Business Search Server Action

Lecture 80 Placing Search Component in Top Nav

Lecture 81 Real Search Input

Lecture 82 Shared Classes Code

Lecture 83 Search Input and Button Styling

Lecture 84 Search Page with Throttling

Lecture 85 Display Search Results

Section 21: Categories & Addresses

Lecture 86 Categories and Addresses

Lecture 87 Categories and Addresses Server Action

Lecture 88 Getting Categories and Addresses

Lecture 89 Filtered List Component

Lecture 90 Render Categories and Addresses with Filtering

Section 22: Admin Dashboard for Business Management

Lecture 91 Sticky Header on Top

Lecture 92 Admin User

Lecture 93 Get All Business Server Action

Lecture 94 Businesses in Admin Dashboard

Lecture 95 Table to Display Businesses for Admin

Lecture 96 Protect Admin Routes

Lecture 97 Edit Delete Server Action for Admin

Lecture 98 Delete Option for Admin

Section 23: Landing Page

Lecture 99 Businesses Page

Lecture 100 Landing Page Code

Lecture 101 Landing Page

Lecture 102 Background Image

Section 24: Deployment

Lecture 103 Deployment and Post Deployment Updates

Lecture 104 Creating Business Post Deployment

Aspiring Developers: Individuals looking to enhance their web development skills using modern technologies like React, NextJs, and TypeScript.,Entrepreneurs and Business Owners: Those interested in creating a local business directory app to connect with their community and promote local services.,Tech Enthusiasts: Anyone eager to learn about AI integration in applications and how to leverage tools like Google Gemini for enhanced user experiences.,Students in Computer Science: Learners seeking practical, hands-on experience in building real-world applications that can bolster their portfolios.,Developers Transitioning to Full-Stack: Front-end developers who want to expand their skill set into back-end development and database management.