Next.js vs Nuxt 3 Build Full Stack Airbnb Clone using Vue Typescript Tailwind CSS MongoDB Lucia 2024
💡 💡 💡 My Saas Products💡 💡 💡
QuasarUI: https://www.quasarui.com/
QuasarUI: Premium components and templates for Quasar
Quasar: The enterprise-ready cross-platform VueJs framework
#nuxt #fullstack #2024 #next #vs #nuxtjs
Next.js vs Nuxt 3 Build Full Stack Airbnb Clone using Vue Typescript Tailwind CSS MongoDB / Supabase Lucia Prisma | Full Tutorial 2024 | Full Stack Nuxt 3 Projects
Welcome to this comprehensive tutorial on building a full stack web application in 2024 using Nuxt 3! In this tutorial, I'll guide you through the process of creating a powerful Nuxt 3 Airbnb Clone using Vue Typescript Tailwind CSS MongoDB / Supabase Lucia. Get ready for a full-stack development adventure!
This project is inspired from @codewithantonio channel and I copied a lot of basic styles as well. But his video is in Next js and our is in Nuxt js and a lot tech stack is changed. But it's important to mention this. You can check the video here
• Full Stack Airbnb Clone with Next.js ...
---------------------------------------------------------------------------------
💡 💡 💡 Timestamps 💡 💡 💡
00:00 Demo
09:30 Introduction of Tech Stack
23:30 Initial Setup ( Github Authentication and MongoDb )
1:04:10 ShadCN Installation
1:09:00 Navbar UI
1:29:00 Auth UI
1:54:30 Login, Register APIS and integration
2:20:00 Categories UI and Rent Modal Package installation
2:37:00 Listing creation step 1,2 (Category selection + Location selection, Map component, Country autocomplete)
3:03:24 Listing Step 3 (Counter)
3:10:45 Listing steps 4 (Cloudinay, Description, Price)
3:34:00 List creation and Server API protection
3:50:00 Listing Fetching and UI Display
4:16:26 Favorite Functionality
4:40:20 Individual Listing View && API
4:56:50 Listing reservation component
5:09:30 Reservation functionality (routes, logic)
5:23:56 Trips Screen and Cancel Reservation
5:39:16 Reservations Screen
5:44:00 Favorites screen and Some error message improvement
5:52:23 Properties Fetching and Deletion
6:00:00 Finish: Filters modal (Assigning various filters, add advanced querying logic to getListings, add loading and error pages)
---------------------------------------------------------------------------------
✉️ ✉️ ✉️ Business Inquiries ✉️ ✉️ ✉️
[email protected]
---------------------------------------------------------------------------------
💡 💡 💡 Resource Links 💡 💡 💡
➡️Eraser: https://www.eraser.io/
➡️Support me: / codewithhafiz
➡️GitHub: https://github.com/hafizjavaid/
➡️Source Code: https://tinyurl.com/yrux96wa
➡️Supabase - https://supabase.com/
➡️MongoDB: https://www.mongodb.com/
➡️Prisma - https://www.prisma.io/
➡️Tailwind CSS - https://tailwindcss.com/docs/installa...
➡️ShadCN Vue: https://www.shadcn-vue.com/
➡️Lucia Auth: https://lucia-auth.com/
---------------------------------------------------------------------------------
💡 💡 💡 Connect with CodeWithHafizJavaid 💡 💡 💡
➡️Website: https://codewithhafizjavaid.com/
➡️Linked In: / hafizjavaid
➡️Github: https://github.com/hafizjavaid
➡️Twitter: / codewithhafiz
➡️Facebook: / codeaddictor
---------------------------------------------------------------------------------
💡 💡 💡 Key Technologies & Tools 💡 💡 💡
Database: For database we will use the MongoDB / Supabase with the help of Prisma, it's easy to switch to any database thanks to the power of Prisma
Authentication: For Authentication we will use Lucia Auth. Lucia is an authentication library written in *TypeScript* that can be extended for use with any framework. Lucia works with the *database of your choice* and provides you with an easy-to-use API that can be extended depending on your use case.
Styling: Crafting a beautiful and responsive user interface is crucial. We'll be using Tailwind CSS and Shadcn to make your web app shine.
🚀 This tutorial is perfect for developers looking to build advanced web applications and take advantage of the latest technologies. Whether you're a beginner or an experienced developer, we'll walk you through the entire process, step by step.
Let's embark on this coding journey together and turn your vision into reality! If you have any questions or run into issues, feel free to leave a comment below. Happy coding!
#nuxtjs #vuejs #ai #nuxt3 #vue3 #vue #2023 #nuxt #2024
---------------------------------------------------------------------------------
💡 💡 💡 Key Word 💡 💡 💡
next.js vs nuxt, nuxt js,nuxt js tutorial,nuxt js project,nuxt js tutorial for beginners,nuxt js 3 tutorial,nuxt js authentication, nuxt3 projects, nuxt projects,nuxt js vs vue js,nuxt 3 tutorial,nuxt 3 project,nuxt project,vue js,vue js tutorial,vue js tutorial for beginners,vue js project,vue js crash course,nuxt crash course,nuxt js 3 crash course,stripe,openai,sass,ai,typescript,prisma,supabase,shadcn,shadcn ui, shadcn ui nuxt, shadcn ui vue, lucia
Watch video Next.js vs Nuxt 3 Build Full Stack Airbnb Clone using Vue Typescript Tailwind CSS MongoDB Lucia 2024 online without registration, duration hours minute second in high quality. This video was added by user CodeWithHafizJavaid 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,771 once and liked it 179 people.