MongoDB Atlas Hackathon 2022 on DEV
Tags: atlashackathon22, nextjs, mongodb, node
Published: 2022-12-04 20:42:16

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03tjsu8vy1cdiaf1ltdw.png)


####Loading state
Showing the loading state of the landing page
![loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrp7e8wc5vahoe5buqqt.png)


#### Country autocomplete
Showing country search autocomplete
![country search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3o4a82vk74xrscahkaa.png)


#### Street autocomplete
Showing street search autocomplete
![street search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x94qqknue6av1x3605h.png)

#### Search result
Showing home search result
![search result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyo9golf1w0ve0n1zk7s.png)

Showing home search results in map view
![map view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzvjgbn423p0m6hktkt4.png)

### 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](https://github.com/jaymeeu/mdsearch_no_more)

[Source code backend](https://github.com/jaymeeu/mdsearch_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`

```javascript
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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hx4iwq95mtat43pxnf39.png)

```javascript
{
  "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
```javascript
{
  "mappings": {
    "dynamic": false,
    "fields": {
      "address": {
        "fields": {
          "country": {
            "maxGrams": 10,
            "type": "autocomplete"
          }
        },
        "type": "document"
      }
    }
  }
}
```
#### Create search indexes for street autocomplete
```javascript
{
  "mappings": {
    "dynamic": false,
    "fields": {
      "address": {
        "fields": {
          "street": {
            "type": "autocomplete"
          }
        },
        "type": "document"
      }
    }
  }
}
```

#### Create aggregation pipeline to get list on homes in a category `property_type`
```javascript
 [
        {
          '$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
```javascript
[ 
{
    "$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
```javascript
[{
    "$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
```javascript
[{
    "$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
```javascript
[
        {
          '$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
```javascript
[
        {
          '$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'
            }
          }
        }
      ]
```