All Projects → TheDevPath → Navi

TheDevPath / Navi

Licence: mit
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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Navi

Offline Gallery
🎈 A 16kb Preact & Redux based Progressive Web App that offers an offline gallery experience of external images.
Stars: ✭ 90 (+76.47%)
Mutual labels:  offline, pwa, preact, service-worker
Next Offline
make your Next.js application work offline using service workers via Google's workbox
Stars: ✭ 1,306 (+2460.78%)
Mutual labels:  offline, pwa, service-worker
Pwastats
A directory of Progressive Web App case studies.
Stars: ✭ 88 (+72.55%)
Mutual labels:  offline, pwa, service-worker
Ember Service Worker
A pluggable approach to Service Workers for Ember.js
Stars: ✭ 227 (+345.1%)
Mutual labels:  offline, pwa, service-worker
Vue Wordpress Pwa
An offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps
Stars: ✭ 665 (+1203.92%)
Mutual labels:  offline, pwa, service-worker
Bento Starter
🍱 Full-Stack solution to quickly build PWA applications with Vue.js and Firebase
Stars: ✭ 1,519 (+2878.43%)
Mutual labels:  offline, pwa, service-worker
Notes
Offline-first notepad PWA
Stars: ✭ 163 (+219.61%)
Mutual labels:  offline, pwa, service-worker
Super Progressive Web Apps
SuperPWA helps to convert your WordPress website into Progressive Web Apps instantly. PWA (Progressive Web Apps) demo at : https://superpwa.com and Plugin :
Stars: ✭ 304 (+496.08%)
Mutual labels:  offline, pwa, service-worker
React Storefront
React Storefront - PWA for eCommerce. 100% offline, platform agnostic, headless, Magento 2 supported. Always Open Source, Apache-2.0 license. Join us as contributor ([email protected]).
Stars: ✭ 292 (+472.55%)
Mutual labels:  open-source, pwa, preact
Android Pwa Wrapper
Android Wrapper to create native Android Apps from offline-capable Progressive Web Apps
Stars: ✭ 265 (+419.61%)
Mutual labels:  offline, pwa, service-worker
Jfa Pwa Toolkit
⚡️ PWA Features to Any Website (very Fast & Easy)
Stars: ✭ 245 (+380.39%)
Mutual labels:  offline, pwa, service-worker
Offline Plugin
Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
Stars: ✭ 4,444 (+8613.73%)
Mutual labels:  offline, pwa, service-worker
Preact Starter
Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact
Stars: ✭ 384 (+652.94%)
Mutual labels:  offline, pwa, preact
Upup
✈️ Easily create sites that work offline as well as online
Stars: ✭ 4,777 (+9266.67%)
Mutual labels:  offline, pwa, service-worker
Sw Precache
Service Worker Precache is a module for generating a service worker that precaches resources. It integrates with your build process. Once configured, it detects all your static resources (HTML, JavaScript, CSS, images, etc.) and generates a hash of each file's contents. Information about each file's URL and versioned hash are stored in the generated service worker file, along with logic to serve those files cache-first, and automatically keep those files up to date when changes are detected in subsequent builds.
Stars: ✭ 5,276 (+10245.1%)
Mutual labels:  offline, service-worker
Your First Pwapp
Code associated with Your First Progressive Web App codelab
Stars: ✭ 619 (+1113.73%)
Mutual labels:  offline, service-worker
Demo Progressive Web App
🎉 A demo for progressive web application with features like offline, push notifications, background sync etc,
Stars: ✭ 798 (+1464.71%)
Mutual labels:  offline, pwa
Markcook
A smart and beautiful markdown editor.
Stars: ✭ 547 (+972.55%)
Mutual labels:  pwa, service-worker
Devdocs
API Documentation Browser
Stars: ✭ 27,208 (+53249.02%)
Mutual labels:  offline, pwa
Pwa Module
Zero config PWA solution for Nuxt.js
Stars: ✭ 1,033 (+1925.49%)
Mutual labels:  offline, pwa

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

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

Key files included

  • Files

Requirements

  • Requirements

ToDo

  • Improvements
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].