Description
In this course, you will :
- Learn the fundamentals of NextJS 14.
- Create a Real-World Property Rental Website from Scratch.
- File-based routing, React Server Components, data fetching, and API Routes+
- NextAuth and Google Provider for Authentication and Authorization
- Use MongoDB and Mongoose for API routes.
- Internal messaging, bookmarks, search, image lightboxes, and pagination+
- Implement Cloudinary for Image Storage and Optimization.
Syllabus:
1. Next.js Fundamentals & Project Start
- New Project & Folder Structure
- Layout, Homepage & Metadata
- File-Based Routing
- Server vs Client Components & Router Hooks
- Start On The Navbar
- Navbar Links, Dropdowns & React Icons
- Active Links & Conditional Rendering
- Homepage Components
- Properties Page
- Property Card Dynamic Data
- Home Property Listings
- Custom Not Found & Loading Pages
2. Database, API Routes & Property Components
- Create MongoDB Database
- MongoDB Compass & Importing Data
- Database Connection & Mongoose
- Your First API Route
- Property & User Models
- Fetch Data Using Server Component
- Requests File
- Fetch Single Property
- Single Property Page
- Property Details Component
- Spinner Component
3. Next Auth, Sessions & Google Provider
- Google OAuth Setup
- Next Auth & Provider Setup
- Session Provider Wrapper
- Sign In Button
- Save User to Database & Session
- Profile Image
- Sign Out & Protect Routes
4. Create Properties & Cloudinary Integration
- Add Property Form & Component State
- Form Input Handlers
- Add Property POST API Route
- Get User & Submit To Database
- Cloudinary Image Upload
- Property Image Display
5. Profile & Manage Properties
- User Profile Info Display
- User Profile Listings
- Deleting Properties
- Toast Notifications
- Edit Property Form
- Update PUT API Route
6. Map, Bookmarks & Sharing
- Geocoding & Mapbox Map
- Handle Geocode Error
- Property Page Cleanup
- Bookmark API Route
- Bookmark Button Request
- Bookmark Status & Button Toggle
- Saved Properties Page
- Share Buttons
7. Property Search
- Property Search Component
- Search API Endpoint
- Fetch Results From API
- Display Search Results
8. Messaging System
- Message Model & Form State
- Message Submit & 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
9. Pagination, Featured, Lightbox & Deploy
- Properties Client Component Refactor
- Implement Pagination
- Pagination Component
- Photoswipe Lightbox
- Fetch Featured Properties
- Featured Property Component
- Deploy To Vercel