This repository is a food catalogue web app built with ReactJS, NodeJS and MongoDB. The accompanying NodeJS backend is located here.

This project showcases among other the following functionality:

• GPS location based product search
• MongoDB aggregation pipelines
• MongoDB geospatial queries
• React-MD based Material Design user interface
• Linking to operating systems mail- and telephone-applications
• Google maps JS integration into colliding UI elements
• Simple Pagination of product list in conjunction with MongoDB
• Asynchronous HTTP requests to custom NodeJS backend

Place your backend endpoint URL in PROJECT_ROOT/.env and your Google Maps API key in PROJECT_ROOT/public/index.html.

The accompanying backend repository houses a src/data subdirectory. I have placed a dataset for the Munich region in there called compatible_restaurants.json.

In order to generate a dataset for your own region do the following:

1. Go to jsongenerator
2. Place the contents of restaurant-generator.json in the left textarea
3. Edit the coordinates to impose your own geographic area in the order[longitude, latitude]: coordinates: ['{{floating(11.3, 11.7)}}', '{{floating(48.0, 48.3)}}']
4. Click on Generate
5. Save the resulting json locally (e.g. restaurants.json)
6. Run the python script mongo_converter.py to remove the quotation marks from the floating point values: python3 mongo_converter.py -s /path/to/restaurants.json
7. The resulting compatible_restaurants.json can be import into MongoDB: mongoimport -h DATABASE_HOST -d DATABASE -u USER -p PASSWORD --collection restaurants --file compatible_restaurants.json --jsonArray

• UI is not responsive. Especially within the filters text flows out of the container
• Data generation process is rather tedious and incomplete
• Containerize both fronted and backend so that a one-click installation process can be run on a cloud providers offerings with Docker
• Add comments

• google-maps-services-js (Apache-2.0 License)
• google-libphonenumber (MIT License)
• react (MIT License)
• react-google-maps (MIT License)
• react-md (MIT License)
• react-scripts (MIT License)
• webfontloader (Apache-2.0 License)