What I built
I built an Airbnb clone, an home provider platform where different home providers (hosts) add homes to the platform where home seekers can see a list of homes added by the hosts, the app is developed using NextJS for the front end and NodeJS(ExpressJS) for the back end.
I built the search functionality, search autocomplete, home filters and many more features with the MongoDB Atlas.
Category Submission:
Search no more
App Link
Screenshots
Landing page
Showing a list of homes in each category property_type
Loading state
Showing the loading state of the landing page
Country autocomplete
Showing country search autocomplete
Street autocomplete
Showing street search autocomplete
Search result
Showing home search result
Showing home search results in map view
Description
The Airbnb clone project is a platform that allows filtering and searching of homes among many homes on the platform while also showing the location on the map.
Link to Source Code
Permissive License
MIT
Background
(What made you decide to build this particular app? What inspired you?)
I chose this project because it was helpful enough to explore and implement the search functionality with a different dataset.
Also with the fact that MongoDB has a robust collection sample_airbnb that I can leverage on.
The main inspiration is to learn and show developers how easy and flexible it is to use the MongoDB atlas search.
How I built it
(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)
As a frontend developer, this is my first time using MongoDB and I must say it is way easy and more flexible to use than I expected, and of course, I learnt, understood and can work with the fundamental of MongoDB
The following are steps to implement the project
Connecting to mongoDB collection
Our collection name sample_airbnb
try {
const client = await MongoClient.connect(MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true });
db = await client.db("sample_airbnb");
dbConnected = true;
console.log("Database is connected and ready to go!");
} catch (e) {
console.log(e.toString(), "connection error");
}
Create search indexes
{
"mappings": {
"dynamic": false,
"fields": {
"address": {
"dynamic": false,
"fields": {
"country": {
"type": "string"
},
"street": {
"type": "string"
}
},
"type": "document"
},
"property_type": {
"type": "string"
}
}
}
}
Create search indexes for country autocomplete
{
"mappings": {
"dynamic": false,
"fields": {
"address": {
"fields": {
"country": {
"maxGrams": 10,
"type": "autocomplete"
}
},
"type": "document"
}
}
}
}
Create search indexes for street autocomplete
{
"mappings": {
"dynamic": false,
"fields": {
"address": {
"fields": {
"street": {
"type": "autocomplete"
}
},
"type": "document"
}
}
}
}
Create aggregation pipeline to get list on homes in a category property_type
[
{
'$match': {
'property_type': {
'$eq': req.params.category
}
}
}, {
'$project': {
'accommodates': 1,
'price': 1,
'property_type': 1,
'name': 1,
'description': 1,
'host': 1,
'address': 1,
'images': 1,
"review_scores": 1
}
}
]
Create aggregation pipeline to search list of homes by country in each category
[
{
"$search": {
"index": 'search_home',
"compound": {
"must": [
{"text": {
"query": queries.street,
"path": 'address.street',
"fuzzy": {}
}},
{ "text": {
"query": queries.category,
"path": 'property_type',
"fuzzy": {}
}}
]}
}
}
]
Create aggregation pipeline to search list of homes by street in each caterogy
[{
"$search": {
"index": 'search_home',
"compound": {
"must": [
{ "text": {
"query": queries.country,
"path": 'address.country',
"fuzzy": {}
}},
{ "text": {
"query": queries.category,
"path": 'property_type',
"fuzzy": {}
}}
]}
}
}]
Create aggregation pipeline to search list on homes by both country and street in each category
[{
"$search": {
"index": 'search_home',
"compound": {
"must": [
{"text": {
"query": queries.street,
"path": 'address.street',
"fuzzy": {}
}},
{ "text": {
"query": queries.country,
"path": 'address.country',
"fuzzy": {}
}},
{ "text": {
"query": queries.category,
"path": 'property_type',
"fuzzy": {}
}}
]}
}
}]
Create aggregation pipeline for autocomplete country search field
[
{
'$search': {
'index': 'country_autocomplete',
'autocomplete': {
'query': req.params.param,
'path': 'address.country',
},
'highlight': {
'path': [
'address.country'
]
}
}
}, {
'$limit': 1
}, {
'$project': {
'address.country': 1,
'highlights': {
'$meta': 'searchHighlights'
}
}
}
]
Create aggregation pipeline for autocomplete street search field
[
{
'$search': {
'index': 'town_autocomplete',
'autocomplete': {
'query': req.params.param,
'path': 'address.street',
},
'highlight': {
'path': [
'address.street'
]
}
}
}, {
'$limit': 5
}, {
'$project': {
'address.street': 1,
'highlights': {
'$meta': 'searchHighlights'
}
}
}
]
Top comments (1)
Awesome