Skip to main content

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 TitleDuration
1Welcome To The Course02:38
2Premium Docs Download01:15
3PropertyPulse Project Demo08:36
4What Is Next.js?08:45
5Environment Setup04:11
6Creating a New Next.js Project06:14
7Layout, Homepage & Metadata10:48
8File-Based Routing07:17
9Server Components, Client Components & Router Hook09:45
10Start the Navabar Component10:04
11Navbar Links, Dropdowns & React Icons12:29
12Active Links & Conditional Rendering11:49
13Homepage Components15:46
14Properties Page07:27
15Property Card Dynamic Data14:42
16Home Properties Component07:43
17Custom Not Found & Loading Page05:59
18Create MongoDB Database08:45
19Compass & Importing Data04:37
20Database Connection With Mongoose06:32
21Your First API Route06:06
22Property & User Models12:31
23Fetch Data From Server Components09:49
24Requests File04:26
25Fetch Single Property10:52
26Single Property Page11:55
27Property Details Component15:35
28Spinner Component02:38
29Google OAuth Setup06:39
30Next Auth & Provider Setup08:46
31Session Provider Wrapper05:38
32Sign In Button09:31
33Save User to Database & Session05:58
34Profile Image04:40
35Sign Out & Protect Routes06:16
36Add Property Form & State12:44
37Form Input Handlers13:45
38Add Property POST API Route13:57
39Get User & Submit To Database13:47
40Cloudinary Image Upload15:55
41Property Image Display15:51
42User Profile Info04:55
43User Profile Listings17:04
44Deleting Properties10:14
45Toast Notifications03:55
46Edit Property Form12:14
47Update PUT API Route12:32
48Geocoding & Mapbox Map16:41
49Handle Geocode Error04:05
50Property Page Cleanup06:12
51Bookmark API Route10:29
52Bookmark Button Request08:28
53Bookmark Status & Button Toggle08:55
54Saved Properties12:18
55Share Buttons10:42
56Property Search Component09:06
57Search API Endpoint09:56
58Fetch Results From API07:19
59Display Search Results10:49
60Message Model & Form State13:00
61Message Submit & API Route14:23
62Require Auth For Contact Form03:54
63Fetch Messages10:31
64Display Messages11:16
65Mark As Read15:20
66Delete Messages08:39
67Order New First03:26
68New Message Count Display11:06
69Global Context For Unread Messages11:07
70Properties Component Refactor06:34
71Implement Pagination08:57
72Pagination Component09:32
73Photoswipe Lightbox Gallery06:38
74Fetch Featuted Properties06:54
75Featured Property Component13:12
76Deploy To Vercel11:05

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Mastering Next.js 13 with TypeScript

Mastering Next.js 13 with TypeScript

Sources: codewithmosh (Mosh Hamedani)
Clear. Concise. Comprehensive. Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you! It's pe
5 hours 16 minutes 33 seconds
React Node AWS - Build infinitely Scaling MERN Stack App

React Node AWS - Build infinitely Scaling MERN Stack App

Sources: udemy
Master the art of building a highly scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could launch a project...
25 hours 1 minute 19 seconds
Next.js Complex State Management Patterns with RSC

Next.js Complex State Management Patterns with RSC

Sources: fullstack.io
In the dynamic world of web development, mastering complex state management is an essential skills. And since version 13, Next.js introduced a new type of compo
2 hours 56 minutes 24 seconds
Build your AI startup in hours using our customizable demo apps | AnotherWrapper

Build your AI startup in hours using our customizable demo apps | AnotherWrapper

Sources: Fekri
Create your AI startup quickly and efficiently using AnotherWrapper's customizable demo apps. Our all-in-one Next.js AI starter kit includes everything you...
Planning with Claude Code

Planning with Claude Code

Sources: Mckay Wrigley (takeoff)
In the workshop, participants create a simple front-end project— a landing page generator (marketing pages)- using Claude Code and Next.js. The focus is not...
47 minutes 32 seconds