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

Full Stack Authentication in 20 Minutes With Clerk (Next.js + NestJS)

Full Stack Authentication in 20 Minutes With Clerk (Next.js + NestJS)

Sources: Michael Guay
Find out how to set up authentication with Clerk in 20 minutes in a Next.js and NestJS application. A simple and secure integration for your project.
18 minutes 9 seconds
Build Viral Telegram Apps Course

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
Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)

Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)

Sources: Web Dev Cody
Are you looking to take your web development skills to the next level? Do you want to learn how to build a fully functional icon generator that integrates with
5 hours 53 minutes 23 seconds
Build and Deploy a Lovable Clone

Build and Deploy a Lovable Clone

Sources: Code With Antonio
In this course, you will create an AI platform for generating applications from scratch. You will learn how to build fully functional full-stack applications...
10 hours 34 minutes 16 seconds