Next.Js Full Stack Project Tutorial - ✈️ Build & Deploy Full Stack AI Trip Planner NextJs App Using React, Typescript, Arcjet, Convex

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

next js react js nextjs project fullstack project react project tutorial AI Trip Planner

Full Transcript

🌍 Build & Deploy a Full Stack AI Trip Planner App | Next.js, React, TypeScript, Arcjet, Convex, Clerk, Mapbox, Google Place API ✈️ In this tutorial, we’ll build a Full Stack AI Trip Planner Web App from scratch using Next.js, React, TypeScript, Arcjet, Convex, Clerk for authentication, Mapbox for interactive maps, and Google Places API for location data. 🚀 Learn how to integrate AI-powered trip planning, add real-time maps, manage user authentication, optimize performance with Arcjet, and deploy your app seamlessly. 🌟 ⭐ Useful Links: Clerk Docs: https://go.clerk.com/rRd3aLE Convex: https://convex.link/tubeguruji Arcjet: https://launch.arcjet.com/8GD1kEw Eraser Doc: https://dcmk.short.gy/ai-trip-doc 💻 Live Demo: https://www.planaitrip.site 🌟 Become an AI Developer: 👉 https://www.tubeguruji.com – Learn to build real-world AI apps! 📚 Resources: Free Resources: https://dcmk.short.gy/ai-trip-free-resources Source Code: https://dcmk.short.gy/ai-trip-source-code Free Assets: https://dcmk.short.gy/ai-trip-free-assets Source Code for Members: https://www.tubeguruji.com/course-preview/full-stack-ai-trip-planner-nextjs-app 💻 Join our Discord Community: https://discord.gg/DJUpW5bMtz 🖼️ Follow on Instagram: https://www.instagram.com/tubeguruji 💼 Business Inquiries: [email protected] 🔹 What you’ll learn: ✅ Next.js Full Stack App Setup ✅ AI Trip Planning Logic ✅ Google Places API Integration ✅ Mapbox Interactive Maps ✅ Clerk Authentication Setup ✅ Arcjet for Rate Limiting & Security ✅ Convex as a Backend Database ✅ Deployment Steps for Production 🎯 Perfect for: Developers who want to learn Full Stack SaaS Development with AI-powered features and deploy professional-grade web apps. 🔥 Watch now and build your own AI Travel Planner! 🎉 Support the Channel: Join this channel to access exclusive perks & free source codes 👉 https://www.youtube.com/channel/UC33Tc4FCgd_to314_b2hNTg/join #Nextjs #ReactJS #AITripPlanner #GoogleAPI #Mapbox #Convex #Clerk #FullStackDevelopment #SaaSApp #Arcjet CHAPTERS 00:00:00 Introduction 00:06:53 Project Setup 00:17:39 Landing Screen 00:44:37 Authentication 00:58:47 Convex DB Setup 01:19:10 Arcjet Setup (Rate Limiting) 01:27:39 Create Trip Layout 01:36:11 Setup AI Model to Generate Trip 02:00:45 Generative UI 02:14:15 Generate Final Trip Itinerary 02:25:24 Save Trip Detail 02:33:38 Display Trip 03:35:12 Rate Limit to Free User Using Arcjet 03:39:54 Pricing Table/Payment gateway 03:48:21 My Trips 04:15:24 Global 3d Map 04:26:48 Markers On Map 04:35:32 Deploy App to Production