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

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
Full Stack Development

Full Stack Development

Sources: neetcode.io
This course will take you on a journey to become a full-stack developer. You will learn how to build and deploy a modern web application from the ground up. Whether you're a beg...
4 hours 24 minutes 36 seconds
Build A Slack Clone

Build A Slack Clone

Sources: Code With Antonio
In this 15-hour course, you will create your own Slack clone using advanced technologies such as Next.js, Convex, Tailwind CSS, Shadcn UI, and others.
15 hours 13 minutes 30 seconds
Build an LMS Platform

Build an LMS Platform

Sources: Code With Antonio
In this 10-hour course, you will learn how to create your own LMS (Learning Management System) platform from scratch. We will use modern technologies...
10 hours 41 minutes 23 seconds
Build Your SaaS AI Web Platform From Zero to Production

Build Your SaaS AI Web Platform From Zero to Production

Sources: Code4Startup (coderealprojects)
Discover the new trend in the world of startups and indie hackers - the creation of microservice AI-SaaS products that do more than just meet needs...
8 hours 36 minutes 2 seconds