Venture South is a tourist website for anyone willing to tour the southern part of Africa. The website shows the user rows of cards that are each linked to a secific page. Each card either shows one of the cities, beaches or national parks, and the corresponding page uses the Google Maps Places API to diplay the coordinates of the place and displays surrounding key areas for the user to see.

This website is designed for tourists or as a navigation tool for users at one of the destinations provided on the website to see what other nearby attractions, hotels, beaches etc that they can explore within those areas. The website allows users to do this by using either the navigation bar at the top to get directed straight to their desired type of destination or by allowing the user to explore the different types of destinations by scrolling down the home page and having a look at 4 of each type.

• A new user will want know what the website is about, the image reel with slogans give the user an insight of what the web page is about including the welcome section with a breif overview.
• User in Angola for example would like to know what beaches they can go to and the surrounding hotels for a place to stay in, or a resturant to eat within that area. They can acheve this by visiting the beaches or cities page and viewing what hotels, resturants etc Angola can provide once set on a destination.
• The user may want to view different destinations at once without losing the information on the previous page hence why each destionation has a target to a new tab.
• Tourist looking for national parks and safaries in any given country can view the national parks page and use the more/less buttons and the accordion to look through the different types in each country.
• A tourist trekking in national parks would like to know where the camps are located in the national park and they can do this on the destination page.

• View the different beaches, by clicking on the beaches link and filtering by counrty.
• View the different cities, by clicking on the cities link and filtering by counrty.
• View the different national parks, by clicking on the national parks link and filtering by counrty.
• View nearby destinations or key areas by clicking on the buttons above the map some are preloaded for the user.
• Its easier for the user to distinguish the destination from the search results with the blue google maps icon.

• GPS location between users and destionation or key areas surrounding the destination.
• More links to different destinations
• When hotels are loaded a value of how much that hotel would cost per night on that day and time.
• Ability for the user to book/reserve for safaries, hotels and resturants.
• Ability for the user to leave a review on the visit.

• Jquery
  • Used to manpulate the DOM for the purpose of making the buttons and icons more interactive when clicked.
• Google Maps API
  • Used to load and generate the map for each destination and search via keyword for nearby areas.
• Javascript
  • To create the custom slider for the home page.
• Bootstrap 4.1.3
  • Used to create the layout and edited the SCSS variables for custom color themes.

• Home Page

  • Test to see if image reel works

    • Loaded page on Safari and reel still works
    • Checked on desktop, laptop and mobile width screens and it works as expected.
    • Loaded page on Firefox and reel still works
    • Checked on desktop, laptop and mobile width screens and it works as expected.
    • Loaded page on Chrome and reel still works
    • Checked on desktop, laptop and mobile width screens and it works as expected.

  • Chrome, Safari, Firefox

    1. All nav links clicked and they work as expected
    2. Clicked beaches header and it takes me to the beaches page
    3. Clicked cities header and it takes me to the cities page
    4. Clicked national parks header and it takes me to the national parks page
    5. Clicked each card link and it opens a new tab as expected.
    6. Buttons lead to the corresponding section pages.

• Beaches Page

  • Chrome, Safari, Firefox
    1. Clicked the beaches link on all browers and it loads.
    2. Clicked each card link button and it opens a new tab as expected.
    3. Clicked each button on the destination page and they all work.
    4. Clicked more/less buttons on the page each works as expected with accordion effect.
    5. Clicked the country heading and accordion effect is present with icon changing direction.
    6. Each navigation link takes you to the corresponding page.

• Cities Page

  • Chrome, Safari, Firefox
    1. Clicked the cities link on all browers and it loads.
    2. Clicked each card link button and it opens a new tab as expected.
    3. Clicked each button on the destination page and they all work.
    4. Clicked more/less buttons on the page each works as expected with accordion effect.
    5. Clicked the country heading and accordion effect is present with icon changing direction.
    6. Each navigation link takes you to the corresponding page.

• National Parks Page

  • Chrome, Safari, Firefox
    1. Clicked the national parks link on all browers and it loads.
    2. Clicked each card link button and it opens a new tab as expected.
    3. Clicked each button on the destination page and they all work.
    4. Checked to see if each destination page without buttons loads with camps on the map.
    5. Clicked more/less buttons on the page each works as expected with accordion effect.
    6. Clicked the country heading and accordion effect is present with icon changing direction.
    7. Each navigation link takes you to the corresponding page.

• During the creation of the places.js file the testing was done in the console to make sure that the desired/expected results where present.

  • for example on line 61 that test was initiated to make sure that the correct destId was loaded when the page is loaded.
  • on line 105 a test was initiated to make sure that the init function was being called with the specific destination and map_type.

Venture South works the same on each browser this could be due to the fact that I have used the latest verstion of boostrap making it behave similar in different environments.

• When using the API to search via keywords it sometimes returns some unexpected results, not only that but when using keywords that should have an expected result like cities sometimes it dosent return any cities at all.

To deploy the web site from Cloud 9 workspace to Github pages I used the following commands in sequence.

* git init - which creates a new Git repository.
* git status - to see which files have been updated on Cloud 9.
* git add - to add the updated files to the staging area.
* git commit -m "actions taken" - to commit the files to the local repository.
* git remote add origin https://github.com/Harrysibbenga/VentureSouth.git - specifies which remote repository commants will be used in.
* git push -u origin master - to push the commits made on local branch to the Github remote repository.

Once that was done it was simple to publish the website on the settings in the repository, by selecting the master branch as the source for Github Pages.

Published at : https://harrysibbenga.github.io/VentureSouth/

• Nxai Pan National Park
• Moremi
• Mokolodi National Park
• Kalahari National Park
• Mupa National Park
• Kissama National Park
• Iona National Park
• Cameia National Park
• Bicuar National Park
• Limpopo National Park
• Niassa Reserve
• Quirimbas National Park
• Gorongosa National Park
• Serengeti National Park
• Chobe National Park
• Zambezi National Park
• Hawange National Park

• Lugela
• Island of Mozambique
• Tofo
• Pemba
• Bazaruto Archipelago
• Maputo
• Selebi-Phikwe
• Maun
• Francistown
• Namibe
• Luanda
• Lubango
• Lobito
• Huambo
• Benguela
• Lusaka
• Cape Town
• Windhoek City
• Gabarone City

• Ponta Mamoli
• Pangane
• Praia Morena
• Porto Amboim
• Mussulo
• Vilankulo
• Ponta do Ouro
• Luanda
• Camps Bay
• Inhaca Island
• Cabo Ledo
• Paradise Beach

• Pavilion
• Savanna
• Victoria Falls
• Okavango

• Google Maps Icon

• Nxai Pan National Park
• Moremi National Park
• Mokolodi National Park
• Kalahari National Park
• Mupa National Park
• Kissama National Park
• Iona National Park
• Cameia National Park
• Bicuar National Park
• Limpopo National Park
• Niassa Reserve
• Quirimbas National Park
• Gorongosa National Park
• Serengeti National Park
• Chobe National Park
• Zambezi National Park
• Hawange National Park

• Lugela
• Island of Mozambique
• Tofo
• Pemba
• Bazaruto Archipelago
• Maputo
• Selebi-Phikwe
• Maun
• Francistown
• Namibe
• Luanda
• Lubango
• Lobito
• Huambo
• Benguela
• Lusaka
• Cape Town
• Windhoek City
• Gabarone City

• Ponta Mamoli
• Pangane
• Praia Morena
• Porto Amboim
• Mussulo
• Vilankulo
• Ponta do Ouro
• Luanda
• Camps Bay
• Inhaca Island
• Cabo Ledo
• Paradise Beach

• I received insperation for this project when I went to Zambia for a holiday and realised that there were so many attractions I could have seen and been to if only I had an app or website that would show me the nearest attactions with places to stay and eat within a certain area. So I wanted to build one myself not just for Zambia but the surrounding countrys aswell.