Develop a single page application featuring a map of your neighborhood or a neighborhood you would like to visit. You will then add additional functionality to this map including highlighted locations, third-party data about those locations and various ways to browse the content.
For this project, I used Web Starter Kit which features the following:
| Feature | Summary |
|---|---|
| Responsive boilerplate | A responsive boilerplate optimized for the multi-screen web. Powered by Material Design Lite. You're free to use either this or a completely clean-slate via basic.html. |
| Sass support | Compile Sass into CSS with ease, bringing support for variables, mixins and more. (Run gulp serve or gulp for production) |
| Performance optimization | Minify and concatenate JavaScript, CSS, HTML and images to help keep your pages lean. (Run gulp to create an optimised version of your project to /dist) |
| Code Linting | JavaScript code linting is done using ESLint - a pluggable linter tool for identifying and reporting on patterns in JavaScript. Web Starter Kit uses ESLint with eslint-config-google, which tries to follow the Google JavaScript style guide. |
| ES2015 via Babel 6.0 | Optional ES2015 support using Babel. To enable ES2015 support remove the line "only": "gulpfile.babel.js", in the .babelrc file. ES2015 source code will be automatically transpiled to ES5 for wide browser support. |
| Built-in HTTP Server | A built-in server for previewing your site locally while you develop and iterate |
| Live Browser Reloading | Reload the browser in real-time anytime an edit is made without the need for an extension. (Run gulp serve and edit your files) |
| Cross-device Synchronization | Synchronize clicks, scrolls, forms and live-reload across multiple devices as you edit your project. Powered by BrowserSync. (Run gulp serve and open up the IP provided on other devices on your network) |
| Offline support | Thanks to our baked in Service Worker pre-caching, sites deploying dist to a HTTPS domain will enjoy offline support. This is made possible by sw-precache. |
| PageSpeed Insights | Web performance metrics showing how well your site performs on mobile and desktop (Run gulp pagespeed) |
Third party data is provided by Foursquare via the Foursquare API
If you would like to build this project, be sure to look over the installation docs to verify your environment is prepared to run WSK. Once you have verified that your system can run WSK, check out the commands available to get started.
View the optimized demonstration of the Neighborhood Map app.
If you find yourself running into issues during installation or running the tools, please check the Troubleshooting guide and then open an issue.
Apache 2.0