European Breaks

This website is an Interactive Frontend site. It responds fully to user action and allows them to engage with data for 15 Countries and to alter the site display according to their needs.

The user journey is intended to be intuitive and seamless. I have created a single page architecture as follows:

i. Navigation Bar.
ii. Inviting Cover Image with Call To Action Button.
iii. Country Information Section.
iv. City Attractions Map Section.
v. Carbon Footprint Calculator Section.

UX

This site is designed Mobile First and is responsive on all devices. Full UX information is contained in the UX document stored in the document section of this Github Repository.

Features

Existing Features:

This site is developed with the following features:

• Country Search: Selecting the "Let's Get Started" button brings the user to the Countries Section. At this point the user is provided with a list of 15 Countries. When the user selects a country they are provided with 3 distinct information sources (Country Information, Recent Tourism Articles and Pictures of the Country).

• City Search: Selecting "Cities" allows the user to explore what the destination has to offer. The user selects the Country they are interested in visiting and then types in a City. Once they have completed this step they can select an attraction (Hotels, Museums or Restaurants) by pressing the associated button. The Map then populates the chosen attraction for that City. The user can change City by pressing the "Change City" button. The City autocomplete is restored to placeholder text and the user can either choose a new Country and City or a different City in the previously selected Country.

• Carbon Footprint Calculator: In recent times, Travellers have become increasingly aware of the environmental effects of Aviation. To address this, the user can utilise a Carbon Footprint Calculator which is embedded on the site. When viewing on a Mobile Device the user is presented with explanatory text and a link to visit a Third-Party site to complete this step.

Features left to implement:

This website has numerous further development options, which can be scoped for future releases.

• Additional Countries can be added to the Countries and Cities sections. In theory "European Breaks" could be repurposed as "Global Breaks".

• Weather Forecast: Upcoming weather data for the chosen City can be integrated to assist the user in making "last-minute" trip decisions.

• Booking Options: Integration with a Third Party Travel partner API can be implemented to allow the user to have a full booking experience on the site.

Technologies Used

This website is constructed using Visual Studio Code. The programming languages utilized are HTML, CSS and Javascript (complemeted with jQuery and Bootstrap). I used Balsamiq for Wireframes and Adobe Color Wheel for Colour Scheme. Various APIs are also utilized and are listed in the Credits section.

Testing

Extensive UAT (User Acceptance Testing) has been conducted and is stored in the document section of this Github Repository. .

Deployment

The site is available here.

Credits

Content & Acknowledgments:

• The Navbar is a customised version of the Navbar example here.
• The Cover image section is inspired by this tutorial.
• The Countries section utilises Rest Countries, New York Times and Pixabay APIs.
• The Cities and Map section utilises the Google Maps and Places library API. I sought inspiration from the Hotel Search example and both customized and expanded on the code example for further features and countries.

• The Carbon Footprint section contains an embedded calculator from this site.

• All API keys are free and non-proprietary. My Google Maps API key is protected and limited to usage on this site.