This is a single page map application that shows hotel venues around Sydney area. This demo version is identical to this project, however it displays Tech Startups in the Indianapolis 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.
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.
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/ebisLab/Neighborhood_Map.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
└─ <ListItem /> # Stateless Component, contains the list of locations
# and the title- Foursquare Places API Documentation
- Project 7 Playlist by Elharony
- Project 7 Tutorial by Ryan Waite
- Web Accessibility Checklist
- Standard Service Worker has been enabled, and works in production build.
Many thanks to the Udacity Slack Community for the abundant help and tips. I would like to extend my gratitude to the following people for their help:
- Sara-FEND, JamesDBarlett3, drunkenkismet[FEND], hColleen, Rodrick, Sachin, Xavier FEND.