Lesson 189 of 213

#239 Add Interactive Maps with Mapbox & React | Hotel Detail UI - Part 4

Name: #239 Add Interactive Maps with Mapbox & React | Hotel Detail UI - Part 4
Uploaded: 2025-08-17T12:57:16.322Z
Duration: 15 min

Lessons213 lessons

1Create a Node.js Project from Scratch | npm init, package.json & Nodemon Setup Explained | Part #51
2What is ExpressJS? Installing & Setting Up Your First Express App | Part #52
3Start Express Server & Handle Incoming Requests - Creating a Web Server | Part #53
4Express.js Routing Explained - Introduction to HTTP Request Types & Response Methods | Part #54
5Web Development Fundamentals: Frontend vs. Backend vs. Full Stack (2026) | Part #55
6Static vs. Dynamic Websites - Everything You Need to Know | Part #56
7API Powered Websites Explained | Short Introduction to Web APIs & Client-Side Rendering | Part #57
8REST Architecture & RESTful APIs Explained | REST Principles & Best Practices | Part #58
9HTTP Response Status Codes Explained - When to Use 200, 201, 404, 500, and More | Part #59
10Build a Simple GET API in Express (No Database Needed) | Get All Hotels from JSON File | Part #60
11Installing Postman - The Ultimate API Testing Tool for Node JS | Part #61
12Handle POST Requests in Express | Build a Create Hotel API - Body Parsing & File Writing | Part #62
13Add Controller in Express (MVC Architecture) | Moving Route Handler Logic to Controllers | Part #63
14Reading Express Route Parameters | Understanding Param Object & Optional Parameters | Part #64
15Handle Find By ID Requests in Express | Build a Search API & Handling "Not Found" Errors | Part #65
16How to Update Data in Express API: Building the PATCH Endpoint | PUT vs PATCH Explained | Part #66
17Implementing the DELETE API Endpoint | How to Delete Resources in Express | Part #67
18Route Chaining in Express JS Explained | Chain Multiple Routes with app.route() | Part #68
19Mounting Routes in Express | How to Organize Large Express Apps: Using express.Router() | Part #69
20Express.js Middleware Explained: The Request-Response Lifecycle | Part #70
21Create Your First Custom Middleware in Express JS (Step-by-Step) | Part #71
22Using Third-Party Middleware in Express: The Morgan Logger Middleware Explained | Part #72
23Mastering Param Middleware in Express JS: Targeting Route Parameters | Part #73
24Practical Use Case for Param Middleware | Building a "Check Resource Exists" Middleware | Part #74
25Middleware Chaining in Express JS | Validating Request Body before Save | Part #75
26How to Serve Static Files in Express JS | Understanding express.static() Method | Part #76
27Read Express Documentation Like a Pro | Section Summary: Middleware, Routing & Mounting | Part #77
28Introduction to MongoDB (SQL vs NoSQL) | Why it’s the Perfect Match for Node Applications | Part #78
29Setting Up Local MongoDB Development Environment: Install MongoDB & MongoShell on Windows | Part #79
30Create, Switch, and Drop Databases in MongoDB | Understanding the use Command & db Object | Part #80
31What is a MongoDB Document, JSON & BSON Type & Why MongoDB is More Flexible than SQL | Part #81
32MongoDB Collections : Implicit vs. Explicit Creation, Query, and Drop Collections | Part #82
33MongoDB CRUD: How to Insert Documents (insertOne vs insertMany), Duplicate Key Errors | Part #83
34MongoDB Read Operations: find() vs findOne() Explained | How to Include or Exclude Fields | Part #84
35MongoDB Update Operations: updateOne, updateMany and replaceOne | $set Operator Explained | Part #85
36MongoDB Delete Operations: deleteOne and deleteMany Explained (Avoid Common Errors) | Part #86
37Why MongoDB is So Fast: Understanding Cursors and Batching in MongoDB | Part #87
38MongoDB Comparison Operators: $gt, $lt, $in, and more | How to Filter Data Like a Pro | Part #88
39MongoDB Logical Operators Explained | Combine Multiple Conditions in MongoDB Queries | Part #89
40MongoDB Element Operators: Handling Missing Fields & Wrongly Typed Data | Part #90
41MongoDB Security 101: Enabling Authentication & Authorization | A Step-by-Step Guide | Part #91
42MongoDB Security: How to Create a Superuser in MongoDB | The userAdminAnyDatabase Role | Part #92
43MongoDB Role-Based Access Control: Creating a dbOwner User | Part #93
44MongoDB Compass Tutorial: The GUI for MongoDB (Installation & Setup) | Part #94
45MongoDB Atlas Tutorial: Deploying Your Database to the Cloud (Step-by-Step Tutorial) | Part #95
46Introduction to Mongoose ODM: Why Use Mongoose? Schemas, Models, and Validation Explained | Part #96
47Connecting Express to MongoDB Atlas with Mongoose | Handle Connection Errors & Events | Part #97
48Mongoose Schemas & Models Explained (The Blueprint for Your Data) | Part #98
49Mongoose Validation Tutorial: How to Add Custom Error Messages in Mongoose Schemas | Part #99
50Refactoring to MVC Architecture in Express & Mongoose | The MVC Pattern Explained | Part #100
51Mongoose Model.create() vs .save(): Implementing POST Requests with Mongoose Models | Part #101
52Mongoose find() Tutorial: Fetching All Documents & Response Enveloping | Part #102
53How to Use Express Route Parameters (req.params) with Mongoose findById() | #103
54Mongoose findByIdAndUpdate() Tutorial: Updating Data the Right Way | Part #104
55How to Delete Documents in Mongoose & Why 204 No Content is Standard | #105
56Modeling a Real-World Hotel API: Refactoring Mongoose Schemas | Part #106
57How to Bulk Import Data into MongoDB from Node JS | Building a Custom Mongoose Script | Part #107
58Implement Search & Filtering in Node.js API with Mongoose Query Params | Part #108
59Sanitize API Queries: How to Exclude Fields from req.query in Express | Part #109
60Advanced Filtering in Express (Part 1): How to Filter Data Ranges in Mongoose & Express | Part #110
61Advanced Filtering in Express (Part 2): Convert URL Queries into MongoDB Operators | Part #111
62Node.js Mongoose Sorting Tutorial | Query Object, sort(), Multiple Fields Explained | Part #112
63Implementing Dynamic Field Limiting & Projection | Reduce API Payload Size | Part #113
64Master API Pagination: Implementing skip() and limit() in Express | Part #114
65Alias Routes in Express.js Tutorial | Middleware + Query Manipulation Explained | Part #115
66Building a Reusable API Features Class | Advanced Query Pipeline with Method Chaining | Part #116
67Understanding Environment Variables in Node.js & Express (Part 1) | Node Environments | Part #117
68Managing Environment Variables with dotenv (Part 2) | Using .env Files in Node JS | Part #118
69MongoDB Aggregation Framework Explained | Data Analytics with MongoDB | Part #119
70Calculate Averages and Totals with Aggregation Pipeline | $match, $group, & $sort Stage | Part #120
71Flatten Arrays & Limit Fields with Aggregation Pipeline | $unwind & $project Stage | Part #121
72MongoDB Aggregation Pipeline | Building 3 Essential API Endpoints for Your App | Part #122
73Mongoose Virtual Properties Explained | Add Dynamic Fields Without Saving to DB | Part #123
74Introduction to Mongoose Middlewares | How to Intercept Database Operations | Part #124
75Mongoose Pre-Hook Document Middleware | Building Pre-Save Hook for Data Validation | Part #125
76Mongoose Post-Hook Document Middleware | Building an Automated Activity Logging System | Part #126
77Mongoose Pre-Query Middleware | Implementing Soft Deletes and Custom Update Logic | Part #127
78Mongoose Post Query Middleware | Global Filter with Regex and Automated Activity Logging | Part #128
79Mongoose Aggregation Middleware | Automatically Filter Deleted Documents in Express.js | Part #129
80Mongoose Built-in Validators | Schema Constraints and Data Transformers in Express | Part #130
81Mongoose Custom Validators and Getters | Advanced Schema Validation in Node.js & Express | Part #131
82Using Third-Party Validators in Mongoose | Integrating Validator.js with Express | Part #132
83Handling Unmatched Routes in Express.js | Creating a 404 Default Route | Part #133
84Global Error Handling Middleware in Express.js | Operational vs Programming Errors | Part #134
85Creating a Custom Error Class in Express.js for Global Error Handling | Part #135
86Building a Reusable Async Error Handler for Express | Error Handling in Express | Part #136
87Handling Missing Resources: Implementing 404 Errors for Invalid MongoDB IDs in Express | Part #137
88Environment Specific Error Handling: Development vs Production Errors in Express | Part #138
89Handling Mongoose Cast Errors: Transform Technical DB Errors into User-Friendly Response | Part #139
90Handling MongoDB Duplicate Key Errors: Providing Clear Feedback for Unique Constraints | Part #140
91Mongoose Validation Error Handling: Aggregating Multi-Field Schema Failures in Express | Part #141
92Handling Unhandled Promise Rejections Globally in Node.js: Graceful Shutdown PatternsB | Part #142
93Handling Uncaught Exceptions Globally in Express: Protecting Synchronous Code Paths | Part #143
94Debugging Node.js and Express Applications with VS Code: A Beginner's Guide | Part #144
95Introduction to Authentication vs. Authorization: Building Secure Express Applications | Part #145
96Build a Signup Endpoint: Save User to DataBase | Part #146
97Validate Confirm Password before Creating User | Node JS + Express Course with MongoDB | Part #147
98Password Hashing & Salting Explained | Complete Node JS + Express Course with MongoDB | Part #148
99Hashing Password with Salt Using Bcrypt | Complete Node JS + Express Course with MongoDB | Part #149
100Authentication & Authorization with JWT | Complete Node JS + Express Course with MongoDB | Part #150
101Auto Login New User After Signup with JWT | Node JS + Express Course with MongoDB | Part 151
102 User Login - Part 1: Validate Credentials & Find User | Part #152
103User Login - Part 2: Verify Password & Send JWT | Node JS + Express Course with MongoDB | Part #153
104Authorization - Part 1: Read Access Token | Node JS + Express Course with MongoDB | Part #154
105Authorization - Part 2: Validate Token | Complete Node JS + Express Course with MongoDB | Part #155
106Authorization - Part 3: Check User Exists | Part #156
107Authorization - Part 4: Is Password Changed | Node JS + Express Course with MongoDB | Part #157
108Advance Postman Settings - Auto Capture JWT | Node JS + Express Course with MongoDB | Part #158
109Build Role-Based Authorization in Express | Node JS + Express Course with MongoDB | Part #159
110Password Reset - Part 1: High Level Overview | Node JS + Express Course with MongoDB | Part #160
111Reset Password - Part 2: Generate Password Reset Token | Part #161
112Reset Password - Part 3: Send Password Reset Email | Part #162
113Reset Password - Part 4: Set a New Password | Part #163
114Update User Password (Secure Implementation) | Part #164
115Update User Details (Secure & Clean Approach) | Part #165
116Delete User (Deactivate Account Feature) | Part #166
117Express API to Get Logged-In User Details | Part #167
118MongoDB Data Modeling Explained | Part #168
119Embedding vs Referencing in MongoDB | Part #169
120Modeling Hotel Location - One-to-one Relation | Part #170
121Modeling Rooms - One-to-Many Relation | Part #171
122Create New Rooms & Relate to a Hotel | Part #172
123Query Hotel & Related Rooms (Without populate) | Part #173
124Fetch Related Documents with populate() | Part #174
125What Are Nested Routes in Express? | Part #175
126Delete Room & Remove the Reference From Hotel | Part #176
127Create GET API to Fetch All Rooms & Room by ID | Part #177
128Modelling Reviews & Parent Reference | Part #178
129Create Review API Endpoint | Part #179
130Fetch All Reviews & Populate Related Hotels | Part #180
131MongoDB Virtual Populate Explained | Part #181
132Factory Functions - Part 1 | Part #182
133Factory Functions - Part 2 | Part #183
134Calculate Average Rating - Part 1 | Part #184
135Calculate Average Rating - Part 2 | Part #185
136Calculate Cheapest Price for a Hotel | Part #186
137Introduction to MongoDB Index | Node JS + Express Course with MongoDB | Part #187
138Preventing Duplicate Reviews | Complete Node JS + Express Course | Part #188
139API Security Best Practices | Complete Node JS + Express Course | Part #189
140Using HTTP Only Cookies for JWT | Complete Node JS + Express Course | Part #190
141Protect APIs with Rate Limiting | Complete Node JS + Express Course | Part #191
142Setting HTTP Security Headers using Helmet | Complete Node JS + Express Course | Part #192
143Request Data Sanitization in Express | Complete Node JS + Express Course | Part #193
144HTTP Parameter Pollution Explained | Complete Node JS + Express Course | Part #194
145Set createdBy Field Using Logged-In User | Complete Node JS + Express Course | Part #195
146Limit Maximum Login Attempts in Express | Complete Node JS + Express Course | Part #196
147What is Client-Side Rendering | Complete Node JS + Express Course | Part #197
148React App Setup - Files & Folders Explained | Complete Node JS + Express Course | Part #198
149React Functional Components Explained | Complete Node JS + Express Course | Part #199
150How to Add Routing in React | Complete Node JS + Express Course | Part #200
151Design Home Page - Hero Section & Search Bar | Complete Node JS + Express Course | Part #201
152Design Home Page - Show Hotels by City & Type | Complete Node JS + Express Course | Part #202
153Design Home Page - Fetch Hotels by City | Complete Node JS + Express Course | Part #203
154Design Home Page - Fetch Hotels by Type | Complete Node JS + Express Course | Part #204
155Design Home Page - Fetch & Show Featured Hotels | Complete Node JS Express Course | Part #205
156Show Loading Spinner on API Call in React | Complete Node JS + Express Course | Part #206
157State Management in React with Redux Toolkit | Complete Node JS + Express Course | Part #207
158Design Hotel Listing Page in React | Complete Node JS + Express Course | Part #208
159Fetch All Hotels from Express API in React | Complete Node JS + Express Course | Part #209
160Show Ammenities in Hotel Card as Chips | Complete Node JS + Express Course | Part #210
161Add Pagination in React App | Complete Node JS + Express Course | Part #211
162Building Login & Signup Page in React | Complete Node JS + Express Course | Part #212
163Send Login Request from React | Complete Node JS + Express Course | Part #213
164Send Signup Request from React | Complete Node JS + Express Course | Part #214
165Show Success & Error Messages using Toaster | Complete Node JS + Express Course | Part #215
166How to Protect Routes in React | Complete Node JS + Express Course | Part #216
167#217 Get Logged-in User Data in React using JWT | Complete Node JS + Express Course with MongoDB
168#218 Restore User Session in React on App Restart | Complete Node JS + Express Course with MongoDB
169#219 Build User Profile Page in React - Part 1 | Complete Node JS + Express Course with MongoDB
170#220 Build User Profile Page in React - Part 2 | Complete Node JS + Express Course with MongoDB
171#221 Build Edit Profile Modal in React | Complete Node JS + Express Course with MongoDB
172#222 Update Logged User Detail from React - Part 1 | Complete Node JS + Express Course with MongoDB
173#223 Update Logged User Detail from React - Part 2 | Complete Node JS + Express Course with MongoDB
174#224 Introduction to Multer - File Uploads | Complete Node JS + Express Course with MongoDB
175#225 Multer Configuration - Storage & File Filter | Complete Node JS + Express Course with MongoDB
176#226 Resizing Image with Sharp in Express | Complete Node JS + Express Course with MongoDB
177#227 Upload Profile Picture from React App | Complete Node JS + Express Course with MongoDB
178#228 Multer Multiple File Upload (Different Fields)
179#229 Creating Environment Variables in React | Complete Node JS + Express Course with MongoDB
180#230 Implement Change Password Feature in React | Complete Node JS + Express Course with MongoDB
181#231 Implement Deactivate User Account in React | Complete Node JS + Express Course with MongoDB
182#232 Implement Cookie-Based Auth in React - Part 1 | Complete Node JS + Express Course with MongoDB
183#233 Implement Cookie-Based Auth in React - Part 2 | Complete Node JS + Express Course with MongoDB
184#234 Implement User Logout Feature (Step-by-Step) | Complete Node JS + Express Course with MongoDB
185#235 Upload Multiple Images with React & Node.js | Hotel Booking App
186#236 Build a Dynamic Hotel Detail Page in React | Hotel Detail UI - Part 1
187#237 Build a Dynamic Hotel Detail Page in React | Hotel Detail UI - Part 2
188#238 Fetch Hotel Details from API & Show in UI | Hotel Detail UI - Part 3
189#239 Add Interactive Maps with Mapbox & React | Hotel Detail UI - Part 4
190#240 Build Multi-Tab Update Form in React 🔥 | Hotel Admin Panel with Single State - Part 1
191#241 Build Basic Info & Location Tabs with State Binding | React Multi-Tab Form - Part 2
192#242 Amenities + Images Tab with State Binding 🔥| Complete React Admin Form 😱 - Part 3
193#243 React Form Submit to Express API 🔥 | Send FormData & Update Hotel (Full Guide)
194#244 React Multiple Image Upload + Preview 🔥 | Update FormData & Live Preview (Step-by-Step)
195#245 React Multi-Select Input 🔥 | Add Categories with Comma (Dynamic Tags Input Tutorial)
196#246 Make Reusable Form in React 🔥 | Convert Update to Create Hotel (Clean Approach)
197#247 Create a New Hotel 🔥 | React State + Express POST Request (Step-by-Step)
198#248 Simple Form Validation in React | Hotel Form Custom Validation (No Libraries!)
199#249 Building a Review Section in React (Part 1) | Hotel Booking App - Node JS + Express Course
200#250 Create Review Modal Component in React (Part 2) | Hotel Booking App - Node JS + Express Course
201#251 Star Rating Component in React | Display Ratings using React Icons
202Building a User Review Dashboard and Fixing State Logic | Part #252
203Building a Dynamic Review Form Modal with Star Rating Logic | Part #253
204Implementing Edit and Delete Review Logic with Node.js & React | Part #254
205Building a Reusable Custom Confirm Modal with Props and State | Part #255
206Updating Room Schema and Verifying API Endpoints | Part #256
207Integrating Room Functionality into Hotel Detail Page and Room Image Upload | Part #257
208Build a Reusable Room Form Modal: Dynamic Input Management and Image Previews (Part 1) | Part #258
209Build a Reusable Room Form Modal: Read Room Form Data & React State Management (Part 2) | Part #259
210Update Room Details from React: Implementing Multipart Form Data for Room Updates | Part #260
211Completing the Room CRUD: Implementing Create and Delete Room Functionality in React | Part #261
212React & Redux Bug Fixing: Syncing UI with Backend API and State Management | Part #262
213Advanced React Security: Handling Page Reloads and Protecting Routes with Auth State | Part #263

Previous Next

Course page