Next.Js Full Stack Project Tutorial - How to Create Full Stack AI Website Generator App with Nextjs, React, Typescript, ImageKit

Master Next.js & React Full Stack Development: Dive into AI-Powered App Creation with TubeGuruji – Build, Deploy, Conquer!

5.0 (2)

18 learners

What you'll learn

Learn to build and deploy full-stack applications using Next.js, React, and Tailwind CSS.
Master the integration of various APIs such as Google Maps, Clerk, and Firebase within Next.js apps.
Develop proficiency in using NextAuth for authentication in full-stack applications.
Gain skills in integrating AI technologies to enhance full-stack application functionalities.

This course includes

346 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

best ai website builder ai website builder how to create full stack project nexths15 next js 15 next js tutorial

Full Transcript

Learn how to create a Full Stack AI Website Generator SaaS App with Next.js, React, TypeScript, Tailwind, Clerk, Drizzle ORM, Neon & ImageKit. 🔗 Useful Links & special bonuses ❤️ Clerk: https://go.clerk.com/FhafaxB Signup for ImageKit’s forever free plan : https://tinyurl.com/ujy8h9vn Eraser Docs: https://dcmk.short.gy/ai-website-generator-doc TubeGuruji Pro: https://www.tubeguruji.com 🔥 Create stunning AI short films with Kravix Studio – Free to try! 👉 https://kravixstudio.com?ref=yt-ai-web 👉 App Demo : https://dcmk.short.gy/ai-web-gen-demo 🔥 Features: One-click AI website generation Inline editing (no full regen 🎉) Auth with Clerk Database with Drizzle ORM + Neon Image upload/optimization with ImageKit Modern UI with Tailwind & Shadcn Perfect for anyone building AI-powered SaaS apps! Source Code 🔗 Free Resources : https://dcmk.short.gy/ai-website-gen-free-resources 🔗 Source Code: https://dcmk.short.gy/ai-web-gen-source-code 🔗 Free Assets : https://dcmk.short.gy/ai-website-generator-doc 🔗 Member Only Source Code : https://dcmk.short.gy/ai-website-generator-member-source-code 📢 Stay Connected: 💻 Join our Discord Community - https://discord.gg/DJUpW5bMtz 🖼️ Follow us on Instagram:https://www.instagram.com/tubeguruji 💼 Business Inquiries: [email protected] Join this channel to get access to perks: [https://www.youtube.com/channel/UC33Tc4FCgd_to314_b2hNTg/join ⏰Timestamps: 00:00:00 — Cool 7D Intro and Demo 👌 00:09:24 — How to Create NextJs App 00:14:33 — how to Setup Shadcn UI Component Library 00:20:01 — Landing Screen 00:36:49 — How to Setup Drizzle ORM and Neon DB 00:44:18 — How to Setup Auth using Clerk 01:07:47 — Workspace Layout 01:23:14 — Create Website Generator Project 01:40:29 — Playground Layout 01:49:16 — Quick Update 01:51:26 — Chat Section 02:09:28 — How to Connect AI Models 02:35:55 — Save Chat Conversation 02:42:17 — Display Generated Website 02:48:46 — Save Generated Code 02:47:34 — Render Website in Iframe 03:01:15 — Webpage Tools 03:26:04 — Element Selection 03:30:27 — Element Settings 03:43:22 — How To Setup Imagekit & Use AI Image Transformation 04:13:23 — Update & Save Settings 04:24:57 — Display Project List 04:35:12 — How to Setup Clerk Billing 04:52:55 — How to Deploy NextJs App on Vercel for Free

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

Direção de Arte no Cinema e Jogos: Fundamentos Essenciais

Transforme sua criatividade em carreira: descubra os segredos da Direção de Arte no cinema, jogos e design gráfico com especialistas e aprenda a criar mundos visuais incríveis. Inscreva-se agora e revolucione sua visão artística!

⭐ 4.0

29 ratings

0 min