Skip to content
Travel Application for Project 1 of UMN Bootcamp
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
images
javascript
README.md
index.html

README.md

TravelApp

Travel Application for Project 1 of UMN Bootcamp

Team name - Amazing Travels

Team members - Julia Nissen, Amin Kedir, Sara Bracewell, Walter Zuschlag

Overall application’s concept:

To educate future travelers of fantastic travel locations and provide a variety  which include Points of interest, Local restaurants and Hotels. 

The motivation for its development:

Destination traveling is a passion of our team and the motivation was to create a website that packages our travel interests into one website instead of searching multiple travel sites. User friendly interface on one page.

Our design process:

  • Our design process consisted of meeting as a group.
  • Discussing our strengths and weaknesses.
  • Breaking down into two groups for front and back end design.
  • Discuss the technologies and libraries of interest to use.
  • Developed a sketch of the final product.

The technologies used (and briefly how they work):

  • API - GooglePlaces and OpenWeather
  • Libraries - Materialize for framework and autocomplete, JQuery
  • Programing languages - javascript, jquery,
  • Database - Firebase

Directions for future development:

  • Improve database storage functionality.
  • Implement Sidebar to illustrate search history and or favorite.
  • Add links to websites to points of interest, hotels and restaurant sites.
  • Add flags/pins to map for points of interest, hotels and restaurant sites.

Getting Started

The site is deployed at https://junissen.github.io/TravelApp/#!
There is a modal that pops up after the page loads to instruct you on how the site works. Once you enter the application it is set up to show Minneapolis and its points of interest as the viewing option. In the search bar you can enter a city that you would like to travel to. The autocomplete should help you with your choice. Once you click on that city, images of points of interest show up in a middle panel along with the current weather conditions. Below the middle panel there are 2 cards, one to the left that tells you more about the points of interest and the one to the right that contains a map with the location of that point of interest. As you move through the pictures, the place you are looking at is highlighted below in the left card and the map changes to show you the location of that place. Most recent searches saved in Firebase show up in the navagation bar. You can click on the Viewing Options on the navagation bar to show other items which include: Restaurants, Hotels and Points of Interest. The footer explains who was on the team that created the application as well as linking to their LinkedIn sites.

Prerequisites

There are no prerequisite softwares that you need to install to run this application. This application is deployed in GitHub.

First Group Project Assigment

Coding Requirements:

  • Must use at least two APIs
  • Must use AJAX to pull data
  • Must utilize at least one new library or technology that we haven’t discussed,
  • Must have a polished frontend / UI,
  • Must meet good quality coding standards (indentation, scoping, naming),
  • Must NOT use alerts, confirms, or prompts (look into modals!),
  • Must have some sort of repeating element (table, columns, etc),
  • Must use Bootstrap or Alternative CSS Framework,
  • Must be Deployed (Github Pages),
  • Must have User Input Validation.

Coding - Nice to haves:

  • Utilize Firebase for Persistent Data Storage (Consider this basically a requirement).
  • Mobile Responsive
  • Use an alternative CSS framework like Materialize

Just do your own thing. Be creative! Be ambitious!

Presentation Requirements:

  • You will also be responsible for preparing a 10 minute presentation.
  • This will be a formal presentation.
  • One in which you explain in detail:
  • Your overall application’s concept
  • The motivation for its development
  • Your design process
  • The technologies you used (and briefly how they work)
  • A demonstration of its functionality
  • Directions for future development
  • Treat the presentation seriously!
  • Talking intelligently about tech > doing tech sometimes.
You can’t perform that action at this time.