AI Business Directory Full Stack App: React NextJs Gemini TS
Год выпуска: 9/2024
Производитель: Udemy
Сайт производителя:
https://www.udemy.com/course/business-directory-full-stack-react-nextjs/?
Автор: Ryan Dhungel
Продолжительность: 10h 30m
Тип раздаваемого материала: Видеоурок
Язык: Английский
Описание: 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
Содержание
Introduction
03:45
Live Preview
13:04
PDF Book - Google AI React NextJs TypeScript Local Business Directory App
00:07
Source Code
00:21
NextJs Project Setup
08:37
Theme Provider
06:08
Mode Toggle
06:13
Hydration Warning Fix
02:24
Navigation
09:17
Using Logo
04:15
Clerk Authentication
06:47
Clerk SignIn and SignOut
03:01
Protected Dashboard Page
02:39
Add Business Link
02:29
Navigation Icons
04:46
Conditional Dashboard Link
04:06
Add Business Page Layout
04:35
Business Type
05:21
Business Context
05:45
Accessing Business Context
02:15
Form Input Fields Array
07:57
Display Input Fields
10:45
Input Events in Context
09:48
Using Local Storage
04:51
Preview Card
04:40
Preview Card Header
11:57
Preview Card Content
06:28
SignIn User Before Adding Business
03:34
MongoDB Setup
06:56
Business Model
05:29
Save Business Server Action
09:33
Create New Business
04:05
Notification, Local Storage and Redirect
06:31
Clerk Redirect and Loading Button
05:45
Get Businesses Server Action
04:12
User's Businesses List on Dashboard
06:43
Display Businesses in Card
04:08
Business Edit Page
02:12
Get Single Business
06:04
Business Form for Create and Edit
03:56
Reset Form on Add Business Click
08:19
Upload to Cloudinary Setup
05:26
Handle Logo Server Action
04:28
Logo Upload Client
14:06
Logo Uploading
04:16
Google Gemini Server Action
13:19
Calling AI to Generate Description
08:03
AI Generated Description
06:24
Update Business
10:00
Show Modal for Edit Description
06:45
Modal Dialog Box
04:59
Generate AI Description in Modal
05:13
Using Rich Text Editor
05:41
Render HTML Description
04:24
React Quill CSS Code
00:15
React Quill Editor Custom CSS
02:24
Check Ownership
10:54
Allow Delete or Unpublish
03:26
Toggle Published on Context
04:48
Toggle Published on Preview Card
06:06
Latest Businesses with Pagination
04:34
Display Businesses on Home Page
13:39
Display Businesses on Preview Card
06:23
Previous and Next Buttons
04:48
Business Card Component
04:18
Pagination Component
02:24
Numbered Pagination Link
07:23
Loading Skeleton Card
06:27
Business by Slug
05:58
Single Business Card
15:16
Description Component
09:33
Strip HTML and Truncate Code
00:13
SEO Metadata
15:29
Business View Page with Sidebar
05:44
Business Highlight Card
06:45
Business Highlight Card Website URL
04:54
Business Highlight Card Phone Email and Hours
04:57
Copy to Clipboard
03:34
Business Search Server Action
05:27
Placing Search Component in Top Nav
08:20
Real Search Input
08:33
Shared Classes Code
00:08
Search Input and Button Styling
06:34
Search Page with Throttling
13:22
Display Search Results
06:25
Categories and Addresses
03:27
Categories and Addresses Server Action
04:06
Getting Categories and Addresses
03:02
Filtered List Component
07:08
Render Categories and Addresses with Filtering
12:45
Sticky Header on Top
03:27
Admin User
06:17
Get All Business Server Action
02:23
Businesses in Admin Dashboard
03:41
Table to Display Businesses for Admin
09:38
Protect Admin Routes
04:41
Edit Delete Server Action for Admin
06:18
Delete Option for Admin
09:15
Businesses Page
04:25
Landing Page Code
02:25
Landing Page
09:15
Background Image
03:30
Deployment and Post Deployment Updates
10:37
Creating Business Post Deployment
02:42
Файлы примеров: не предусмотрены
Формат видео: MP4
Видео: AVC, 1280x720, 16:9, 30fps, ~1400kbps
Аудио: AAC, 44.1kHz, 128kbps, stereo
