MongoDB Atlas Hackathon Submission - CookReview
Tags: atlashackathon22, react, fastapi, mongodb
Published: 2022-12-07 17:12:37

My submission for the MongoDB Atlas Hackathon consist in a web application called **CookReview** that let you find restaurants in the USA based on full text search on previous customer reviews. Thanks to community you can find more information on the restaurant that you can not find on other websites (e.g Price/Quality ratio, events, atmosphere) 

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


### Category Submission:
Event tought this project is built using a FARM stack, this project more found itself in the **Search No More** Category since it's heavily depends on MongoDB Atlas Search Feature. 

Atlas search is used here for 3 differents use case:

### Full text search based on user input

When a user search for a restaurant a query is ran to find related information that should match the user input, if it's found then the score is boosted [Doc](https://www.mongodb.com/docs/atlas/atlas-search/scoring/#boost) by a factor 3, since it's a perfect match.

In the case of user clicking on Vegan and New York City, those two parameters are putted in a must condition signifying that the query MUST match those two parameters. We can not recommand a non-vegan restaurant or a restaurant outside of New York to a user that search for those.

Another way to optmize the query result was to use the Synonyms feature [Docs](https://www.mongodb.com/docs/atlas/atlas-search/synonyms/#define-synonym-mappings-in-your-fts-index) of Atlas search by providing a collection of equivalent words to enhance the query result. For that I created two different collections

- To enhance geographical user input, a collection containing all the US State and their ISO abbreviation, such that when a user  input a full state name, Atlas Search can make the link to a postal code.

![State Name - ISO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg8k72d307gs33ngji1z.png)


- To add more words with the same meaning such as café and coffee, etc

![Synonyms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jk4m03lex6s6xd5grcd.png)


### Smart chose of icons based on restaurant information

Another usage I made of Atlas Search was to find the best icon corresponding to a restaurant name and type so I dont have to do it

To put that in use I wrote this simple query 

```json
[
    {
        "$search": {
            "index": "default",
            "text": {
                "query": <RESTAURANT_INFO>,
                "path": {
                    "wildcard": "*"
                }
            }
        }
    },
    {
        "$limit": 3
    },
    {
        "$project": {
            "id": {
                "$toString": "$_id"
            },
            "_id": 0,
            "Name": 1,
            "filename": 1,
            "score": {
                "$meta": "searchScore"
            }

        }
    }
]
```

Into this collection where each svg icon is linked to a word describing it.

![Svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vlyim8qly274dndx8g6.png)
Here is an example where chosen icon is a sushi 

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


### Autocomplete of restaurant name
Using MongoDB Atlas Seach autocomplete feature I was able to quickly make an autocomplete system based on restaurant name


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7ymjnkd9d8tn67n2cn0.gif)
```json
[
    {
        "$search": {
            "index": "reviews",
            "autocomplete": {
                "query": "",
                "path": "Name"
            }
        }
    },
    {
        "$limit": 3
    },
    {
        "$project": {
            "id": {
                "$toString": "$_id"
            },
            "_id": 0,
            "Name": 1
        }
    }
]
```

### App Link

http://cookreview.duranbe.tech

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



### Source Code

https://github.com/duranbe/restaurants-reviews 

## Story behind the project

The original idea came to me by browsing Kaggle. As a Machine Learning graduate and incoming Software Engineer I wanted to build a data-driven application.

## How I built it
When building this project I learned more about MongoDB, and Atlas Search feature that gives a lot of options to developper and a solve a lots of problems, such as an autocomplete feature. 

I also learned more about React and Tailwind, as it is the first big project I am working on with these technology.

## Ressources

MongoDB Atlas Search : https://www.mongodb.com/docs/atlas/atlas-search/atlas-search-overview/
React : https://reactjs.org 
Tailwind : https://tailwindcss.com
DrawKit (Illustrations) : https://www.drawkit.com
Fast API : https://fastapi.tiangolo.com