This is the final project of my Udacity Front-end Nanodegree program which is funded by Google Scholarship.
The project was bootstrapped with Create React App and powered by Google Maps and Foursquare APIs.
Check the live demo.
├── README.md - This file.
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.js # This is the root of the app.
├── App.css # Styles for the app.
├── Data.js #Feed basic info of restaurants
├── bar.svg #Burger icon
├── GitHub.png
├── App.test.js # Used for testing. Provided with Create React App.
└── components # Components that constitute the app. See below for more details.
├── GoogleMapsContainer.jsx
├── Search.jsx
├── Header.jsx
└── Footer.jsx- Clone or download the project.
- Use
$ npm installcommand to install all the dependencies. $ npm startto run the project.
This project is designed to be responsive. When the width of the viewport is equal to or above 800px, the sidebar is docked and the burger icon in the header is hidden automatically. Otherwise, the sidebar is hidden and the burger icon is visible. See the below images for more details.
-
Clicking any marker (restaurant) on the map trigers a fetching execution to get detailed info about the restaurant from Foursquare.
-
Then, the filtered info will be shown in the marker's info window. The info includes the restaurant's name, pricing tier, ethnic or regional flavor, rating, dilivery info, contact and address. Besides, if the restaurant's official website and third party delivery options are available, they are going to be embeded in the corresponding texts.
-
After the marker is cliked, the corresponding list item's backgorund in the sidebar changes.
-
Please refer to the screenshot of the Layout section or the following Sidebar section for more details.
- Search. The search field accepts users' inputs to filter matching result. The markers are updated simultaneously.
- List. The list items (restaurants' names) are sorted by restaurants' locations from north to south.
- Click list items. Clicking any list item in the sidebar trigers the corresponding marker's drop animation and InfoWindow (which contains the restaurant's basic info) as the following gif shows.
-
Foursquare API quota exceeded. Beacause of the limited quota of Foursquare, the info window may only show the restaurant's basic info. In this situation, the footer changes the background to red along with a warning as the following image shows.
-
No network connection. If browser is offline on user's end, the following warning implicates that situation.
The project use ARIA to impove accessibility.
All pull requests are welcome.