/TripEZ

AngularJS-powered vacation plans organized by Trip, Base, and Event JSON objects in the Firebase Web API. Base and Event searches interact with Google Places API for saving places to eat, stay, and see. Styling with UI-Bootstrap in SASS.

Primary LanguageHTML

TripEZ - NSS Front-End Capstone

Summary: A virtual trip planner that eases the process of searching for and organizing activities. TripEZ is Mitchell Blom's front end capstone at Nashville Software School. It integrates AngularJS, Angular-Animate, Bootstrap, UI-Bootstrap, Sass, jQuery, Firebase Web API, Google Places Javascript API, and Google Places Geocoding.


Description

Helps users organize their vacation plans using Trips, Bases, and Events. Users define where they want to go, and TripEZ makes it easy to search for places to eat, stay, and see.


Features

  • User login and registration using Firebase or Google authentication
  • Trips, Bases, and Events can be added, edited, archived, or deleted
  • List views reorder items automatically based on start date
  • Bases within each Trip streamline Event searching
  • New Base Search dynamically communicates with Google Places to find and save location coordinates
  • App consistent between pages to display Trip and Base the user is working on
  • Event Search automated to the selected Base coordinates
  • Event Search results provide average ratings and link users to external sites for additional research
  • Event type differentiates them with symbols on the itinerary view
  • Archive view mode allows users to save and recall past trips rather than deleting
  • Google users can view their cloud calendar

User Flow

  1. Arrive on landing page
  2. Identify as existing user, needing to register, or Google user
  3. Arrive at the Event List view that shows upcoming events
  4. Select existing Trip to view Base List
  5. Add or edit Trip and select desired dates
  6. Click existing Trip routes to Base list for that Trip
  7. Select existing Base to view & edit, or add another Base
  8. Add another Base and select desired dates
  9. Click existing Base routes to Event List for that Base
  10. Select Base to filter the Event List, or select All Bases to show entire trip itinerary
  11. Filter by Event type to see only Food, Site, Transit, or Lodging
  12. Click Search New Event button routes to Event Search page
  13. Arrive on Event Search Page that automatically centers map on most recently selected Base
  14. Search for Events returns 10-20 maximum results with the free API license
  15. Save Event to Base/Trip by indicating type, start, and end
  16. View and Edit Event details by clicking from Event List
  17. Click Archived Trips to view the archive, which is only viewable
  18. Click the unlock button to return an archived Trip to the Active list for editing and additions

Stretch Goals

  • Itinerary view includes tab to view mapped Bases and Events
  • Google users save and edit Events in sync with their cloud-based calendar
  • Direction support between Events

Screen Shots

Landing

Splashpage

Login

Splashpage

Trips

Splashpage

Bases and Expanded Navbar

Splashpage

Events

Splashpage

Event Search

Splashpage

Event Detail

Splashpage

Archive Example

Splashpage