MongoDB 2022 Hackathon submission - Introducing Indian dishes catalog
Tags: atlashackathon22, mongodb, react, node
Published: 2022-11-24 04:59:40

## What I built
**[Indian dishes catalog](https://indian-dishes.netlify.app/)**

Search and apply the filters to get the dish details like
- Ingredients
- Preparation Time 
- Cook Time 
- Diet 
- State
- Region
- Flavor


### Category Submission:
Search No More

### App Link
**[Indian dishes catalog](https://indian-dishes.netlify.app/)**

### Screenshots

![Home Page Light](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gupxtfgb42iaf3k4uka3.png)

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p33ecmcwy7aueno7pp3b.png)

![Search Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk5rmeshfwedklba0g2n.png)



### Description
Indian dishes catalog is a web application that you can use to find out famous Indian dishes, there are in total 255 dishes with all the necessary information like ingredients, preparation time, cook time, etc.

There are 2 pages, one is a listing page with infinite scroll and another one is a search page.

The search page uses the [mongodb atlas search](https://www.mongodb.com/atlas/search) to allow full-text search, it also supports a filter on search results.

### Link to Source Code

Indian dishes API

{% embed https://github.com/Sachin-chaurasiya/indian-dishes-api %}

Indian dishes UI

{% embed https://github.com/Sachin-chaurasiya/indian-dishes-catalog-ui %}


### Permissive License

**MIT**

## Background

In India, we have a variety of dishes and each dish is a special dish of some state, but what if someone wants to make some dishes at their home, how they are gonna find the dish details?

So to provide a simple solution for the above problem I built the **[Indian dishes catalog](https://indian-dishes.netlify.app/)**.

Hope you enjoy it, please share your feedback in the comment.


### How I built it
(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)

I have never used MongoDB atlas before in any project, so I took this hackathon as an opportunity to learn MongoDB atlas and its services.

I started learning about the MongoDB atlas by following MongoDB university [MongoDB Node.js Developer Path](https://learn.mongodb.com/learn/learning-path/mongodb-nodejs-developer-path).

After getting some hands-on experience in university labs, I started working on the API for dishes and used **express** and **Nodejs** to build the API and MongoDB atlas as a data store.

Then I deployed the API on [render](https://dashboard.render.com/) as a web service to consume the API on the front-end of the project built with [ReactJs](https://reactjs.org/) and [Chakra UI](https://chakra-ui.com/).

Atlas search was very new to me so to build the search functionality first I took the [MongoDB Atlas Search ](https://learn.mongodb.com/learn/course/mongodb-atlas-search/) course and learned how atlas search works and how can I use that in my project.

And that’s it for this topic. Thank you for reading.

### Additional Resources/Info

- [Getting started with MongoDB atlas](https://learn.mongodb.com/learn/course/getting-started-with-mongodb-atlas)
- [Connecting to a MongoDB Database](https://learn.mongodb.com/learn/course/connecting-to-a-mongodb-database)
- [MongoDB Atlas Search
](https://learn.mongodb.com/learn/course/mongodb-atlas-search)
- [Chakra UI - Create accessible React apps with speed](https://chakra-ui.com/)

I would like to thank MongoDB for providing such great courses and documentation, also I would recommend everyone to learn about MongoDB from [mongodb university](https://learn.mongodb.com/) itself.