/final-project-team-6

final-project-team-6 created by GitHub Classroom

Primary LanguageJavaScriptMIT LicenseMIT

final-project -- College ConnecTour Web Application

Ryan Bloom (rab83) and Daniel Bernt (dvb6)

For our final project we created a web application that people can use to plan college tour visits. My younger brother is currently going through the process of visiting colleges, and I always hear my mom complaining about how difficult it is to coordinate college visits and tours. Therefore, we felt that this project not only met the requirements, but was interesting and provided a much needed service.

-- Data Used -- At first, we planned on finding tour dates and times from various colleges to compile our dataset. However, this was an unrealistic expectation due to the fact that the schools' data is all in different locations and formats and with different accessibility requirements. Therefore, we decided to create our own "fake dataset" containing school objects with names, tours, and location attributes. We used google map's api and the locations in the data objects in order to plot the schools in the schedule.

-- Code Libraries -- To create our application, we used vue in order to make for easier data storage. Furthermore, we grew very comfortable with using vue and firebase in order to store information through the "trello" project, and we felt that the combination of vue, javascript, would be a reasonable approach for creating our application. We also used bootstrap for stylig purposes. In the end, we connected our application to firebase in order to save all of the information and data that is entered. Therefore, users can log in and out, and their previously saved trips will remain there for later viewing and use. We also utilized the google maps api in order to visualize the locations of the schools in the schedule.

-- Roles -- Upon accessing our application, the user is prompted to either log in, sign up, or continue as guest. If the user logs in with the predetermined administrator username (admin) and password (AdminPassword), he or she is using the application as the administrator and can do more things than a user or a guest. For example, the administrator can see all of the schools within our data set, and remove schools that appear to be fake (added by a user as a joke). Furthermore, the administrator's trips object holds all the trips (public and private) that were saved by users. Therefore the administrator can view anyone's trips as well.

If the user signs in or signs up (if he or she does not already have an account), his/her username and password are stored in the "users" data object and he/she is made the "activeUser" of the site. As a user, one can select dates of a desired trip, select schools that he/she wishes to visit, and create new trip schedules. The user can also decide whether or not he/she wants these schedules to be public or private. If the schedules are made public, that means that other users (as well as guests without accounts) can view these schedules. This is usefull for guests because guests can not create their own schedules, a function that only administrators and users can use. However, guests can view public schedules based on the length of the trip and the schools being visited so that if the guest wants to visit the same schools, he/she can still find use from the applicaiton.

Furthermore, once a user creates trips, he/she can loop through various permutations of the trips and save ones that he/she likes to his/her own trips log, these trips can later be removed from their saved trips as well. Then, once signing out and signing back in, the user's previously saved trips are displayed to him/her and can be viewed again. Furthermore, if a user wishes to visit a school that is not shown in our dropdown select box, then he/she can add this school to our dataset, making our data dynamic and ever growing.

-- Robust -- Our application checks a variety of inputs to make sure that they are not goinig to hinder the functionality of the application. First, we check when a user signs in to see if the username and password are a match found in our dataset. Also, when signing up, we check to make sure the desired username is not already in the dataset and that the password is at least 6 characters long. Then, once logged in (as administrator, user, or guest), we preform more checks to make sure that trip data is accurate.

When a user selects dates for his/her trip from the start and end date inputs, before allowing a schedule to be generated, we ensure that the dates are: i) not in the past, ii) far enough appart to accommodate visiting the number of schools he/she selcted, iii) start date is before the end date. Additionally, we check to make sure that the start zip code is either a valid zip code (five numerical digits) or empty (because this field is optional in case users do not feel comfortable providing this information). Additionally, we check to make sure the user did not select too many schools for the length of his/her trip and we ensure that all required fields are filled out. Finally, if a user tries to save a trip that is already saved to his/her data, we check to make sure it is not duplicated and added agian.

-- Using the Application -- In order to use our application, users simply sign in or sign up and then start planning their trip. The select dates that they want to travel and schools that the wish to visit. Then they select whether or not to make their trips public or private (which is alwys initialized to private for security reasons). Once they click the "create your schedules!" button, they are taken to another screen that displays various schedules accommodating their school visit desires and their dates of travel. Here, a number of possible schedules can be seen using the "next" and "prev" buttons. Furthermore, there is a link below the schedules that will take the user to a map of the schools that they wish to visit so that they can visualize their trip. If the user doesn't like any of the trips genreated, he/she can click the "Want a different set of schedules?" button in order to generate new permutations of the same trip. If the user sees a trip that he/she likes, clicking the "Save this schedule!" button will save that schedule to his/her trips data. Then, upon logging out and logging back in, the user's trips are displayed in the "View Your Schedules!" section of the webpage.

Once a schedule is saved, two additional pieces of information appear below the schedule. First, the user's name appears, as well as the privacy setting for that user's schedule (0 being public, 1 being private). Therefore, when viewing public schedules, one can see what other users saved the schedule in question.

If a user doesn't see a school in our dataset, he/she can simply add it (including its latitude and longitude) by typing the name into the input text box and adding the school. However, the administrator can remove schools if he/she believes they were added as a prank or incorrectly.

Additionally, if a user continues as guest instead of signing in or signing up, then he/she can not create trips of his/her own. However he/she can view others' trips that were made public in order to get a general idea of ways to visit similar schools in similar time periods. Guests can not save schedules or view the map. When viewing public trips, the user starts at the trip that they selected and can switch between or public trips using the "next" and "prev" buttons. Then, the user can return to the previous page or log out, create an account and use the other functions offered by the website.

-- Resources -- We utilized various resources, including stack overflow and w3schools in order to answer minute syntactical questions that arose during our coding process. Function to determine length of a trip based on the start and end dates was taken from "https://www.htmlgoodies.com/html5/javascript/calculating-the-difference-between-two-dates-in-javascript.html" website. In order to work with google maps api and plot our schools, we read the w3tutorial page to learn how to load and implement a map display. We also read through the google map api documentation on google at the following website url: "https://developers.google.com/maps/documentaton/javscript/tutorial". Overall, we spent approximately 50-60 hours working on this project and hope it helps you plan your next college visit!