DEV Community

Cover image for MongoDB Atlas Hackathon 2022 on DEV
Abdulrasaq Jamiu Adewuyi
Abdulrasaq Jamiu Adewuyi

Posted on • Updated on

MongoDB Atlas Hackathon 2022 on DEV

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

https://windcnc.netlify.app/

Screenshots

Landing page

Showing a list of homes in each category property_type
home page

Loading state

Showing the loading state of the landing page
loading

Country autocomplete

Showing country search autocomplete
country search

Street autocomplete

Showing street search autocomplete
street search

Search result

Showing home search result
search result

Showing home search results in map view
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

Source code frontend

Source code backend

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");
  }
Enter fullscreen mode Exit fullscreen mode

Create search indexes

Image description

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "address": {
        "dynamic": false,
        "fields": {
          "country": {
            "type": "string"
          },
          "street": {
            "type": "string"
          }
        },
        "type": "document"
      },
      "property_type": {
        "type": "string"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Create search indexes for country autocomplete

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "address": {
        "fields": {
          "country": {
            "maxGrams": 10,
            "type": "autocomplete"
          }
        },
        "type": "document"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Create search indexes for street autocomplete

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "address": {
        "fields": {
          "street": {
            "type": "autocomplete"
          }
        },
        "type": "document"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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
          }
        }
      ]
Enter fullscreen mode Exit fullscreen mode

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": {}
        }}
      ]}
    }
  }
]
Enter fullscreen mode Exit fullscreen mode

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": {}
        }}
      ]}
    }
  }]
Enter fullscreen mode Exit fullscreen mode

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": {}
        }}
      ]}
    }
  }]
Enter fullscreen mode Exit fullscreen mode

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'
            }
          }
        }
      ]
Enter fullscreen mode Exit fullscreen mode

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'
            }
          }
        }
      ]
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
yourmdsarfaraj profile image
MD Sarfaraj

Awesome