DEV Community

Cover image for MongoDB Atlas Hackathon Submission - CookReview
Benoît Durand
Benoît Durand

Posted on

MongoDB Atlas Hackathon Submission - CookReview

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

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

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

Synonyms

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

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

        }
    }
]
Enter fullscreen mode Exit fullscreen mode

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

Svg
Here is an example where chosen icon is a sushi

Image description

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

[
    {
        "$search": {
            "index": "reviews",
            "autocomplete": {
                "query": "",
                "path": "Name"
            }
        }
    },
    {
        "$limit": 3
    },
    {
        "$project": {
            "id": {
                "$toString": "$_id"
            },
            "_id": 0,
            "Name": 1
        }
    }
]
Enter fullscreen mode Exit fullscreen mode

App Link

http://cookreview.duranbe.tech

Image description

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

Top comments (0)