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 Project with Claude Code
Sources: Mckay Wrigley (takeoff)
In this workshop, participants step by step create an MVP clone of FigJam - a visual collaboration editor - using Claude Code, Opus 4, Cursor IDE, and...
1 hour 12 minutes 14 seconds
Next.js - The Full Course
Sources: fireship.io
Next.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil
1 hour 14 minutes 14 seconds
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT
Sources: udemy
This is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects
6 hours 52 minutes 28 seconds
The Joy of React
Sources: Josh Comeau
The all-new interactive learning experience that teaches you how to build rich, dynamic web apps with React. So, let’s be real. Learning React is hard. Over the past few years, ...
25 hours 35 minutes 33 seconds