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

Server side rendering with Next + React

Server side rendering with Next + React

Sources: udemy
Do you want to learn the whole process of building a server side React App ?. This is the course for you. We will start from the very beginning, from "I don't even know how to u...
29 hours 43 minutes 19 seconds
Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Sources: udemy
Dive into the world of frontend development with this comprehensive Shadcn UI course, tailored for developers eager to craft state-of-the-art dashboards...
8 hours 12 minutes 38 seconds
Build a Jira clone

Build a Jira clone

Sources: Code With Antonio
In this 16-hour course, consisting of two parts (by the way, this is my longest course!), you will learn how to create a fully functional Jira clone with a...
16 hours 26 minutes 4 seconds
Zero To Shipped. The ultimate Next.js template

Zero To Shipped. The ultimate Next.js template

Sources: Kitze
Zero To Shipped is a powerful Next.js template designed to accelerate the full cycle of web application development. It offers a ready-made infrastructure with.
Next JS: The Complete Developer's Guide

Next JS: The Complete Developer's Guide

Sources: udemy, Stephen Grider
Congratulations! You’re on the brink of entering the fast-evolving world of NextJS, designed to empower developers with the tools to create high-performance, fe
15 hours 35 minutes 12 seconds