The purpose of this project is to build a web application using React.js from scratch. It should:
- Be Responsive
- Be A single page app built with React.js
- Use asynchronous requests to Google Maps API and at least one more 3rd party API
- Function Offline using Service Workers
- Be Accessible
This app is a local map for San Mateo (hardcoded to 3000 meters around the downtown) neighborhood. It shows markers on the map of different useful places like coffee shops, gyms, bakeries, etc. There's a filter dropdown available - it allows to narrow down the list to only chosen category.
Keep in mind that right now the app is limited to only request 5 items per each category. This limitation is made for comfortable testing and developing, because I use free Foursquare API account and it has limits on daily requests.
Sometimes there could be mildly irrelevant results (like a burger shop in an ice-cream category), because it may have this as a secondary category on Foursquare (and indeed serve ice-cream) but have a different primary category.
- Copy this repo on your computer
- Check that you have node.js and npm installed
- Install all project dependencies with
npm install
- Modify Google Maps API key ( in
./src/Map.js
, parameter googleMapURL) to match yours. Modify Foursquare API key ( in./src/Foursquare.js
, parameter foursquareKeys) to match yours. These keys will be disabled as soon as the app gets evaluated by Udacity team. - Start the development server with
npm start
With your server running, visit the site: http://localhost:3000
(it will be opened for you when you run npm start
command)
- Repeat steps 1-4 from a previous section
- Build the project with
npm run build
- Start the production server with
serve -s build
With your server running, visit the site: http://localhost:5000
- React.js
- node.js
- npm
- React Google Maps component
- Google Maps
- Foursquare