filmov
tv
Next.js vs Nuxt 3 Build Full Stack Airbnb Clone using Vue Typescript Tailwind CSS MongoDB Lucia 2024
Показать описание
#nuxt #fullstack #2024 #next #vs #nuxtjs
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
---------------------------------------------------------------------------------
💡 💡 💡 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 ✉️ ✉️ ✉️
---------------------------------------------------------------------------------
💡 💡 💡 Resource Links 💡 💡 💡
---------------------------------------------------------------------------------
💡 💡 💡 Connect with CodeWithHafizJavaid 💡 💡 💡
---------------------------------------------------------------------------------
💡 💡 💡 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.
ORM: Our data modeling will be handled by Prisma, ensuring your application's data structure remains organized and consistent.
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 get started on this exciting journey of building a Nuxt 3 Airbnb Clone together!
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 💡 💡 💡
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
---------------------------------------------------------------------------------
💡 💡 💡 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 ✉️ ✉️ ✉️
---------------------------------------------------------------------------------
💡 💡 💡 Resource Links 💡 💡 💡
---------------------------------------------------------------------------------
💡 💡 💡 Connect with CodeWithHafizJavaid 💡 💡 💡
---------------------------------------------------------------------------------
💡 💡 💡 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.
ORM: Our data modeling will be handled by Prisma, ensuring your application's data structure remains organized and consistent.
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 get started on this exciting journey of building a Nuxt 3 Airbnb Clone together!
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 💡 💡 💡
0:04:31
Frontend Face-Off: Next.js vs. Nuxt.js Features, Similarities, and Differences
0:14:03
Nuxt vs Next: A Look At Server Components And Server Actions
0:02:50
Nuxt in 100 Seconds
0:04:55
The Nuxt big thing in web development?
0:02:48
Next.js (React) Vs. Nuxt.js (Vue)
6:29:30
Next.js vs Nuxt 3 Build Full Stack Airbnb Clone using Vue Typescript Tailwind CSS MongoDB Lucia 2024
0:21:58
I built the same app 10 times // Which JS Framework is best?
0:11:52
Next.js in 100 Seconds // Plus Full Beginner's Tutorial
0:49:13
Shai Reznik - JavaScript Streaming - A Qwik glimpse into the future - DevWorld 2024
0:00:27
Nuxt vs Next what do you pick? #javascript #nuxtjs #nextjs #vuejs #reactjs
0:01:30
Which JS framework is best for fast loading pages?
0:04:11
They made React great again?
0:02:21
NestJS in 100 Seconds
3:10:29
Nuxt 3 — Course for Beginners
5:23:11
Next.js 15 Crash Course | Build and Deploy a Production-Ready Full Stack App
0:06:51
Why I Don't Use NextJS For My Side Project Anymore
0:00:16
Working on a Nuxt.js Project 🔥🔥
0:11:33
Trying React (Next.js) For The First Time As Vue Developer
0:07:21
Nuxt 3 Vs Next 13 | Performance test | ab test
0:02:29
Vite in 100 Seconds
1:12:47
🤯 I MIGRATED a Next.js application to Nuxt.js in 1 HOUR
0:08:23
This UI component library is mind-blowing
0:00:24
Fast Food App in React Native 🔥 #shorts #reactnative #expo #reactjs #app #ui
0:39:49
Next.js has real competition now
Комментарии