This is the 11th part of our React MERN project CouchSurfing. In this video we showed the added rooms as collection or groups (Clusters) of the Users' Avatars using Supercluster to show the rooms in the same location as a cluster in circle icon with the number of the rooms available near this location. And when you click on this icon it spreads the available rooms out.
Reactjs
Supercluster
Material UI5 (MUI5)
Nodejs
Expressjs
MongoDB
Mongoose
Firebase Storage
Mapbox
React-Map-GL
Global Context Provider
The whole videos playlist of the project:
https://www.youtube.com/watch?v=ANZNMaBODDY&list=PLufbXXGswL_pS6rdWbDO56oiZovLWE_rs
Source Code on github:
https://github.com/codelikepro22/place-to-stay/tree/part_11
00:00 Introduction
00:55 Building getRooms controller to request fetching the rooms from Mongodb
02:25 Building room action in client to request rooms from the server
05:58 Adding the map using React-Map-GL
07:38 Building rooms' clusters using superCluster
21:42 Updating user's information in the rooms (records) cluster after the user updated the profile to reflect the new updated information
24:20 Introduction to the next video
Download
0 formats
No download links available.
React Cluster, show Users' Avatars on the map as Clusters using SuperCluster, MapBox, MUI5 | NatokHD