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 |
Want to join the conversation?
Sign in to comment