This is a Readme.MD file generated for my second milestone project through the code institute!

The Trip Starter travel application uses the Google Maps and Places APIs to allow users to select a location and find places to visit, stay and dine. Users may then select their own custom itinerary to help coordinate a trip. They may then continue to edit this itinerary to help plan their perfect trip.

1. UX

   • Project Goals
   • User Goals
   • User Stories
   • Design Choices

2. Features

   • Existing Features
   • Features Left to Implement

3. Technologies

4. Testing

5. Deployment

   • How to Run Code Locally

6. Credits

   • Content
   • Media
   • Acknowledgements

   UX

The desired target market/audience for this app is for tarvelers old or young looking at exploring the world and finding the perfect destination using the trip starter app.

user goals:

• to find the perfect destination and add it to the itinerary
• feel at ease with the selection made with the relevant options that appeared.

Trip Starter provides the neccesary functions to deliver the needs and wants of a traveller

• by adding relevant searches ie. restaurants and bars hotels and bnbs.
• It makes use of google maps to enable a sense of organised planning

My goal was to create a site that allows users to plan and document there travel itinerary inorder to achieve a unique and positive user experience. As a user of the site I want to:

1. to select a destination and have a look at the relevent bars, hotels and tourist destinations.
2. create a list to keep my plans neat and tidy.

I like the idea of a minimalist approach where by users can enter a site without feeling overwhelmed ny the extensive use of flashy colors and hard on the eye graphics. I want to create a clear and positive user experience.

fonts

• The Cinzel serif font was chosen to create a simple yet effective way of displaying text throughout the project it has a clean easy to look at feel.

icons

• I made use of the large array of icons that font-awesome has to provide its a simple way of creating an effect to show what the site has to offer.
• i made use of the, Fork, Wine glass, Ship, Swimming pool & umbrella icons which i though was an effective way to show users that our site offers the relevent services.

colors

• Throughout the majority of my project i have made use of dark grey colors to give a sense of ease on the users eyes

styling

• I opted for a basic navbar with three links to ensure the user does not get lost with too many options to venture off from.
• The background Image is of an aerial view of a city night sky with an Opaque overlay to reduce the intensity of the sharp city lights, I felt that it gives off a feeling or relaxtaion and calmness to the user when landing upon the page.
• I have made use of the boostrap grid system to create a less complex approach to relaying my content with in the site.

logo

• I once again obtained the logo as a font-awesome icon to ensure simplicity.
• I chose an aeroplane as i felt it suited the needs of a travel app within the right context.

-The app uses the Google Maps and Google Places API to provide search results about accommodation, places of interest and places to eat. Each individual result may be added to a list below the map so user's can keep track of the places they wish to visit, stay or dine.

-In the future, I would like users to be able to save the pdf file and share it through social media to enable friends and family to have a look at the itinerary for future purposes.

• This project uses HTML, CSS and JavaScript programming languages.

• JQuery

  • The project uses JQuery to simplify DOM manipulation.

• Visual Studio Code

  • Developer used VS Code for their IDE while building the website.

• Bootstrap

  • The project uses Bootstrap to simplify the structure of the website and make the website responsive easily.
  • The project also uses Bootstrap to provide icons from FontAwesome

• GitHub

  • This project uses GitHub to store and share all project code remotely.

• Unsplash

  • The background image used at the top of the app was found on unsplash, a stock image library.

• Google Fonts

  • The project uses Google fonts to style the website fonts.

• Google Maps

  • The app uses the Google Maps API and associated code to generate a map object in the app.

• Google Places

  • The app uses the Google Places API to provide location information to the user when they are using the map.

• Compressjpeg

  • The Compressjpeg site was reduced to reduce the file size of the background-image used at the top of the app.

• Autoprefixer

  • The Autoprefixer was used to to make sure css had all prefixes necessary to work across all browsers.

• HTML Color Picker

  • The w3schools.com HTML Color Picker was used to help find colours for the app.

  Deployment

The site was built using Visual Studio Code, added, commited and pushed to GitHub using the terminal. A live version of the site is hosted on GitHub pages.

In order to run a repository locally, the repository must be cloned. To clone the repository :

1. Follow the link to the interactive front end development project GitHub repository.
2. Under the repository name, click "Clone or download".
3. In the Clone with HTTPs section, copy the clone URL for the repository.
4. In your preferred IDE, open the terminal.
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

git clone https://github.com/USERNAME/REPOSITORY

7. Press Enter. Your local clone will be created.

Further reading and troubleshooting on how to clone a repository from GitHub may be found here.

-## Automated Testing

The following validation services and linter were used to check the validity of the website code.

• W3C Markup Validation was used to validate HTML.
• W3C CSS validation was used to validate CSS.
• JSHint was used to validate JavaScript.

Below is a detailed account of all the manual testing that has been done to confirm all areas of the site work as expected.

All steps on desktop were repeated in browsers: Firefox, Chrome and Internet Explorer and on two different desktop screen sizes.

1. Responsiveness
   • The results table sits alongside the map on larger devices as PC and laptop.

All steps below were repeated to test mobile specific elements on the developers 2 Samsung phones and tablet. And also in the Chrome Developer Tools device simulators on all options and orientations.

1. Responsiveness
   • The results table is hidden and appears directly under the map only when the user selects the visit, stay or dine buttons.

This site was tested across multiple browsers (Chrome, Safari, Internet Explorer, FireFox) in Google Dev tools(Galaxy S5, Pixel 2/Pixel 2 XL, iphone 5/SE/6/7/8 Plus, X, ipad and ipad Pro) and on multiple devices.

Family and friends were asked to try the app on their devices. This insight was invaluable for improving site usability.

• All Content was written by me.

All media was obtained through Unsplash unsplash.com The Travel video was obtained through Youtube and placed into the footer to allow users to get a feel for travel.youtube.com

Thank you to friends and family for testing the app and for the guidance provided by Slack.