This is a single page map application that shows food venues around Seattle area.
The page consist of a Google Map and Location markers. The sidebar contains the list of all the venues. Clicking either the markers or list items will open an InfoWindow that shows more details about the venue.
This project is to demonstrate a good understanding of React.js architecture, working with API's, creating Responsive Design and Accessibility compliant UI.
This App showcases popular food venues in Seattle. The Map displays the markers for each venue. We can also find this same list of venues on the sidebar. An text input box in the sidebar gives us a filter functionality by showing places that match our search query.
The InfoWindow displays more details about the venue, namely, the restaurant category, the exact address, and a link to visit its Foursquare page.
In mobile viewports, a toggle button for the menu appears in the upper-right corner of the screen. Pressing it will slide the sidebar on and off the screen.
This was created using create-react-app, and you can either run it in development or in production mode.
- Clone this repo or
git clone https://github.com/carlo-bruno/udacity-fend-project-neighborhood.git - Go to the application folder, install dependencies using
npm install - Run the application
npm start - Open your browser to
localhost:3000
This is how structured my React Components
├── <App /> # Stateful Component, handles the state and api requests
│ # as well as rendering Google maps, markers and InfoWindow
└─ <ListView /> # Stateless Component, contains the list of locations
# the title, and Foursquare attribution