Eighth project for Udacity's FEND course.
In this project, we are asked to use react to develop a single page application featuring a map of a place of our choice. This map has several functionalities,like including highlighted locations, third-party data about those locations and various ways to browse the content.
Athens museums maps diplays a map centered in Athens,with 30 markers which represent 30 museum locations fetched from Foursquare API. There is also a side-menu with all these locations listed. Side menu has a "Search Places" filter option, which filters both the list view and the map markers displayed by default on load. When the user types into the search field, the location list view and the markers update accordingly to filtered results in real time. Clicking on a marker or a list-item pops up an info window with details about the selected museum. Info Window's content is also fetched from Foursquare API and displays name, image and address of selected place.
Clone the repository or download the zip-file of the master branch.
npm : If you don't have npm installed, navigate to npm's website to download and install the software.
To see a live version of the app,click here
To get started developing right away: Using your terminal/command line, get inside the folder where these project files are kept: cd /path/to/the/project.
- install all project dependencies with
npm install
- start the development server with
npm start
- create a production build with
npm run build - To serve it with a static server run
npm install -g serve - After the static server is installed run
serve -s build
The production version of the project will run at localhost:5000
The service worker is only implemented during production build! In order to run it on build mode,follow the steps desribed above.
This project was originally bootstrapped with Create React App.
Packages used:
- react-google-maps for handling the map features.Documentation
- react-bootstrap.
- escape-string-regexp.
- react-debounce-input.
This project fetches location data from Foursquare API and the map from Google Maps JavaScript API.
This is the final Udacity's FEND project, which combines all the things we have learned the past 9 months. I would like to thank:
- our awesome slack community and my fellow students for their willingness not only to share their knowledge but to also provide endless support and motivation.
- The students who held the study jams and helped us to get a right direction for our projects. Especially the last project's study jam with ms Eman Zaghloul was the one that helped me to set the building foundations for this project.
- the reviewers who reviewed my projects all these months. Every single review taught me new things and made me a better developer.
- Special thank you to my wonderful mentor ms Kelli Blalock for always being there and supported me when I needed help.
Copyright (c) 2018 Foteini Kollia
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.