search

IkennaEgwim / Wanderwise

Wanderwise is a comprehensive travel guide project aimed at providing users with valuable information about fun places and activities in Birmingham, UK.
4 stars 0 forks source link

readme


Project Logo Project Logo




Wanderwise

Welcome to Wanderwise, your ultimate travel companion for exploring Birmingham and beyond! Wanderwise is a comprehensive online travel guide designed to provide travelers with an unforgettable experience while visiting Birmingham, offering valuable insights, recommendations, and resources to ensure every trip is memorable and stress-free.

Explore the docs »

Table of Contents

SECTION 1: INTRODUCTION
  • About The Project
  • User Experience (UX)
  • User Stories
  • Technology Stack
  • Languages, Frameworks and Libraries
  • Project Management and Development Approach
    • SECTION 2: PROJECT SETUP
  • Prerequisites
  • Installation
    • SECTION 3: PROJECT FEATURES AND STRUCTURE
  • Features
  • Structure and Navigation
  • Wireframes
  • Design and Styling
    1. Design
    2. Color
    3. font
    4. media
    • SECTION 4: TESTING AND VALIDATION
  • Testing
  • Validation
    1. HTML Validator Report
    2. CSS Validator Report
  • User Story Testing
  • Bugs and Issues
    • SECTION 5: DEPLOYMENT AND CREDITS
  • Final Product
  • Credits
    1. Template
    2. Content
    3. Media
  • Acknowledgments
  • Contact
    • #

    SECTION 1: INTRODUCTION

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

    About The Project

    Wanderwise Travel

    Product Screenshot

    User Experience (UX)

    Introducing Wanderwise: Your Gateway to Birmingham Adventures! Wanderwise is more than just a travel guide—it's your passport to exploring Birmingham and unlocking unforgettable experiences. With Wanderwise by your side, you'll embark on a journey of discovery, uncovering hidden gems, and immersing yourself in the vibrant culture of Birmingham and beyond. The uniqueness of this project are: - Visual Exploration: Visualize destinations through high-quality images that showcase the beauty and attractions in Birmingham, inspiring users and igniting their wanderlust. - Seamless Browsing Experience: Enjoy a responsive website layout that is easily navigable on all devices, ensuring a seamless browsing experience whether users are accessing the site from desktops, tablets, or mobile phones. - Personalized Itineraries: Plan custom travel itineraries with customizable options for activities, dining, and accommodations, allowing users to tailor their trips to their preferences and interests for a truly personalized experience. - Family-Friendly Recommendations: Find family-friendly destinations and activities suitable for traveling with children, ensuring that families can plan enjoyable and memorable trips together with ease. - Comprehensive Documentation: Wanderwise provides comprehensive documentation, including the rationale behind the project, key project goals, target audience, design process, and deployment procedure, ensuring transparency and clarity for both users and stakeholders. You can view the deployed website [here](https://path-to-deployed-site.com)

    User Stories

    - As a user, I want to discover popular travel destinations categorized by type so that I can explore places that match my interests and preferences. - As a user, I want to read detailed pages for each destination, providing comprehensive information on attractions, local cuisines, accommodations, and travel tips, so that I can plan my trip effectively and have a memorable experience. - As a user, I want to view high-quality images of each destination, showcasing its beauty and attractions, so that I can visually explore the places and get inspired to visit. - As a user, I want to access a responsive website layout that is easily navigable on all devices, including desktops, tablets, and mobile phones, so that I can browse travel destinations conveniently from anywhere. - As a user, I want to access user-generated content such as reviews and recommendations for destinations, attractions, and accommodations, so that I can make informed decisions and plan my trip with confidence. - As a user, I want to have access to a community forum or discussion board where I can ask questions, share experiences, and connect with other travelers, so that I can engage with like-minded individuals and seek advice and recommendations. - As a user, I want to plan travel itineraries with customizable options for activities, dining, and accommodations, so that I can tailor my trip to my preferences and interests. - As a user, I want to discover hidden gems and local favorites in each destination, recommended by locals or experienced travelers, so that I can explore unique experiences off the beaten path. - As a user, I want to find family-friendly destinations and activities, suitable for traveling with children, so that I can plan enjoyable trips for my family. - As a user, I want to bookmark favorite destinations and attractions for future reference, so that I can easily access them when planning future trips or sharing recommendations with others.

    Technology Stack

    This subsection outlines the technologies, frameworks, libraries, and tools used in the development of this project. It provides insight into the foundational components that power Wanderwise. Add-ons and plugins are captured in the acknowledgements subsection.

    Languages, Frameworks and Libraries

    - 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. - Am I Responsive - Used to check if the site is responsive on different screen sizes. - 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.

    Project Management and Development Approach

    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 8 sessions via Slack (Huddle) platform, ensuring alignment with customer needs and prioritizing features through user story mapping. Product Screenshot **A screenshot or graphic representation of a Slack meeting with team members.** - Vision 2: Responding to change over following a plan: Throughout the project, the team managed ( [![GitHub issues](https://img.shields.io/github/issues-closed/IkennaEgwim/Wanderwise?)](https://github.com/IkennaEgwim/Wanderwise/issues) + [![GitHub issues](https://img.shields.io/github/issues/IkennaEgwim/Wanderwise?)](https://github.com/IkennaEgwim/Wanderwise/issues) ) GitHub issues, adapting to changing requirements and feedback iteratively. **A screenshot of the GitHub project board demonstrates their flexibility.** Product Screenshot - Vision 3: Working software over comprehensive documentation: Achieved 24 story points across 1 sprint, emphasizing the focus on delivering functional software increments. **A snapshot of the scrum/kanban board tracks their progress.** Product Screenshot - Vision 4: Individuals and interactions over processes and tools Description: Daily interactions on GitHub led to **[number of commits]**, fostering collaboration and knowledge sharing among team members. - **A snapshot of GitHub issue discussions illustrates their collaborative environment.** Product Screenshot Twelve Principles of the Agile Manifesto - Satisfy the customer: Held regular stakeholder meetings to ensure alignment with customer needs. - 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 **(frequency of standup) stand-up** meetings to facilitate collaboration and problem-solving. - Face-to-face conversation: Utilized **in-person and/or virtual meetings (select one or all the options)** 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)

    #

    SECTION 2: PROJECT SETUP

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

    Prerequisites

    Wanderwise does not rely on any external dependencies or services.

    (back to top)

    #

    SECTION 3: PROJECT FEATURES AND STRUCTURE

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

    Features

    The key features are: - Navigation: Designed to facilitate users effortlessly access to different sections and pages. - Services: Provides comprehensive information about the services offered by the project. - Testimonials: Showcases testimonials and highlights positive experiences from previous clients, fostering trust and credibility among potential customers. - Gallery: Presents a visually appealing gallery displaying a pictorial representation of Wanderwise, serving as a source of inspiration for clients. - Contact Form: Offers a user-friendly contact form that simplifies the process of reaching out to the team. This will empower clients to submit inquiries, book appointments, or provide feedback seamlessly. - Contact Information: Displays essential contact details of the team 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: - Online Booking: Implementing an online booking system that enables clients to schedule appointments directly through the website, offering convenience and flexibility in selecting desired dates and times for their visits. - ChatBot:: An AI-powered self service system that will guide and direct clients based on their specific needs.

    Structure and Navigation

    - **File Organisation** - The files where structured into folders and clustered based on functionality. Also file naming convention that reflects the functions of the conetent of the file was adopted. - **Header** - "Wanderwise" logo positioned top left - Appears on every page - **Nav bar** - Appears on every page - Navigation bar on the top right. - **Menu items** - Appear on every page - Directs users to specific page - **Footer** - Include social links. - Appears on every page - **Home Page** - _Hero image_ - appears at the top-center of the home page, below the header section. - Our call to action button "lets Go" - provides an easy portal to other specific page of "Wanderwise". - Fun Page - has a dedicated page with a navigation link on both the navbar and one of the call-to-action buttons on the homepage. - Gallery has a dedicated page with a navigation link on the navbar.

    Wireframes

    ### _File Organisation Tree_

    ### _Home Page_

    ### _Services & Prices_

    ### _OurTeam_

    ### _Gallery_

    ### _Contact Us_

    ### _Mobile View - Home Page_

    Design and Styling

    Design

    Given the serene ambiance of the establishment, the website echoes this sentiment through its design. Employing a predominantly white background conveys cleanliness, brightness, and sterility—attributes associated with a tranquil setting. Complementary background hues evoke a sense of calmness, while vibrant and colorful imagery aims to immerse visitors in the **[name of project]** ambiance.

    Color

    - #FFF (White) - We chose this color because the background has many images so we wanted to keep the background from distracting away from the content. - headings and Navbar - #cc6d2e- orange-brown and #000000-Black - They compliment the hero image but are at the same time striking and noticeable. - **h2 headings - #000000-Black this was chosen to compliment the colour scheme - **p - #000000-Black - easy to read and follows the colour scheme of the pages. - **footer - #cc6d2e- orange-brown and #000000-Black - again this matches the header and compliments the colour scheme

    Font

    - main font: sans-serif - Secondary font - Oswald and Exo

    Media

    The main image on the homepage (or hero image) is of a young man and lady taking a selfie outside the main Library, it shows that its the town of Birmingham as the Library has a very recognisable exterior, and it makes a intial impretion they are tourists or visitors. Fun places to visit were chosen as they fit the User story requirements and gave a variety of options for **Plans and Pricing** - short description and reason for selection **Our Team** - short description and reason for selection **Gallery** - short description and reason for selection **Contact Us** - short description and reason for selection **etc** - short description and reason for selection

    (back to top)

    #

    SECTION 4: TESTING AND VALIDATION

    - In this section, the functionalities of the final product was tested and validated to ensure consistency with user stories.

    Testing

    - **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

    Validation

    The W3C Markup Validator and W3C CSS Validator Services were used to check my code for syntax errors in this project. - [HTML](https://validator.w3.org/#validate_by_input)- I checked each page by direct input method on HTML validator site

    - [CSS](https://jigsaw.w3.org/css-validator/)

    - I used Lighthouse tools to test my website

    HTML Validator Report

    - _Warning_ : [details of any warning] - [actions taken to remedy it]. - _Value Error_ : [details of any error] - [actions taken to remedy it].

    CSS Validator Report

    - _Warning_ : [details of any warning] - [actions taken to remedy it]. - _Value Error_ : [details of any error] - [actions taken to remedy it].

    User Story Testing

    - **User Story 1:** [user story here] - [how it was implemented here] (N/B: Use image generated from https://ui.dev/amiresponsive to show the the page in 4 different devices)

    - **User Story 2:** [user story here] - [how it was implemented here] (N/B: Use image generated from https://ui.dev/amiresponsive to show the the page in 4 different devices)

    reapeat for all user stories

    Bugs and Issues

    - Detail any bug and/or issues encountered, steps taken to correct it. Add images if possible.

    (back to top)

    #

    SECTION 5: DEPLOYMENT AND CREDITS

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

    Final Product

    - The product is live and can be seen on **[url of deployed site]** ### _Home Page_

    - Add images of various sections of the final product as above.

    Credits

    Template

    - This template was adopted and adapted from README.md templates published by Ikenna Egwim, Iris Smok and Othneil Drew.

    Content

    - All content was written by [**Your Name**] - Mention sections that was not original and the source where it was adopted from. - I utilized the guidance provided by [Responsive navbar and hamburger menu](https://dev.to/devggaurav/let-s-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript-4gci) to develop the responsive navbar and hamburger menu.

    Media

    - All images were taken from [Shutterstock](https://www.shutterstock.com/home) and [Unsplash photo](https://unsplash.com/)

    Acknowledgments

    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! - [Choose an Open Source License](https://choosealicense.com) - [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet) - [Malven's Flexbox Cheatsheet](https://flexbox.malven.co/) - [Malven's Grid Cheatsheet](https://grid.malven.co/) - [Img Shields](https://shields.io) - [GitHub Pages](https://pages.github.com) - [Font Awesome](https://fontawesome.com) - [React Icons](https://react-icons.github.io/react-icons/search)

    Contact

    Your Name - [@your_twitter](https://twitter.com/your_username) - email@example.com Project Link: [https://github.com/your_username/repo_name](https://github.com/your_username/repo_name)

    (back to top)