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
Full Stack Development
Sources: neetcode.io
This course will take you on a journey to become a full-stack developer. You will learn how to build and deploy a modern web application from the ground up. Whether you're a beg...
4 hours 24 minutes 36 seconds
Build Viral Telegram Apps Course
Sources: Nikandr Surkov
Learn to develop Telegram Mini Apps from scratch to completion: game mechanics, payment integration (TON and Telegram Stars), built-in viral elements...
37 minutes 59 seconds
Next.js 14 & React - The Complete Guide
Sources: udemy, Academind Pro
I created the bestselling Udemy course on React, now I'm super excited to share this course on NextJS with you - an in-depth course about an amazing React frame
36 hours 13 minutes 15 seconds
Build A Finance Platform
Sources: Code With Antonio
In this 11-hour course, you will learn how to create your own financial SaaS platform with the ability to track income and expenses, categorization...
13 hours 43 minutes 45 seconds