The API key for this project has been regenerated for security purposes, and the one embedded here will expire 12/12/20, rendering the application defunct without an active key.

A continuation of this project can be found here. :)

Team 1

Sean Thayer-Freeman: thayerfs@oregonstate.edu

Blake Henry: henrybl@oregonstate.edu

Jonathan Mather: matherj@oregonstate.edu

Christian Herinckx: herincch@oregonstate.edu

Deadline:

Code and demo due by 5:00pm on Friday, 12/11/2020

Grading Criteria ↴

• 50 points – Your app satisfies these requirements:
  • The app uses HTML and CSS to implement a well-designed client interface.
  • The app uses client-side JS to enable relevant user interactions.
  • The app is served using a Node.js-based (or other approved) serving stack.
  • The app dynamically generates pages based on data stored permanently on the back end.
  • The app’s client interface communicates with the app’s server to create, read, update, and/or delete content in the back end data store.
• 25 points – Your app has a high-quality design and implementation.
  • For example, your app is free of bugs and has an effective user interface.
• 25 points – Your app is creative and original.
  • If, for example, your app is simply a repackaging of the app we develop together during lecture or the one you developed during your assignments this term, you will likely not score highly in this category.

PlaceKeeper

Rough Description

PlaceKeeper will feature a Google Maps embed which the user will be able to interact with. Specifically, the user will be able to place map pins in locations of their choice, assign a name & description to that map pin, be able to save a map with these locations, and finally, be able to retrieve said map at a later time.

General Roadmap

Format & Design

Completed↴

• Build basic 404 page
• Build basic Homepage
• Apply basic CSS styling
• Build basic About page
• Build basic Homepage Modal

Front-end Functionality

Completed↴

• Implement Modal hiding/unhiding
• Implement reading of current pins and into modal (name, lat, lng)
• Implement very basic 'POST' request generation for Modal
• Implement completed 'POST' request generation for modal
• Implement filtering of places (by name) in 'saved-places-list-element' using 'search-bar-input'

Back-end Functionality

Completed↴

• Implement 404 page routing
• Implement basic Express serving
• Implement serving partials from a {map_name}.json file
• About page routing
• Implement basic 'POST' request handling
• Implement completed request and response 'POST' handling for saving a map
• Implement completed request and response 'GET' handling for /importMap

GoogleMaps Embed

Completed↴

• Place embed and verify API functionality
• Implement ability to place pins
• Implement ability to name a pin
• Implement ability to store latitude, longitude, and name of a pin in an object var
• Implement robust infobox popup form entry
• Implement infobox popup for existing pins
• Implement panning to pin on click
• Implement deleting pin from map directly or removing pin when its list item is removed

Optional Features

• Implement selecting list item and panning to pin on map
• Implement client side deletion of a list item from the saved places list. This should also remove it from the map embed.
• Create another page?

Completed↴

• Create a link to /about
• Style /about