DEV Community

Dylan Oh
Dylan Oh

Posted on • Edited on

6 3

Airbnb Search App with Testing Data from MongoDB

Overview of My Submission

This is a simple full stack demo app that was built with:

Frontend: React, Material UI, Google Maps Javascript API
Backend: Express (Node.js), MongoDB Atlas
Database: MongoDB

This app makes use of the sample data sets of Airbnb, provided by MongoDB. It demonstrates the use case of geoWithin operator to perform geographical search in a smooth and fast way. Wanted to create an autocomplete (real time retrieval of database index field), but came across this available test dataset from the documentation (geoWithin - MongoDB Atlas), and found out that this geoWithin is more powerful than I thought.

Demo

In this app, user can search type in the keyword and pin the desired location (right click on the map), and while you type, it is retrieving data on the pre-indexed fields from MongoDB and presenting them as suggestions to the users. Creating different types of index fields were easy, as I found on YouTube the exactly thing that I wanted to do.

Basically, both the search filters (keyword and the location selected) were combined to produce the search results. If you right click and select the location, it will try to find in a circle shape (you can define in your GeoJSON), and with a radius of 10km (you can also define thsi in GeoJSON). By providing keywords, it will further filter down those properties that match the "name" field of the property.

Submission Category:

E-Commerce Creation / Own Adventure

Link to Code

Airbnb Search App with Testing Data from MongoDB

About

This is a simple full stack demo app that was built with:

Frontend: React, Material UI, Google Maps Javascript API
Backend: Express (Node.js), MongoDB Atlas
Database: MongoDB

This app makes use of the sample data sets of Airbnb, provided by MongoDB. It demonstrates the use case of geoWithin operator to perform geographical search in a smooth and fast way. Wanted to create an autocomplete (real time retrieval of database index field), but came across this available test dataset from the documentation (geoWithin - MongoDB Atlas), and found out that this geoWithin is more powerful than I thought.

Demo

In this app, user can search type in the keyword and pin the desired location (right click on the map), and while you type, it is retrieving data on the pre-indexed fields from MongoDB and presenting them as…

Additional Resources / Info

Click on the link to check out this demo app:
Live Demo

Image description

Follow me on Medium

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay