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

Build a Full-Stack Todo App with Turborepo, tRPC, Next.js, NestJS & React Native

Build a Full-Stack Todo App with Turborepo, tRPC, Next.js, NestJS & React Native

Sources: Michael Guay
Master Turborepo, tRPC, Next.js, NestJS, and React Native by creating a full-stack Todo application with complete type safety and a mobile version.
2 hours 47 minutes 38 seconds
Stripe for SaaS

Stripe for SaaS

Sources: fireship.io
You will build a Stock Photography Subscription SaaS Product from scratch where users can sign up for a subscription to access a library of images. Every monetized action is tra...
1 hour 11 minutes 29 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
React Simplified - Next.js

React Simplified - Next.js

Sources: webdevsimplified.com
Welcome to my Next.js course. This course is a little bit interesting in how it's structured because it's actually broken into two main sections. That's because
9 hours 33 minutes 4 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