AI React NextJS TypeScript Full Stack Business Directory App

Focused View

Ryan Dhungel

7:52:08

0 View

1 - Introduction

1 -Introduction.mp4

03:45

2 -Live Preview.mp4

13:04

3 -AiLocalBusinessApp.pdf

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

3 - Source Code.html

2 - Project Setup with ShadcnUI

1 -NextJs Project Setup.mp4

08:37

2 -Theme Provider.mp4

06:08

3 -Mode Toggle.mp4

06:13

4 -Hydration Warning Fix.mp4

02:24

5 -Navigation.mp4

09:17

6 -Using Logo.mp4

04:15

3 - Authentication & Protecting Pages

1 -Clerk Authentication.mp4

06:47

2 -Clerk SignIn and SignOut.mp4

03:01

3 -Protected Dashboard Page.mp4

02:39

4 - Navigation

1 -Add Business Link.mp4

02:29

2 -Navigation Icons.mp4

04:46

3 -Conditional Dashboard Link.mp4

04:06

5 - Business Context

1 -Add Business Page Layout.mp4

04:35

2 -Business Type.mp4

05:21

3 -Business Context.mp4

05:45

4 -Accessing Business Context.mp4

02:15

6 - Form Fields

1 -Form Input Fields Array.mp4

07:57

2 -Display Input Fields.mp4

10:45

3 -Input Events in Context.mp4

09:48

4 -Using Local Storage.mp4

04:51

7 - Preview Card

1 -Preview Card.mp4

04:40

2 -Preview Card Header.mp4

11:57

3 -Preview Card Content.mp4

06:28

4 -SignIn User Before Adding Business.mp4

03:34

8 - Mongo Database

1 -MongoDB Setup.mp4

06:56

2 -Business Model.mp4

05:29

9 - Save Business

1 -Save Business Server Action.mp4

09:33

2 -Create New Business.mp4

04:05

3 -Notification, Local Storage and Redirect.mp4

06:31

4 -Clerk Redirect and Loading Button.mp4

05:45

10 - Display Businesses

1 -Get Businesses Server Action.mp4

04:12

2 -Users Businesses List on Dashboard.mp4

06:43

3 -Display Businesses in Card.mp4

04:08

11 - Business Create and Edit Form

1 -Business Edit Page.mp4

02:12

2 -Get Single Business.mp4

06:04

3 -Business Form for Create and Edit.mp4

03:56

4 -Reset Form on Add Business Click.mp4

08:19

12 - Image Upload

1 -Upload to Cloudinary Setup.mp4

05:26

2 -Handle Logo Server Action.mp4

04:28

3 -Logo Upload Client.mp4

14:06

4 -Logo Uploading.mp4

04:16

13 - Google Gemini AI

1 -Google Gemini Server Action.mp4

13:19

2 -Calling AI to Generate Description.mp4

08:03

3 -AI Generated Description.mp4

06:24

14 - Edit Business Modal

1 -Update Business.mp4

10:00

2 -Show Modal for Edit Description.mp4

06:45

3 -Modal Dialog Box.mp4

04:59

15 - Rich Text Editor for Business Description

1 -Generate AI Description in Modal.mp4

05:13

2 -Using Rich Text Editor.mp4

05:41

3 -Render HTML Description.mp4

04:24

4 -React Quill Editor Custom CSS.mp4

02:24

4 - React Quill CSS Code.html

16 - Check Ownership & Toggle Publish

1 -Check Ownership.mp4

10:54

2 -Allow Delete or Unpublish.mp4

03:26

3 -Toggle Published on Context.mp4

04:48

4 -Toggle Published on Preview Card.mp4

06:06

17 - Display Businesses with Pagination

1 -Latest Businesses with Pagination.mp4

04:34

2 -Display Businesses on Home Page.mp4

13:39

3 -Display Businesses on Preview Card.mp4

06:23

4 -Previous and Next Buttons.mp4

04:48

5 -Business Card Component.mp4

04:18

6 -Pagination Component.mp4

02:24

7 -Numbered Pagination Link.mp4

07:23

18 - Single Business View with SEO

1 -Loading Skeleton Card.mp4

06:27

2 -Business by Slug.mp4

05:58

3 -Single Business Card.mp4

15:16

4 -Description Component.mp4

09:33

5 -SEO Metadata.mp4

15:29

5 - Strip HTML and Truncate Code.html

19 - Business Highlight on Sidebar

1 -Business View Page with Sidebar.mp4

05:44

2 -Business Highlight Card.mp4

06:45

3 -Business Highlight Card Website URL.mp4

04:54

4 -Business Highlight Card Phone Email and Hours.mp4

04:57

5 -Copy to Clipboard.mp4

03:34

Description

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

Who is this for?

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.

What You Need to Know?

Basic understanding of JavaScript and React

Familiarity with HTML and CSS

More details

Description
AI Local Business Directory App: A Modern Web Development Journey
Embark 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 descriptions
Modern Tech Stack: Utilize NextJs, React, and TypeScript for a powerful and type-safe development experience
Sleek UI Design: Implement responsive and attractive interfaces using Tailwind CSS and shadcnui components
Secure Authentication: Integrate Clerk for hassle-free, robust user authentication and management
Database Integration: Connect to MongoDB for efficient data storage and retrieval
Image Handling: Use Cloudinary for seamless image uploads and management
Deployment Made Easy: Learn to deploy your application on Vercel for a smooth production experience

Course 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 experience
This 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!
Who this course is for:
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.

User Reviews

Rating

average 0

Total votes0

Focused display

React

Ryan Dhungel

Instructor's Courses

Ryan Dhungel is a Web Developer from Sydney, Australia. He builds Web apps using JavaScript, Node JS, React JS, Vue JS, Laravel and other emerging platforms.He also wants to make the entire Web Development process enjoyable and productive at the same time by producing well explained practical Tutorials and Training packages for fellow developers.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.