Next.js From Scratch 2024
11h 54m 9s
English
Free
Course description
The main project in this course is a full-featured property rental website with property search, browsing and management. User authentication using Next Auth along with the Google provider. Internal messaging, property bookmarking, Mapbox integration, geocoding and more.
Read more about the course
What you'll learn
- Learn how to create SSR websites with Next.js 14
- Build a property rental website from the ground up
- MongoDB, Mongoose & API routes for backend
- Next Auth & Google provider for authentication
- User profiles with listing management
- Cloudinary Image integration
- Bookmarking, maps, pagination, sharing and more
- Internal messaging system for communication
- Deploy to production using Vercel
Watch Online
0:00 0:00
| # | Lesson Title | Duration |
|---|---|---|
| 1 | Welcome To The Course | 02:38 |
| 2 | Premium Docs Download | 01:15 |
| 3 | PropertyPulse Project Demo | 08:36 |
| 4 | What Is Next.js? | 08:45 |
| 5 | Environment Setup | 04:11 |
| 6 | Creating a New Next.js Project | 06:14 |
| 7 | Layout, Homepage & Metadata | 10:48 |
| 8 | File-Based Routing | 07:17 |
| 9 | Server Components, Client Components & Router Hook | 09:45 |
| 10 | Start the Navabar Component | 10:04 |
| 11 | Navbar Links, Dropdowns & React Icons | 12:29 |
| 12 | Active Links & Conditional Rendering | 11:49 |
| 13 | Homepage Components | 15:46 |
| 14 | Properties Page | 07:27 |
| 15 | Property Card Dynamic Data | 14:42 |
| 16 | Home Properties Component | 07:43 |
| 17 | Custom Not Found & Loading Page | 05:59 |
| 18 | Create MongoDB Database | 08:45 |
| 19 | Compass & Importing Data | 04:37 |
| 20 | Database Connection With Mongoose | 06:32 |
| 21 | Your First API Route | 06:06 |
| 22 | Property & User Models | 12:31 |
| 23 | Fetch Data From Server Components | 09:49 |
| 24 | Requests File | 04:26 |
| 25 | Fetch Single Property | 10:52 |
| 26 | Single Property Page | 11:55 |
| 27 | Property Details Component | 15:35 |
| 28 | Spinner Component | 02:38 |
| 29 | Google OAuth Setup | 06:39 |
| 30 | Next Auth & Provider Setup | 08:46 |
| 31 | Session Provider Wrapper | 05:38 |
| 32 | Sign In Button | 09:31 |
| 33 | Save User to Database & Session | 05:58 |
| 34 | Profile Image | 04:40 |
| 35 | Sign Out & Protect Routes | 06:16 |
| 36 | Add Property Form & State | 12:44 |
| 37 | Form Input Handlers | 13:45 |
| 38 | Add Property POST API Route | 13:57 |
| 39 | Get User & Submit To Database | 13:47 |
| 40 | Cloudinary Image Upload | 15:55 |
| 41 | Property Image Display | 15:51 |
| 42 | User Profile Info | 04:55 |
| 43 | User Profile Listings | 17:04 |
| 44 | Deleting Properties | 10:14 |
| 45 | Toast Notifications | 03:55 |
| 46 | Edit Property Form | 12:14 |
| 47 | Update PUT API Route | 12:32 |
| 48 | Geocoding & Mapbox Map | 16:41 |
| 49 | Handle Geocode Error | 04:05 |
| 50 | Property Page Cleanup | 06:12 |
| 51 | Bookmark API Route | 10:29 |
| 52 | Bookmark Button Request | 08:28 |
| 53 | Bookmark Status & Button Toggle | 08:55 |
| 54 | Saved Properties | 12:18 |
| 55 | Share Buttons | 10:42 |
| 56 | Property Search Component | 09:06 |
| 57 | Search API Endpoint | 09:56 |
| 58 | Fetch Results From API | 07:19 |
| 59 | Display Search Results | 10:49 |
| 60 | Message Model & Form State | 13:00 |
| 61 | Message Submit & API Route | 14:23 |
| 62 | Require Auth For Contact Form | 03:54 |
| 63 | Fetch Messages | 10:31 |
| 64 | Display Messages | 11:16 |
| 65 | Mark As Read | 15:20 |
| 66 | Delete Messages | 08:39 |
| 67 | Order New First | 03:26 |
| 68 | New Message Count Display | 11:06 |
| 69 | Global Context For Unread Messages | 11:07 |
| 70 | Properties Component Refactor | 06:34 |
| 71 | Implement Pagination | 08:57 |
| 72 | Pagination Component | 09:32 |
| 73 | Photoswipe Lightbox Gallery | 06:38 |
| 74 | Fetch Featuted Properties | 06:54 |
| 75 | Featured Property Component | 13:12 |
| 76 | Deploy To Vercel | 11:05 |
Comments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
supastarter - SaaS starter kit for Next.js & Nuxt
Sources: supastarter
Supastarter is a powerful starter kit for building scalable and production-ready SaaS applications based on Next.js. Save hundreds of hours...
Shopify + Next.js + Tailwind CSS: Modern Ecommerce
Sources: workingwithshopify.com
Learn how to build blazing fast online storefronts used by the top brands today. Get a quick start with the latest tech stack that is in demand with the top bra
5 hours 7 minutes 23 seconds
Ultimate Next.js Course 2024 Edition
Sources: developedbyed.com
Learn to build a fully functional web application using React and Next.js. This course covers topics like authentication, ORM, creating responsive UIs...
29 hours 39 minutes 9 seconds
The Ultimate NextJs Course
Sources: hamedbahram.io
NextJs is a powerful framework for building fullstack React applications. It makes it easy to create fast, SEO-friendly websites and web applications that are optimized for perf...
15 hours 7 minutes 33 seconds
Build and Deploy a SaaS AI Agent Platform
Sources: Code With Antonio
In this video course, you will create a video call application with AI support from scratch. You will learn how to set up real-time video communication...
13 hours 24 minutes 14 seconds