thedevpath / navi

Open Source Project for Grow with Google Udacity Scholarship Challenge - Navigation app using offline first strategy and google maps api - To get started please refer to the README.md - CONTRIBUTING.md and the project Wiki

Getting Started

See the Guide on how to contribute here for instructions on how to fork and set up your repository.

Installing Dependencies

In the root directory of your newly cloned project npm install

In the client directory of your project npm install

Skip this next part if you know what you are doing

---

Noob tip

If you can, "clone with SSH instead of clone with HTTPS. This means that, when you type in git remote add origin, you should use a link that looks like this: [email protected]:*YOUR_USER_NAME/YOUR_REPO_NAME.git.* Observe how that differs from https://github.com/YOUR_USER_NAME/YOUR_REPO_NAME.git* While the first creates a remote that uses ssh authentication, the latter uses https, so it'll always prompt you to enter your username and password to authenticate the connection. For more see this link*

---

Get Google Maps API key

• In the config subdirectory you will find secrets-*example.json. Copy it's contents to a new file called secrets.json in the same directory.

• Next get a Google Maps API key

  • Click on the button

  • This will take you through the process

  • Note: If you have an existing API key, you may use that key. Detailed instructions

• Open secrets.json and under googlemaps, paste your API key and save

Install mongodb

You also need to install and have running mongoDB - Directions can be found here

Update and run

When update has completed go to where you installed the project and run npm install again to install dependencies in the root and client directories. This will update the project with any new packages added to the file package.json in your project.

When finished, in the project's root directory type npm run dev. This will start the dev servers on localhost:8080 & localhost:8081 respectively

About Navi

This is an open source project for Grow with Google Udacity Scholarship Challenge - Navigation app using offline first strategy and Open Street Maps and google api

The idea for this project is to build a progressive web app utilizing the technologies learned in the Grow with Google Udacity Scholarship challenge.

The project idea - build a navigation app that will store a local copy of pre selected directions and maps so that navigation continues to work properly in poor to no signal scenarios.

The stack - this will be a node app utilizing Preact for the front end.

Pull requests are welcome!

Table of Contents

• Main Goal
• Features
• About the application
• Where to get the files
• Key files included
• Requirements
• ToDo

Main Goal

The main goal of the app is to provide the user with a map interface that they can use on their mobile device and that will continue to be useful in poor to no signal environments.

Features

• The interface will display a map of a designated area

• Users will be able to:

  • Search for a location
    • By typing into a search field
  • Drop a pin at a location
    • By placing a pin on the map
    • By clicking 'drop pin' next to search results
  • Get directions to a selected location from:
    • Their current location
    • Another dropped pin
  • Save a dropped pin
  • Save a set of directions
  • View list of dropped pins ('saved places')
  • View list of directions ('saved directions')

• The app will:

  • Use the Google Maps API to:
    • Display the map
    • Provide a search interface
    • Provide a current location
    • Provide directions
  • Interface with a database to save a users:
    • Saved places
    • Saved directions
  • Maintain last state on loss of signal including:
    • Current map View
    • Saved places
    • Saved directions

About the application

• Node backend
• Preact Frontend
• Open Street Maps
• Google api
• Service Workers
• MIT License

Where to get the files

• This repository

Key files included

• Files

Requirements

• Requirements

ToDo

• Improvements

navi's Issues

Sign up / Sign in component

Feature Request

Please create Preact Sign up / Sign in component

@TheDevPath/front-end-dev-team

Wire frames

Create a set of wire frames to facilitate smooth flow through the proposed project features. See current readme file for an outline of the current use case / features list.

Create Preact App

Create Preact hello world. You can check out the documentation here: https://preactjs.com/
good info about preact as pwa on this page https://preactjs.com/guide/progressive-web-apps
preact cli https://github.com/developit/preact-cli/

Client Side Routes

Set up Client Side Routes for app skeleton

Create Contribution Guidelines doc

See link below for instructions on how to add and find examples at the bottom of the page.
https://help.github.com/articles/setting-guidelines-for-repository-contributors

Creating a directory for current and future documentation and a new route in app.js

I would like to create a documentation directory on the project where I want to keep the contributing.md and possibly similar files related to documentation. Before I do that, finish the documentation and issue a pull request, I want to check if that works for the team ? If this is fine, I also want to create an additional route in app.js //app.use(express.static('docs'))

Favorites component

Feature Request

Please create a Preact Favorites Component for the UI

@TheDevPath/front-end-dev-team

Edit pull request template

Add Descriptive banch naming to pull request template.
ie.
Have you named your branch in a unique and descriptive manner to reflect the issue or feature?

Implement routes for search queries, results, and updating search history

Need to complete routing for search feature and archiving search history for the app.

Overview of task:

• define getting, updating, and deleting end points in ./routes/search.js for search history
  • make sure to pass verifyToken so end point is secure and requires authentication before proceeding - see savedpins routes as an example
• implement controller functions for end points in ./controllers/search-history-controller.js
• define query and result end points in ./routes/search.js for search feature
  • will need to reference related controller functions in ./controllers/google-api-controller.js and/or implement if needed code is missing

Notes - initial model for storing search history data is in ./models/search-history.js

Setup Express Server

Create an Icon pack

Create a pack of Map-e png icons with transparent background matching the sizes of the preact Icon files in the client>assets>icons folder
These are used for things like favicon, home screen Icon on mobile devices etc

Read me install instructions

Add Install instructions we need to provide detailed information on how to set up the front end app. ie. cd into client, then npm install and so on..

• dependency information

• add app status badges

Set up preact testing

Set up preact chia test suite see https://github.com/developit/preact-jsx-chai for details.

Refactor saved pins test file in tests folder

User authentication is now in place so current tests/savedPins.js fails and needs to be refactored to incorporate authentication rules. See #38 for overview of authentication concept and verifyToken method to see how we pass approved token around.

As a quick overview, when a user logs in or registers an account successfully a token is generated and assigned to the user until they log out or it expires. This token is used to authenticate the user's access to secure end points on the server - primarily saved pins and directions and search history. You will need to incorporate the passing of a valid toke into the unit test.

package.json changes

Do you want to request a feature or report a bug?
Feature

If this is a feature request, what is motivation or use case for changing the behavior?
Good/best practices or more fun to work with 😄

1. Set the engines key with the suggested / required Node version. Some hosts like Heroku uses it and it will ensure everyone gets the same results by running the code. ( prevent issues due to different Node versions )

It looks like this:

"engines": {
  "node": "8.9.0",
  "npm": "5.5.1"
}

Those are the Node / npm versions I'm using. Change it to whatever versions the project should use.

https://docs.npmjs.com/files/package.json#engines

2. Set the NODE_PATH to . this prevents those annoying require statements with many ../ i.e. ../../../../app.js turns into app.js This still allows for those relative paths so it's not a breaking change.

"scripts": {
  "start": "NODE_PATH=. nodemon server.js"
}

Story Board

Create a project story board to visually represent user interaction and use case flows. Utilize the projects wire frames to illustrate users paths of interaction through the app to identify either smooth flow or bottleneck issues. The goal here is intuitive interaction flow.

Refactor and complete apiRoutes.js in tests

This was the file used to configure our backend tests folder and skeleton. It's incomplete and needs refactoring.

1. Rename file to users-test.js (git mv tests/apiRoute.js tests/users-test.js - assuming you're pwd is the root "GOOGLEMAPS-OFFLINE..." folder).
2. Refactor code to test the endpoints in routes/users.js and its respective controller functions (controllers/users-controller.js)

Update contribution guidlines doc

As @jkwening suggested in the discussion on this topic,
suggest updating the contributions guidelines doc, specifically the "How to Contribute" section. I think the part following "To start making a contribution:" needs to be updated to incorporate the additional steps that are missing. Maybe broken into high level steps followed by substeps for each:

Setup Github: includes currently steps 1 - 4
Install Dependencies
Create secrets.json
...
How to start contributing: remaining steps 5 and on wards

Oh whatever structure that bests communicates what is needed to get going. Thanks!

Main App Component

Feature Request:

Under #68, create a seperate issue for Main App component.

For the @TheDevPath/front-end-dev-team

Set up backend restful api JWT Authentication

Task - Set up user authentication with a json web token strategy.

• Create User model
• Set up user routes, sign up & sign in
• Set up bcrypt
• JWT docs

app landing page

Build a landing page for welcoming new users to the app.

App Wiki

Build out app wiki home page

Directions component

Feature request.

Please create Preact Directions component

@TheDevPath/front-end-dev-team

API errror handling

Set up error handling in app.js

Return Static Assets in Production

When in production the server needs to:

1. Serve static assets from client/build directory.
2. Respond with client/build/index.html for all unmatched server routes.

For now the server can simply respond with the HTML file, later we can consider the possibility of server side rendering of Preact components.

Add helmet package for security

Do you want to request a feature or report a bug? - Feature request

If this is a feature request, what is motivation or use case for changing the behavior? - Adding the helmet package will help make the express app more secure, and it helps the app follow the best security practices (https://expressjs.com/en/advanced/best-practice-security.html).

change server port to 8081

Change the development api server port to be 8081.

Create an app Color Scehme

Create an example color scheme document with example swatches, hex codes, and target usage.
Color schemes should take color theory into consideration. You can check out http://paletton.com for inspiration.
ie.

• Primary -insert rgb hex code here ie. #3c3c3c

• Primary light

• Primary dark

• Accent 1

• Accent 2

• Typography light

• Typography dark

Set up Unit testing

Initial set up to facilitate unit testing suite.

Set up MongoDB

Task - Set up mongoDB

• set up mongodb connection in app.js
• create config directory
• create database.js config file within config directory

Set up API Routes

Work with reference docs to map out necessary routes and incorporate into express api.

Set up Client Component Skeleton

Refer to Project Roadmap and build component file structure with basic 'hello world' components

Consistent ESLint Rules

Would be great if the ESLint rules were consistent between frontend and backend.

• Add ESLint to backend
• Alter ESLint rules on frontend to match backend

Nav component

Feature Request.

Create a Preact component for the Nav part of the UI.

For @TheDevPath/front-end-dev-team

Implement routes for getting, saving, and updating saved pins

Complete routing for saved pins feature for the app. Currently the plan is to handle routes for this as part of the search feature so routing url endpoints should go into: ./routes/search.js module.

Overview of task:

• define getting, saving, updating, and deleting end points in ./routes/search.js for dropped pins
  • get route
  • post route
  • delete all pins route
  • delete given pin given db id
• implement controller functions for end points in ./controllers/saved-pins-controller.js

Notes - initial model for storing dropped pins data is in ./models/saved-pins.js; should consider adding a description/user defined label feature for dropped pins.

Validate name, email, and password credentials provided by user for registration

User authorization and authentication is setup but currently we're not validating the user information provided for registering an account. The registerUser function in "users-controller.js" needs to be expanded to include this validation step first before any other processing steps are started.

Here's an overview of what is needed:

  /**
   * TODO
   * 1. validate to ensure null values are not passed for name,
   *   email, or password.
   * 2. verify email is valid i.e. <username>@<domain>
   * 3. validate for secure passwords and no easy to guess passwords
   */

Add unit test for search history end points

See #59 for context. Implement unit test for the routing end points needed. You will need to incorporate authentication into test case since this will be secured data (see #38 and #76 for related information). You can reference savedPins file in tests for an example and routes/users.js and routes/saved-pins regarding routes and their controller functions.

Implement routes for map and related google maps api calls

Complete routes and functions for necessary Google maps api.

Overview:

• Read Googles API doc for maps, search, pins, and directions and document calls needed for app
  • directions api doc: https://developers.google.com/maps/documentation/directions/
  • geolocation api doc: https://developers.google.com/maps/documentation/geolocation/intro
  • maps api doc: https://google-developers.appspot.com/maps/web/
  • general web services: https://developers.google.com/maps/web-services/
• Implement controller functions to interface with Google API in ./controllers/google-api-controller.js
• create end points in ./routes/map.js:
  • return geolocation
    • from google api
    • from native hardware (https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation)
      .. (https://www.w3schools.com/html/html5_geolocation.asp)
  • map for specified location
  • map for dropped pin(s)
  • directions data

Search component

Feature Request

Please create a Preact Search Component for the UI.

For the attention of @TheDevPath/front-end-dev-team

Mock-ups

reference wire frames and story board to create rich graphical mock ups of the various app views.

App logo

Create a logo that can be used universally throughout the app and as the Icon.

This can also coincide with issue #72 Create an Icon Pack

Logo Concept
The goal is to create a representative character for the smart mapping app. We want to convey a helpful personality that is playful and adventurous. You can work with the name Map-e, Mappy or propose something new, just keep in mind it should be as short as possible and be reasonably perceived as a character/personality. Think of things like siri, alexa, and the android robot etc for inspiration as to the strategy here. Map-e should be your reliable little pocket size guide to find new things and navigate the way to get you there, Even when signal is spotty.

Requirements – Constraints
• logo must be distinguishable down to 16px x 16px
• Should scale cleanly
• should work both monotone and full color
• should be usable for the complete icon pack in all sizes

Add test for saved directions routes

See #58 for context. Implement unit test for the routing end points needed. You will need to incorporate authentication into test case since this will be secured data (see #38 and #76 for related information). You can reference savedPins file in tests for an example and routes/users.js and routes/saved-pins regarding routes and their controller functions.

Outline of project features

Creating this ticket to track the proposed project features that is currently in the ReadMe.md so we can continue to discuss and breakout into modular pieces as it evolves.

Features

• The interface will display a map of a designated area

• Users will be able to:

  • Search for a location
    • By typing into a search field
  • View most recent and frequent search
  • Drop a pin at a location
    • By placing a pin on the map
    • By clicking 'drop pin' next to search results
  • Get directions to a selected location from:
    • Their current location
    • Another dropped pin
  • Save a dropped pin
  • Save a set of directions
  • View list of dropped pins ('saved places')
  • View list of directions ('saved directions')

• The app will:

  • Use the Google Maps API to:
    • Display the map
    • Provide a search interface
    • Provide a current location
    • Provide directions
  • Interface with a database to save a users:
    • Saved places
    • Saved directions
  • Maintain last state on loss of signal including:
    • Current map View
    • Saved places
    • Saved directions

Set up proxy

In the preact app set up proxy .

See here for Preact docs on proxy. preact proxy

Implement Schema/Model for Saved Dropped Pins, Saved Directions, and Search History

Initial design for models needed for app so can start getting parts of the backend logic built.

Saved Dropped Pins (Markers) Schema:

• lat: {type: Number, min: -90, max: 90, required: true}
• lng: {type: Number, min: -180, max: 180, required: true}
• place_Id: {type: String, required: true} (https://google-developers.appspot.com/places/place-id)
• save_date: {type: Date, default: Date.now}

Saved Directions Schema: (https://google-developers.appspot.com/maps/documentation/javascript/reference#DirectionsService)

• origin: mixed - will contain lat, lng, and placeID values of origin
• destination: mixed...similar to origin
• geocodedWaypoints: [mixed]...(https://google-developers.appspot.com/maps/documentation/javascript/reference#DirectionsResult)
• routes: [mixed]...see link above
• save_date: {type: Date, default: Date.now}

Note: will need to figure out how to actually store objects returned from api call results

Search History Schema:

• query: {type: String, required: true}
• save_date: {type: Date, default: Date.now}

fix client eslint config - missing plugins - Beginners Only Please!

Here is a hint to help you fix your first bug on an open source project. Look in the client directory at the eslintrc.json file. Compare this with the devDependencies in the client>package.json and add the eslint plugins to the to the eslintrc.json file.

Good luck!

Map component

The first phase of this task is complete but needs to be refined with some CSS clean up and connecting to our back end bridge rather than direct to the google API when that functionality is ready.

Feature Request.

Please create a Preact component that shows a Map (using Google Maps API)

@seckboy and I are working on this

Master Issue - Initial Standup

Hi - the purpose of this issue is to give a bird's eye view of what is currently being worked on, how it relates to other tasks, and a place to note what needs to be done next.

Please add tasks as needed even if you're not planning on working it so others can have a starting point. If possible, for big tasks, please break into modular subtasks for clarity and ease of tracking. Keep the listed tasks here simple descriptors, the issues themselves should have detailed information regarding the task; for context purposes and allowing someone else to work on the task or continue where you left off.

Frontend

Design

• wire frames (#11) / mockups (#13)
  • draft overall structure of the app (#16)
  • identify components
  • finalize structure and features list for version 1 standup (#16)
  • app landing page
  • search for location & results view
  • directions view
  • drop pin view
  • map view
  • save view (pin/directions)
  • list of saved pins/directions view
  • login page (low priority?)
• story board (#12)
  • draft storyboard
  • app logo (#8)
  • app color scheme (#10)
    • general app views
    • connection notification updates

Preact

• create "hello world" preact app as base (#2)
• prototype (#13) - dependent on finalizing wire frames, mockups, and storyboard
  • app landing page
  • map view
  • search for location & results view
  • directions view

Backend

• setup basic express server (#1)
• connect MongoDB and app server using Node.js driver (alternative is mongoose driver)
  • setup mongodb and config folder (#25)
• create RESTful API
  • determine needed routes
• outline database model for MongoDB (#30)
  • saved dropped pins
  • saved directions
  • search history

Other Supporting Tasks

Documentation

• create contribution guidelines (#5)
  • create an outline
• app wiki (#6)
• draft install readme (#9)

Profile component

Feature Request

Please create a Preact Profile Component for the UI

@TheDevPath/front-end-dev-team

Implement routes for getting, saving, and updating saved directions

Complete routing for saved directions feature for the app. Currently the plan is to handle routes for this as part of the search feature so routing url endpoints should go into: ./routes/search.js module.

Overview of task:

• define getting, saving, updating, and deleting end points in ./routes/search.js for saved directions
  • make sure to pass verifyToken so end point is secure and requires authentication before proceeding - see savedpins routes as an example
• implement controller functions for end points in ./controllers/saved-directions-controller.js

Notes - initial model for storing saved directions data is in ./models/saved-directions.js; should consider adding feature for description/user defined labels for saved direction.