This project is from my Front-End Web Developer Nanodegree Program at Udacity. The Neighborhood Map is created using Google Map API and FourSquare API. The code was structured using the M-V-VM model (ie..) Knockout JS which is used to develop a single page application featuring a map of my neighborhood, adding additional functionality to this application including highlighted locations, third-party data about those locations and various ways to browse the content.
- Get Started
- Motivation
- Lesson Learned
- Screenshot
- Installation
- How to Use?
- Technology Used
- Dependencies
- Contributing
- License
Click on this link to see the website or you can download or clone the project, and run npm start.
The neighborhood map application is complex enough and incorporates a variety of data points that it can easily become unwieldy to manage. There are a number of frameworks, libraries and APIs available to make this process more manageable and many employers are looking for specific skills in using these packages.
In this project, I learned how design patterns assist in developing a manageable codebase. And then explore how frameworks can decrease the time required developing an application and provide a number of utilities for you to use. Finally, I was implement third-party APIs that provide valuable data sets that can improve the quality of your application.
- You can download the zip or clone the project with git
$ git clone https://github.com/abdsamadf/ud-fend-feed-reader-testing.git
- Install Node.js by following the instructions on the website.
- Run
npm install --g gulp-cli, to install gulp-cli. - Run
npm install, inside the project to install dependencies. - Good Luck! 👍
- cd {YOUR_PROJECT_DIRECTORY}
- Open your code editor to edit the code with your API Keys/Client_ID & Client_Secret before running. These are located in the app.js (for [FourSquare] (https://developer.foursquare.com/)).
- Run
export API_KEY="{YOUR_GOOGLE_MAP_API_KEY}". - Run
npm start, to start the development. - Run
npm run buildto release the production to the world. - Run
npm run deployto release the gh-pages.
- HTML5 and CSS3
- Vanilla JS
- Foursquare API - Foursquare
- Google Maps API - Google Maps API
- Knockout JS - Knockout is a JavaScript MVVM (a modern variant of MVC) library that makes it easier to create rich, desktop-like user interfaces with JavaScript and HTML. It uses observers to make your UI automatically stay in sync with an underlying data model, along with a powerful and extensible set of declarative bindings to enable productive development.
- Google Maps - Google Maps Bring the real world to your users with customized maps and Street View imagery.
- Material Design Lite - Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.
- Gulp - Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
Contributions are always welcome! Please read the contribution guidelines first.
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
MIT © Abdul Samad