Is a leisure travel platform for holiday safari bookings in Kenya.

1.Who we are

2.Approach

3.Objectives

4.Approaches

5.Project goals

6.UX

7.Feature or the website designs

8.User stories

9.Wireframes

10.Technology

11.Troubleshooting

12.Deployment

13.Testing

14.Credits

15.Acknowledgement

• We are a privately owned travel agency company that does personalised safari travel packages in Kenya.
• The project Strategy and Intent is to personalise the tours according to the clients desires.
• Guiding Principles is the brand to connect with the communities back in Kenya in both historical and cultural values.
• The Functionality and Subjectibility by providing the feel and look for clarity of the safaris in Kenya that will satisfy the need of the customer.

a) Properties b) Linear properties c) The ease in and ease out of the pages to be visible and easy to navigate through the pages and to have a smoth transition in and ou of the pages.

• An experienced mapping.
• Collabotration packed with data
• Time intense
• Reliable data *

• is to implement features that will enable the client to select different options in the travel platforms.
• Updating the products and services of travel packages
• Share and innovating producyts and services.

• Enabling the websiteto have current travel designs and product services that are customer friendly and easily access of the webpage

• Typography that has a good feel and friendly to clients.

• Enabling features that will sell the product and services. Making it easy to convey the story to the client.

• Developers and Business Goals- Easy access of the website. The art and design /visual designers and data collection that used to create the website.

• Images

• Contents

• Social pages

• Social links

• Mapping

• Emailing process

• Booking forms

  • Code used CSS HTML Javascript and Jquery
  • Landing page with a page drop image container.
  • cards
  • Images
  • Table
  • feildset
  • Controlgroup
  • Social links
  • Font awesome icons
  • Materialised link - I was inspired by the look and feel of the Link that made the site look better feel about it.
  • Bootstrap snippets that enabled meto have different designs
  • CDNJS site enabled me to get the tags and JS scripts that are used to create the website.
  • Jquery CDN uncompressed min script
  • Leaflet link and tags for js google mapping
  • Emailjs used for the interactive email

• The Navigation bar was not easily accessible . I have to try diffent designs that will anablethe client to press the home button to access other pages.
• The packages had no value , soi added up the value and uploaded images to show the product.
• The carousel in the gallery page was not working so i decided to have static images all in one page.
• The client asked to have different options of products . I added in the safari packages and different locations of the Safaris, and activities that can be done during the holidays.
• The reservation page had a lot of information icons that made the page look messy . I ended up reducing the content and be short ad precise of the contents.

• Web Design. I did a lot of reserch in youtube and i was inspired by three main developres
  • Sayar flight booking example

The xascapade wireframe is create using balsamic and downloaded it in the ide platform under documents as a pdf. Below is a Multiple devices Mockup generator image that shows you how the landing page looks in different devices. The Mockup generator page of Xascapade Travel.

• Githubgithub used for storying and accessing data.
• Gitpodgitpod IDE platform for creating website.
• While doing my reasearch i came across materializes platform.This site inspired me by the endlook and feel of the website, It resonates with a suitable ux friendly look and feel that embodies a lot of the features.
• Used w3school for snippets. I am inspire withthe look and feel of the navigation bar, and inputs examples in the w3school page.
• Youtube tutorial
• Multiple device mockup genarator. I sed this site to create a mockup image of the websites landing page. Thissight can be accessed in google webpage. once you access the page you will need to copy your deployed link to the in the multiple device generator that is on the top left top nav. Then click the genarator button to genarate the image of the website.
• Google Mapping - used (Map Quest)[https://developer.mapquest.com/documentation/tools/latitude-longitude-finder/]. To find accurate locations. But unfortunatly it was not responding . I trie the Leaflet mapping.
• Emailjs - I created an accout with Google emailjs that will enable the emails to be interactive.
• I created the 404v folder to direct error responses.that will collect data from error messages.
• There were different tuturial that i watched in youtube. Below are a few that reall inspired byhthe style and design of the page.
• ECMA scripts reasearch page

• During my reasearch i came across a youtube tutorial that was talking about Materialize platform (Materialise)[https://materializecss.com/media.html]for creating websites and snippets by (Traversy Media)[https://www.youtube.com/watch?v=MaP3vO-vEsg]. I used the tutorial to create the index page . I aslo used snippets from -W3school, Bootstrap, and Materialisecss, that helped me to come up with different designs of the webpage.

[https://www.youtube.com/watch?v=Zxf1mnP5zcw]

• I also added Adam live server to checking live open source for the pages while coding
• Using console to rectify the 404 Error
• youtube tutorial hamberger menu (web dev simplified)[https://www.youtube.com/watch?v=At4B7A4GOPg].(Better dev)[https://www.youtube.com/watch?v=_Ue9_rLIMAQ] [https://www.youtube.com/watch?v=uZNWak44SI8]

• Decide to change the li element to lo because the ux appearance was not suitable to the and user friendly 6 Testing
• While i was updating the git status i entered a git commit that change the changes that i had made . Resulted into doing a git reset command to using the SHA number f68f166.
• The navigation bar is glitching the dropdown links are not visible in the mobile devise. I decided to change and delete the dropdown in the navigation bar and decided to add a button that has etra pages.
• I encountered problems with the sidenav. Some of the content were not visible so i decided to change the design and use the navigation button that is displayed in w3school site.
• The navigation link was not working on small devices . I decided to use the button (xascapade) that has a collapsible id when clicked, to access the menu bar.
• My google maps was not responsive , . With 404 and uncoaught syntax error. where i was able to get intouch with the support team and we managed to fix the bug.
• Email js was not responsive as well. The support team help me find where the problem was and tried to fix it.

I deployed the page in Github page under settings. Scroll down to the Github pages. Select the main-branch under the source. Once selected clickthe save button. A link will be enabled,once you receive the link you select it copy the link on your search engine. This will lead you to your public page. Ad that is how you deploy your repository to a public site.

The site was deployed in github and i shared the link to family and other users through whats app platform that made it easier to access the links on their phones. I also shared the using emailing process for desktop users and other devices as ipads,tablets, etc.

• The lighthouse test results of the pge was as follows, Performances is at 72, Accessibility at 82, Best performance at 86 and the SEO at 92. as it shows in the attached pdf.

I) Media * Google search free comercialised images*\ II) (unsplashed)[https://unsplash.com/] III) Pixabay

I. Photographers

• Image by Christine Sponchia from Pixabay

• Image by Kirsi Kataniemi from Pixabay

• Image by PatternPictures from Pixabay

• Image by Herbert Aust from Pixabay

• Image by Michael Siebert from Pixabay

• Image by ArtTower from Pixabay

• Image by Jakub Petrymusz from Pixabay

• Image by Christo Ras from Pixabay

• Image by Sofie Zbořilová from Pixabay

• Image by bottlein from Pixabay

• Image by Tati Halabi from Pixabay

• Image by Angie Göttling from Pixabay

• Image by James Wheeler from Pixabay

• Photo by Kensuke Saito Surf Photography on Unsplash

• Photo by Yuriy MLCN on Unsplash

• Photo by Joshua Earle on Unsplash

• Photo by redcharlie on Unsplash

• Photo by Ron Ansell on Unsplash

• Photo by Pop & Zebra on Unsplash

• Photo by Uriel Soberanes on Unsplash

• Photo by jean wimmerlin on Unsplash

• Photo by Emma Louisa on Unsplash

• Photo by Filios Sazeides on Unsplash

• Photo by Rio Lecatompessy on Unsplash

• Photo by Matthieu Pétiard on Unsplash

• Photo by David Clode on Unsplash

• Photo by Louis Hansel @shotsoflouis

• I was inspired by the followimng youtube tutorials by (DevEd)[https:////www.youtube.com/watch?v=8x1mO1d6-4w] , (Traversy Media)[https://www.youtube.com/watch?v=MaP3vO-vEsg],

• Easy tutorila

• [Github]community platform

• Sayar

• Code Insitute student care for the support and responding to my calls and chat messages.
• Google search and wikipedia sites for some of the Contents used in the site.
• Stack Overflow website that i used to access information when i got stack.
• W3school, Bootstrap, Materialised, platform.
• I was inspared by this developers . I did most of my reserach but was not easy to understad how to do travel bookings and i came across this developer https://res.perfectibe.com/scripts/pibe.js // to guide me through my project.

I would like to thank

• My mentor Can Sucullu For all the advise and encouraging me to keep on striving and challenging me to do better.
• The code institute slack community for the other set of eyes and responding to my queries.
• The Code Institute lectures, developers and the team behind the code institute platform .
• gitpod ide platform.
• stackoverflow platform. I used to access coding problem solving when i got stack.