Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Course details

In this course, learn how to use Next.js 14 to create a property rental platform with comprehensive features. Get an introduction to Next.js, highlighting its significance as the future of React development with its ability to produce both server-side-rendered and static websites efficiently. Build a real-world project and learn how to implement user authentication with Google and NextAuth, as well as RESTful API routes, route protection, and user profiles. Explore other key functionalities such as property listing CRUD, image uploads with Cloudinary integration, and advanced features like Mapbox maps and a Photoswipe image gallery. Discover the importance of these technologies in creating highly interactive and user-friendly web applications. This course is an ideal fit for IT professionals who already have a foundational understanding of JavaScript and React and are looking to elevate their web development skills.

Learning objectives
Set up and configure a full-stack application with Next.js 14.
Implement user authentication and authorization using NextAuth.
Create and manage RESTful API routes with comprehensive route protection.
Build and manage user profiles along with property listings.
Utilize Mapbox for interactive maps and integrate a Photoswipe image gallery.
Implement responsive design using Tailwind CSS, and manage property bookmarks and sharing.

Concepts

Introduction

Welcome to the course
PropertyPulse project demo
What is Next.js
Environment setup

Next.js Fundamentals and Project Start

New project and folder structure
Layout, homepage, and metadata
File-based routing
Server vs. client components and router hooks
Start on the navbar
Navbar links, drop-downs, and React icons
Active links and conditional rendering
Homepage components
Properties page
Property card dynamic data
Home property listings
Custom not found and loading pages

Database, API Routes, and Property Components

Create MongoDB database
MongoDB Compass and importing data
Database connection and Mongoose
Your first API route
Property and user models
Fetch data using server component
Requests file
Fetch single property
Single property page
Property details component
Spinner component

NextAuth, Sessions, and Google Provider

Google OAuth setup
NextAuth and provider setup
Session provider wrapper
Sign-in button
Save user to database and session
Profile image
Sign-out and protect routes

Create Properties and Cloudinary Integration

Add property form and component state
Form input handlers
Add property POST API route
Get user and submit to database
Cloudinary image upload
Property image display

Profile and Manage Properties

User profile info display
User profile listings
Deleting properties
Toast notifications
Edit property form
Update PUT API route

Map, Bookmarks, and Sharing

Geocoding and Mapbox map
Handle geocode error
Property page cleanup
Bookmark API route
Bookmark button request
Bookmark status and button toggle
Saved properties page
Share buttons

Property Search

Property search component
Search API endpoint
Fetch results from API
Display search results

Messaging System

Message model and form state
Message submit and API route
Require auth for contact form
Fetch messages
Display messages
Mark as read
Delete messages
Order new first
New message count display
Global context for unread messages

Pagination, Featured, Lightbox, and Deploy

Properties client component refactor
Implement pagination
Pagination component
Photoswipe lightbox
Fetch featured properties
Featured property component
Deploy to Vercel