This app provides a listing of Restaurants in Cairo Egypt. The project was built for the Udacity Front End Nanodegree Program. The purpose of the project is to demonstrate understanding of the basic structure and operation of a React-based app.
The map is generated by the Google Maps API. The list of restaurants is generated by a call to the Foursquare API Search endpoint. A second API request is made when a location is clicked to get details about the restaurant, including address, phone, price point, user tip and an image. A link to the restaurant's Foursquare page is provided for more information.
The project uses Node.js and the Create-React-App starter. If you do not have Node >= 6.x installed, you can download it here: Node.js
Once Node is installed, navigate to the directory where you want to store the app
npm install
Once all of the dependencies have been installed you can launch the app with
npm start
A new browser window should automatically open displaying the app. If it doesn't, navigate to http://localhost:3000/ in your browser
NOTE: The service workers for this app will only cache the site when it is in production mode.
To run the app in production mode locally run:
npm run build
Navigate to the build directory and run a localhost server. If you have Python 2.x installed you can run the Python Simple Server like this.
python -m SimpleHTTPServer 8080
For Python 3.x, the command is:
-m http.server 8080
In either case navigate to http://localhost:8000 in your browser.
Or if you prefer you can use Node serve. If you do not have it installed you can install it with:
npm install -g serve
and then navigate into the build directory and run
serve -s
In this case the site will be hosted at http://localhost:5000
- The app will load displaying a map of Restaurants with markers for each restaurant and a list of restaurants in the sidebar
- Click on a map marker or name on the restaurant list to get details about each restaurant
Thank You 'Mohamed Riaad'