This section contains summary information about the project, the user expections and tools used in building this solution.

TravelEase Homepage

TravelEase is a one-stop solution for adventurers, explorers and lovers of nature. It was painstakely designed to do all the hardstuff and erase all gray areas around tourism planning and implementation. We do this so that you can do more fun things.

Some of the unique features of this project are:

• User friendly landing page.
• Clear navigation items and call to action buttons at strategic locations
• Ai-powered travel planner and up-to-date travel time.
• A gallery of hot tourist destination sites to keep users busy and desiring.

Click the link to explore the site: [TravelEase Website](https://scientistigwe.github.io/TravelEase -Website/)

• As a new user of this website, I want to easily navigate my way around the websites with clickable buttons to desired pages.
• As a new user of this website, I want to see top holiday destination areas, so that I can easily decide where to visit.
• As a user, I want to access the Plan and Pricing page easily, so that I can make informed decisions.
• As a user, I want to access the Plan and Pricing page easily, so that I can make informed decisions.
• As a user, I want the Plan and Pricing page to look simple and rich with clarity on each plan and the associated pricing, so that I can compare my options.
• As a user, I want to access the Booking page easily, so that I can make a booking.
• As a user, I want to seamlessly get travel information about my selected destination, so that I can be up-to-date on upcoming trip.
• As a user, I want to see the social media handles, so that I can follow TravelEase on social media.
• As a user, I will like to have a chatbot in the homepage that will answer some questions and help in travel planning/budgeting.

This subsection outlines the technologies, frameworks, libraries, and tools used in the development of this project. It provides insight into the foundational components that powers TravelEase.

• HTML5 - Used for designing the structure of the project.

• CSS3 - Used for styling the project.

• Google Fonts - Provides all of the fonts for this website.

• Font Awesome - Used for the site icons.

• Github - Used to store the project code.

• Gitpod - An IDE Used for coding.

• Balsamiq - Used to create site wireframes.

• Shutterstock and Unsplash photo - Used for all images on the website.

• Google Map Generator - Used to import business location.

• Am I Responsive - Used to check if the site is responsive on different screen sizes.

• IMG2GO and Tiny PNG - Used to help compress the images.

• Free Online HTML Formatter - Used to correct indentation issues and get rid of excess whitespace.

• Bootstrap - Used for building responsive and mobile-first websites and web applications.

• Google Lighthouse - A free Google tool that helps you improve the quality of webpages on your website.

The tool audits your pages for performance, accessibility, SEO, and more. And offers suggestions so you can improve these aspects..

This project was implemented using the Agile Manifesto methodology. Below are the ways this project adhered to the 4 core values and 12 core principles of the aforementioned method:

Four Values of the Agile Manifesto:

• Vision 1: Customer collaboration over contract negotiation: The Team held 16 Hurdles through Slack Platform, ensuring alignment with user needs and prioritizing features through user story mapping.

A screenshot of a one of the team's huddles through slack.

• Vision 2: Responding to change over following a plan: Throughout the project, the team managed + GitHub issues, adapting to changing requirements and feedback iteratively.

• Vision 3: Working software over comprehensive documentation: We achieved 26 story points across 1 sprint, emphasizing the focus on delivering functional software increments.

A screenshot of Kanban Board.

• Vision 4: Individuals and interactions over processes and tools: Daily interactions on GitHub led to 89 commits, fostering collaboration and knowledge sharing among team members.

A screenshot of Github activities ilustrating collaborative environment.

Twelve Principles of the Agile Manifesto

• Satisfy the customer: Held regular meetings to ensure alignment with user stories.
• Deliver working software: Prioritized delivering functional increments in each sprint, allowing for early feedback.
• Welcome changing requirements: Maintained open communication channels and adapted plans iteratively.
• Collaborate daily: Conducted daily standup, catchup and stand-down to facilitate collaboration and problem-solving.
• Face-to-face conversation: Utilized over 15 virtual meetings through slack huddle to enhance clarity and understanding.
• Motivated individuals: Empowered team members through skill development and recognition.
• Measure progress through working product: Evaluated progress based on delivered functionality in each sprint.
• Promote sustainable development: Prioritized sustainability practices to ensure long-term success.
• Simplicity is essential: Used MoSCoW prioritization and focused on MVP delivery to avoid unnecessary complexity.
• Continuous attention to technical excellence: Adopted show and tell technique to ensure all team members learn while collaborating.
• Self-organizing team: Encouraged autonomy and collaboration within the team.
• Regular reflection on continuous improvement: Conducted regular retrospectives to identify areas for improvement.

(back to top)

In this section, a detailed account of all requirements needed for TravelEase to be setup and running. It also includes installation instructions and a link to all necessary documentations for these tools.

TravelEase does not rely on any external dependencies or services.

Below is a guide on how you can clone and adopt this project.

Clone the repo:

(back to top)

This section encompasses the various elements and functionalities aimed at enhancing the user experience and achieving the goals of the TravelEase website. It outlines the key features and structural components intended to provide visitors with a seamless and informative journey through the platform.

The key features are:

• Navigation: Designed to facilitate users effortless access to different sections and pages.

• Discover Places: Provides comprehensive information about the the 3 key destination categories -Mountain side & Nature's beauty; Ocean view & Beaches, and Snowy & Countryside.

• Plan and Pricing: Provides corresponding plans and prices of each plan. The 3 plans offered by TravelEase are standard, gold and platinum.

• Reviews: Showcases testimonials and highlights positive experiences from previous clients, fostering trust and credibility among potential customers.

• Travel Tips and Updates: Presents a tabular representation of travel tips and latest updates, serving as a source of inspiration for clients.

• Contact Us Form: Offers a user-friendly contact form that simplifies the process of reaching out to the team. This will empower clients to submit inquiries or provide feedback seamlessly.

• The Team: Displays essential contact details of the team members prominently on the website, ensuring users can easily reach out to the establishment via phone, email, or physical address.

• Social Links: Includes links to the company's social media profiles, enabling users to stay connected and updated with the latest news, promotions, and announcements.

• Responsive Design: Ensures that the website is accessible and functional across various devices and screen sizes, providing a consistent user experience.

• Interactive Elements: Incorporates interactive elements such as buttons, sliders, and hover effects to enhance user engagement and interactivity, making the browsing experience more enjoyable and intuitive.

• Other features to be implemented in the future include:

• Carousel button slider: A slider with a javascript listener that will capture a button click and update the carousel accordingly.

• ChatBot:: An AI-powered self service system that will guide and direct clients based on their specific needs.

• File Organisation

  • The files where structured into folders and clustered based on functionality. Also file naming convention that reflects the functions of the content was adopted.

• Header

  • TravelEase logo positioned left
  • Appears on every page

• Nav bar

  • Appers on every page
  • Navigation bar on the right

• Menu items

  • Appers on every page
  • Directs users to specific page

• Footer

  • Includes links to all social media platforms through the use of icons and text.
  • Appears on every page

• Home Page

  • Background Image - appears on every page and spans accros the full viewport of everydevice. It has the touch of skyblue colour which illustrates calmness and serenity.
  • Hero details - appears at the top-center of the home page, below the header section and intuitive enough to catch a user's attention.
  • Testimonials - just below the hero image section, responsively arranged to maximize various device screen width and give users a good experience.
  • Call to action buttons - provides an easy portal to booking and other pages.

• Plan and Pricing - has a dedicated page with a navigation link on the navbar of every page.

• Meet the Team - Meet the Team is the 4th section in the homepage with a flip-like property which when hovered-over, reveals the details of each team member and a hyper reference link to their profile attached to each of their names.

Given the serene ambiance of the establishment, the website echoes this sentiment through its design. Employing a predominantly skyblue background conveys cleanliness, brightness, and sterility—attributes associated with a such setting.

• Background - Skyblue Image (#87CEEB): This color was selected because it conveys a sense of tranquility and openness, aligning with the theme of travel and exploration. The light blue hue evokes feelings of calmness and serenity, which are often associated with leisure and vacation.

• Navigation menu items - Light Gray (#f5f5f5): Light gray provides a neutral and calming backdrop for the content, ensuring readability and visual comfort for users.

• h1 - h6, p - Black (#000000) - Black text on an off-white text background offers high contrast against the skyblue background, ensuring readability and accessibility for users

• footer - [default] - we have kept most of our text the same default black colour because it matches well with the rest of the site, providing a solid contrast with the background, and causing no issues.

• main font: Montserrat - We have chosen Montserrat because it is a font-style that is widely available within most, if not all, browsers and the font maintains a professional style.
• Secondary font - sans-serif

Background image - a mix of an iceberg / sky background that features lighter colours. Lighter colours are generally viewed as more positive, and we want our customers to associate our site with positivity, whether that be through colours or otherwise.

Contact section - Our contact button is simply located in the top left of our page to ensure that it is abundantly clear to our customers that we are easy to contact. The page itself is currently work in progress.

Plans and Pricing - This is one of the menu items located second from right. It has a link pointing to plans and ricing page.

(back to top)

• Browser Compatibility Testing: Ensured compatibility with Chrome, Opera, Microsoft Edge, and Firefox desktop browsers.

• Responsiveness Testing: Utilized Chrome Developer Tools to verify responsiveness across multiple devices: Desktop, Laptop, Moto G4, Galaxy S5, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPad, iPad Pro, Galaxy Fold

The W3C Markup Validator and W3C CSS Validator Services were used to check my code for syntax errors in this project.

• HTML W3C Validator: I checked each page by direct input method on HTML validator site.

• CSS W3C Validator: I checked each page by direct input method on HTML validator site. No error or warning message was encountered following this test.

• Google Lighthouse: I used Google Lighthouse Dev Tool to test the website's performance, accessibility, best practices and SEO on both mobile and desktop devices.

• The error and warning messages were corrected and re-tested to ensure full compartibility with HTML best practices. Some of the errors and warning meassages were:

• Warning : Section lacks heading (from line 32, column 9 of index.html)

• Value Error Stray end tag - div (from line 258, column 13 of index.html)

• No error or warning message was encountered following this test.

• Reviews Section Carousel #7 "As a user, I want a carousel with controls, and a review cards containing sample text."

  • We created a page called reviews.html and included a link to it at the navigation bar with a hover effect to make it visible to the user. Also, a card was used to display the it in section 1 of the homepage with a call to action button to the page.

  

• Booking #17: "As a user, I want to access the Booking page easily, so that I can make a booking."

  • We created a page called booking.html, and made the booking button visible at the top of the page. We also added multiple CTA buttons to make booking even easier.

  

• Creation of "Discover Places" page #23: As a user, I want to see a dedicated page for popular places and contents with action button to get details.

  • We created a page called discover-places.html and included a link to it at the navigation bar with a hover effect to make it visible to the user. Also, a card was used to display the 3 key destinations in section 2 of the homepage with a call to action button to each category.

  

• Creation of Contact us page #72: As a user, I want to see a page where I can reach out to the team for further information.

  • We created a page called contact-us.html and included a link to it at the navigation bar with a hover effect to make it visible to the user.

    

  Bugs and Issues

• Ensuring Quality in Software Development #36: As a developer, I want to ensure that my code meets the highest standards of quality and reliability, so that I can deliver robust and error-free software to our users.

  • We encountered a broken link in the homepage after deployment. This issue was traced and amended.

(back to top)

-In this section, the tested and validated product will be deployed and external resources used during this exercise will be mentioned.

• The product is live and can be seen on (https://scientistigwe.github.io/TravelEase-Website/index.html)

• This project was presented to a panel that was setup to review and grade this exercise. You can fine the presentation slide here: Presentation Slide

• This readme template was adopted and adapted from README.md templates published by Chibueze C. Igwe, Iris Smok and Othneil Drew.

• All content was written by [Chibueze C. Igwe, Henry Egedegbe and Andy Ancans]

Use this space to list individuals, groups or resources you find helpful and would like to give credit to. I've included a few of my favorites to kick things off!

• GitHub Emoji Cheat Sheet
• GitHub Pages
• Font Awesome

• Chibueze C. Igwe - Email Address; Profile link

• Andy Ancans - Email Address; Profile link

• Henry Egedegbe - Email Address; Profile link

• Project Link: https://github.com/your_username/repo_name

(back to top)