AtlasHackathon: Explore With Us (A Web App using Django, MongoDB Atlas)
Tags: atlashackathon, django, mongodb
Published: 2022-01-10 19:01:10

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
Explore With Us is a vacation destination catalog website build with Django, Bootstrap and MongoDB Atlas.
I created this webapp to take part in MongoDB Atlas Hackathon.




#### Technologies I used:

- HTML, CSS, JavaScript and Bootstrap 4.

- Django

- MongoDB Atlas<ul>
<li>I used MongoDB Atlas to store the database by creating a cluster on  [MongoDB](https://www.mongodb.com/cloud/atlas/register) </li>
<li>I used the Atlas search feature to implement a fast, relevance-based full-text search for the destinations that I have in my database.</li>
</ul>





#### How I used Atlas Search feature:
I used MongoDB Atlas search to implement the autocomplete feature in my "Search Destination" Search Bar.
First I made a search index for my collection "main_destination"

![All collections in the database Project_data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ograz5f6ousy32oxa6m5.png)

The Search Index I used:
``` 
{
  "mappings": {
    "dynamic": false,
    "fields": {
      "name": [
        {
          "foldDiacritics": false,
          "maxGrams": 7,
          "minGrams": 3,
          "tokenization": "edgeGram",
          "type": "autocomplete"
        }
      ]
    }
  }
}
```

And then in backend I created Connect.py in main folder to connect with the cluster for searching the index from views.py search action. using pymongo package built for python to connect with MongoDB, as djongo does not support aggregate function.

So that once the user starts searching particular destination it will suggest them destinations automatically.

![Demo Video to Show implementation of Atlas Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9p26cu97lddozwoapa8q.gif)


_views.py>search :_


![Search action in veiws.py](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awyquzi6f1upkkcxa4uz.png)

This is how the function looks like:
``` 
add_result = collection.aggregate(
           [
               {
                   "$search": {
                       "autocomplete": {
                           "query": address,
                           "path": "name",
                           "fuzzy": {
                               "maxEdits": 2
                           }
                        }
                   }
               }
           ]
      )
```
This function build a pipeline that searches using the address parameter automatically from the collection as defined in MongoDB Atlas search index as I demoed at the top in my demo video.


#### How you will see this project

##### **STEP 1:**
Fork the project repository and clone it using:
```
git clone https://github.com/mr-palindrome/Explore-With-Us.git
```

The Django skeleton is look like this:


![Django Skeleton](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3aigepbu37ztwew1hb5.png)

##### **STEP 2:**
Install virtualenv then create a virtual environment test:
```
pip3 install virtualenv
virtualenv test
source test/bin/activate
```

Install all the dependencies using:
```
pip3 install -r requirements.txt
```


##### **STEP 3:**
Create a Django SECRET_KEY using following command in python3 terminal:
```
python3
>>> from django.core.management.utils import get_random_secret_key  
>>> get_random_secret_key()
```
Create a .env file in explore_with_us folder to store all the environment and secret keys, like Django SECRET_KEY, mongoDB connection string.

But, for demonstration purpose you don't have to create your own cluster, I have provided my own connection string to access all the data present in my Atlas cluster database(AtlasHackathon>Project_data)



![My cluster "AtlasHackathon"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33u6496w5xufkf63kyiz.png)


Now store the Django SECRET_KEY and my connection string in .env, it will look like:
``` 
SECRET_KEY = <django SECRET_KEY>
HOST = mongodb+srv://user_demo:demo123@atlashackathon.nhdkl.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
```
##### **STEP 4:**
Now you can see the website in your localhost:8000 using:
``` 
python3 manange.py runserver
```
### Submission Category: 

The category is **"Choose Your Own Adventure"**. It could be "E-Commerce Creation" but this is not an e-commerce store or any product catalog. 


### Link to my Code
{% github mr-palindrome/Explore-With-Us %}


### Additional Resources / Info

This was my first time using MongoDB as the database for a website which was a really great experience of using NoSQL specially MongoDB Atlas, I'm also planning to use it in my future projects.
I learned about [pymongo package](https://pymongo.readthedocs.io/en/stable/) and [djongo](https://www.djongomapper.com/) availabe for python. I took help from [How to Use Django with MongoDB](https://www.mongodb.com/compatibility/mongodb-and-django) document.
Initially I started researching about Atlas search and how to use them using the [Atlas Search Docs](https://docs.atlas.mongodb.com/atlas-search/).

And another resource that help me to build my frontend was [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/).