National Park Finder

WSI Project 3 - Beta Release Cycle

Be sure to FORK and CLONE a copy from your GitHub account.

Team Members

• Emma Prager (@eprager)
• Sneha Rajulapally (@Sneha)
• Kinza Haque (@Kinza)
• Alison McDonald (@Alison)

View Deployment: https://nationalparkfinder.herokuapp.com/

To Run the Project:

• Please ensure you have the necessary dependencies installed (more information below)
• Before proceeding, please get your own Google Maps API key for free from: https://developers.google.com/maps/gmp-get-started#api-key
• In your project directory, run npm start
• Then, you are prompted to open http://localhost:3000 in the web browser of your choice

Dependencies:

Node and npm:

• Reference:
  https://nodejs.org/en/ https://www.npmjs.com/get-npm

Express:

• Reference:
  https://expressjs.com/

• Vscode installation:
  npm install express --save

• Update the tests
  All test files are in the test directory

Mocha:

• Reference:
  https://mochajs.org/

• Vscode installation:
  npm install --global mocha

• Run the tests: npm test
  The test results will be displayed in the command line

• Update the tests
  All test files are in the test directory

JSDocs:

• Reference:
  https://jsdoc.app/

• Vscode installation:
  npm install -g jsdoc

• Configuring JSDoc with configuration file:
  https://jsdoc.app/about-configuring-jsdoc.html

• Run the JSDocs: npm run docs
  Run the command http-server from the out directory, and you can visit http://localhost:8080 to view your documentation page.

• Update the JSdoc:
  Move the jsdoc config file to the root
  Navigate the the public/javascripts directory
  Run command jsdoc ./
  Update the README with jsdoc ./ README.md

ESLint:

• Reference:
  https://eslint.org/

• Vscode installation:
  npm install eslint

• Setup:
  

  • https://eslint.org/docs/user-guide/getting-started
  • https://github.com/karlstolley/eslint-config

• Run the ESLint:
  Run commands:
  npx eslint -c conf.eslint.json config.js
npx eslint -c (json file) (js file)
map.js --fix

Pug

• Reference:
  https://pugjs.org/api/getting-started.html

• Vscode installation:
  npm install pug

• Setup:
  All pug files are located in the views directory

Compression

• Reference:
  https://www.npmjs.com/package/compression

• Vscode installation:
  npm install compression

PM2

• Reference:
  https://pm2.keymetrics.io/docs/usage/quick-start/

• Vscode installation:
  npm install pm2@latest -g

• Run PM2: pm2 start app.js
  

Dotenv

• Reference:
  https://www.npmjs.com/package/dotenv

• Vscode installation:
  npm install dotenv

• Configure dotenv:
  The following line is added in app.js: require('dotenv').config()
  Then, add a .env file in the root directory
  In the new file, add a line with: MAP_KEY= {YOUR GOOGLE MAPS API KEY HERE}
.env is in the .gitignore file, so your key will not be pushed to your repository
  If you do not have a Google Maps API key, follow the directions at the beginning of the README
  

node-geocoder

• Reference:
  https://www.npmjs.com/package/node-geocoder

• Vscode installation:
  npm install node-geocoder

• Configure dotenv:
  The following line code is added in routes/results.js:
  const NodeGeocoder = require('node-geocoder')
  This is connected to the new API key, allowing the geocoder to function:

const options = {
    provider: 'google',
    apiKey: process.env.MAP_KEY, // google map API key
    formatter: null 
};
const geocoder = NodeGeocoder(options);

Below is the functionality documentation for our Project for each directory:

config

• ESLint files for node and the browser
• JSDoc configuration

docs

• JSDoc files

public

• javascripts
  • search.js -- JavaScript for functionalities related to filters and list results, as well as placing pins on the map based on those results
  • map.js -- JavaScript for functionalities related to initializing the map based on user entered data
• json
  • NPS API data (documentation: https://www.nps.gov/subjects/developer/api-documentation.htm#/)
• stylesheets
  • common.css, reset.css -- Both stylesheets are used within both index and result HTML pages
  • results.css -- Styling for only the results HTML page
  • screen.css -- Styling for only the index HTML page
  • map.css -- Styling for only the map on results HTML page

routes

• index.js - Connects app.js to the index.pug file in views directory
• results.js - Connects app.js to the results.pug file in views directory

test

• test.js - runs test script via mocha

views

• index.pug - page for user to enter location and radius utilizing progressive disclosure
• results.pug - page for user to select advanced filters (activities, interests) and view results (map, park information list)