notes-at Sample App

A note taking app that retrieves and stores location data for each note. I created this app as a full-stack project to learn to work with a new toolchain (MEVN). It is based off of the Vue.JS webpack-simple template. For detailed explanation on vue-loader, consult the docs for vue-loader.

Dependencies

Server-side

• Node.js
• Express
• MongoDB
• Mongoose

Client-side

• VueJS 2.x
• Vue-router
• axios
• vue-googlemaps
• Moment.js
• Google API Key (for Maps JavaScript API & Places API for Web)

Configuration

You will need to set your Google API Key in ./src/main.js.

Vue.use(VueGoogleMaps, {
  load: {
    key: 'your-google-api-key',
    libraries: 'places'
  }
});

You may also need to configure ./server.js if your instance of MongoDB is running on a port other than the default port 27017 or your local server is something other than http://localhost.

// mongoose instance connection url connection
mongoose.Promise = global.Promise;
//mongoose.set('debug', true);
mongoose.connect('mongodb://localhost:27017/' + dbName, {'useNewUrlParser': true});//

Build Setup

# install dependencies
npm install

# start express RESTful service layer at localhost:3030
npm run start

# build project (drop -dev for production build)
npm run build-dev

# serve with hot reload at localhost:8080
npm run dev

Resources

• RESTfulAPITutorial Provided the underpinnings of my API services
• Geolocation API Documentation on navigator.geolocation from Mozilla.
• Google Maps API Reference
• Google Places Service API Reference

To-Do Roadmap

• Incorporate Vuex
• Incorporate unit and e2e testing
• Put it up on Firebase behind authentications and with user accounts
• Implement as Progressive Web App

Done

Created a version of the app using IndexedDB for data storage. Check that project out here and see a sample of that version of the app here. First step on the path to turning it into a prorgressive web app.

Author

Brock Henderson @brocktopia || brocktopia.com