Restaurant Finder application for NYC demonstrating Atlas Search Features. Uses React and Tailwind.

Related tags

WhatsCooking
Overview

What's Cooking with Atlas Search

A Restaurant Finder Application Demo MongoDB Atlas Search

Hello! 👋 This application allows you to search lightning fast through over 25,000 restaurants in the New York city area based on a variety of search parameters and data types:

  • restaurant name
  • geolocation coordinates
  • cuisine type
  • average star rating
  • borough


Note: This dataset is mocked. Please do not use to make actual dining decisions.

What's Cooking implements many Atlas Search features from autocomplete to custom function scoring. Using the $search operator in a MongoDB aggregation pipeline, we can build fine-grained searches across text, numerics, and geospatial data. By building out What's Cooking, you'll learn all sorts of ways MongoDB allows you to build complex, fine-grained full-text searches on your Atlas data.

No additional servers or software needed. No need to keep data in sync. Everything is done in MongoDB Atlas.

  • fuzzy matching
  • highlighting
  • autocomplete
  • range queries
  • geoqueries
  • facets
  • relevance-based scoring
  • custom function scoring

Check out the video of the MongoDB .Live keynote to see a demonstration of all the features or visit the link below to play around with the finished application, hosted entirely in MongoDB Atlas:

www.atlassearchrestaurants.com

This application is hosted entirely by MongoDB Atlas was created using:

  • React
  • Tailwind CSS
  • A modified sample dataset based on MongoDB's Atlas sample_restaurants dataset

Currently this app is not suitable for mobile, but feel free to send a PR. 😊

Prerequisites

  • A MongoDB Atlas account. Get one for free here.
  • A recent version of Node.js and npm.
  • Restaurant sample dataset.
  • (Recommended) MongoDB Compass - GUI

You can read and download the dataset using the MongoDB Shell, any MongoDB driver, or my favorite MongoDB Compass using the following URI:

  
mongodb+srv://mongodb:[email protected]/whatscooking

It is also included in this repo's Supplemental Files branch as

whatscooking.json


To Run This Application....

  1. Clone the repo.
  2. Navigate inside WhatsCooking directory.
  3. Run npm install .
  4. Run npm start .

To Build This Application...

Prepare Data

  1. Load data to Atlas cluster:
    • database: whatscooking
    • collection: restaurants
  2. Create Search indexes. (Index definitions includes in `supplement-files` .)

React Components....

Using Realm as Your Serverless Backend....

What's Cooking uses HTTP services in Realm to create 2 APIs to allow you to query for your restaurant data over HTTP:

  • getRestaurants called from the useHomeFetch.js hook.
  • getRestaurantsAutocomplete called from the Autosuggestions.js component.

Find the Realm application and code for these webhooks in the supplement-files branch in a folder called WhatsCookingRealm

If you have any questions or feedback about this repo, feel free to create an Issue or PR in this repo or reach out to me on Twitter @YouOldMaid.

Also please join our online MongoDB Community to interact with our product and engineering teams along with thousands of other MongoDB and Realm users.

Have fun and happy coding!

Owner
MongoDB Developer Relations
MongoDB Developer Relations - Code Samples and Examples
MongoDB Developer Relations
Node.js and mongoDB Google Drive Clone

MyDrive MyDrive is an Open Source cloud file storage server (Similar To Google Drive). Host myDrive on your own server or trusted platform and then ac

null 2.5k Sep 23, 2021
Build a Full Stack Marketplace on Ethereum with React, Solidity, Hardhat, and Ethers.js

Building a Digital Marketplace on Ethereum The technologies used in this workshop are React, Next.js, Tailwind CSS, HardHat, Solidity, and Ethers. Get

Nader Dabit 41 Sep 17, 2021
Learn React by Building Netflix.

It means that you are learning React.js by building a real-life project. I will explain concepts in detail. This post is the first part in my series and it is suitable for beginners.

Hiep Le 148 Sep 23, 2021
Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

React Table + Tailwind CSS = ❤️ Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS. Both parts

Samuel Liedtke 18 Sep 13, 2021
This project is a simplified a full stack clone of Stackoverflow.

Stackoverflow Clone Live: http://clone-of-stackoverflow.vercel.app/ This project is a simplified a full stack clone of Stackoverflow. I wrote it to le

Salih Özdemir 487 Sep 24, 2021
An instagram clone created with the MERN stack

Instaclone An instagram clone created with MongoDB, Express, React, and Socket.io Have a look at the live demo Tech Frontend: React State management:

Sander Moen 420 Sep 21, 2021
Api server for Tclone, a concise, fast, and feature rich Twitter clone built with MERN stack.

Api server for tclone Try the app here React frontend repo here This project is my own take on building Twitter clone, I have tried to keep things sim

muzamil 45 Sep 4, 2021
Mobile app that lets you search for games. Using IGDB and built with Expo (React Native)

Mobile app that lets you search for games. Using IGDB and built with Expo (React Native). game-search-expo.mp4 Try it out with Expo: https://expo.io/@

Nuno Góis 5 Sep 13, 2021
Full React with Nestjs/Nodejs Web Application deployed on Hostinger with docker and docker-compose

Full Web App React Nodejs w/ GraphQL Tailwind and Docker From Zero To Deployment | Master MERN STACK Full Video Course on CoderOne channel https://you

Islem Maboud 152 Sep 15, 2021
A clone of Linear app made with React & Tailwind CSS

A Linear App clone with React and Tailwind CSS

Tuan Nguyen 117 Sep 16, 2021
Spotify Lite made with React Native for iOS and Android

Spotify Lite - React Native Based on the Spotify Lite app for Android. Features Home feed (recently played, featured playlists and your top artists).

Osama Qarem 272 Sep 15, 2021
Learn React and Redux by Building Youtube.

The repository helps you learn React and Redux by building Youtube :star:

Hiep Le 61 Jun 28, 2021
A simple project to display clean and concise Covid-19 Statistics by country. ⚛️ React.js ⚛️ React Query 💅 Tailwind CSS 🔎 Google Analytics

A simple project to display clean and concise Covid-19 Statistics by country. ⚛️ React.js ⚛️ React Query ?? Tailwind CSS ?? Google Analytics

Luísa Ribeiro Bezerra 15 Jun 29, 2021
A full-stack clone of the incredible Apple Music online streaming platform, with an aim to re-create it's core features, seamless design, and excellent user experience.

Appo Music About Appo Music is a full-stack clone of the incredible Apple Music online streaming platform, with an aim to re-create it's core features

Ori Ravid 54 Sep 15, 2021
Single Page Application built using React, Context API and OMDb API.

Movie Search App This project is a React application with functions to search for movies and add movies to favorites using OMDb API. Home Page Favorit

Efecan Pınar 16 Sep 14, 2021
Movies Reviewed by people, for people

PopCritic Movies Reviewed by people, for people PopCritic is a movie review website which is focussed on various aspects of films and help people find

Abhishek Chaudhary 60 Sep 13, 2021
Youtube Clone Frontend (React + Redux)

Youtube Clone Frontend Youtube clone using PERN stack (Postgres, Express, React, Node). This is the frontend repository, built with React + Redux. If

Manikandan 1.2k Sep 23, 2021
Youtube Clone Backend (Express + Sequelize)

Youtube Clone Backend Youtube clone using PERN stack (Postgres, Express, React, Node). This is the backend repository, built with Express + Sequelize.

Manikandan 551 Sep 13, 2021
One more Twitter clone, but this one is featureful yet concise and fast, built with MERN stack, with love ❤.

React front-end for tclone Try it here back-end repo here looks like twitter, but not ?? It is my own take on building Twitter clone, I have tried to

muzamil 107 Sep 15, 2021