- Visit the site here
Cape Wine is a travel site which encourages both local and international Cape Winelands visitors to discover new places. This site makes use of the Google Maps API to allow wine lovers to filter by drinking or wine tasting, wine farm restaurants and places to stay for a few nights in the Cape Winelands. The Cape Winelands is one of the most beautiful areas in South Africa, with the rugged mountains, and practically untouched countryside. The aim of this site is to show users the options available to locals and tourists when visiting the Cape Winelands
- As a user, I want to be able to learn more about the Cape Winelands
- As a user, I want to be able to discover where would be a nice place to drink wine, eat food and stay.
- As a user, I want to be able to contact the site owner if I need more information.
- As a user, I want to be able to easily see a list of options in a table and find out more information on these places located in the Cape Winelands
- As a user, I expect to be able to access the website from any device.
- As a user I expect any information on the website to be displayed in a clear & concise way
- As a user, I expect to find information on the website quickly and effectively.
- As a user, I expect to be able to find out more information about the company.
- As a user, I expect to be able to read reviews from customers.
- As a user, I expect to be able to get in contact with the site owner for any reason
- As a user, I expect to be able to gain additional information on this site owner
My goal of this site is to create a simple, visually appealing website to help travel lovers discover the hidden gems of South Africa by utilising the Google Maps API and Google Maps Documentation.
To provide potential customers with information on hotels, restaurants and bars to visit in South Africa, more specially focused on the Cape Winelands
The main structure of this website involves three main sections, the ‘Landing page’, the ‘About Us’ section and the ‘Discovery’ section.
The navbar appears and is fixed when the user opens the landing page. The landing image is a beautiful picture, creating a smooth experience for each user. Users can click on the downward arrows, prompting the user to go to the next section, The scroll is smooth using the scroll-behavior: smooth command CSS. On smaller screens, the navbar collapses using Bootstrap. When that icon is clicked, a dropdown menu with text is opened, allowing the user to easily navigate through the site.
The images contain the Bootstrap img-thumbnail class to ensure both responsiveness.
To ensure easy usability, I created buttons for the user to press to filter which activity they would like to know more about.
When a user searches for an activity and city, then a table appears with a list of all activities in the area selected.
The map automatically zooms into the selected city. If a city is not selected and a filter is, then it will drop pins by default to the centre of the country.
This website is structured over one page, using Google Maps API.
The page is split into three core sections.
These are the wireframes, which include both the desktop and mobile view for each section.
The colour scheme for this project is minimalistic. I was hoping to create a good link between the landing page and the color scheme throughout the page to keep the page attractive.
The colours used were:
I used a really handy tool created by Canva to generate the color scheme.
The site makes use of two key fonts :
- Montserrat
- Monospace
This is the first section a user sees upon coming onto the pages. Users are presented with a landing image the size of the screen and downward arrows, when clicking will bring them to the ‘About Us’ section.
- This section gives a breakdown of the site owners experience with the Cape Winelands and why the page came to exist.
- It shares their story and passion for the Cape Wineland, as well as a small amount of information about the Winelands.
- The section is split into two cards, with a background image each and overlay text. Each card has a title
- This section has three core components.
- Search field with a user input field that has an autocomplete generated by Google, allowing users to filter their city search. Limited within South Africa.
- Filters. Three buttons filtering by places to drink, eat and sleep. The buttons change color when clicked to help the user navigate the filtering section
- Results table which displays a list generated by Google to help name the recommendations to the user
- Google Maps image with markers on the filters activity.
- When the user clicks on the markers, more information about the place will appear.
- This section is split into two components.
- A summary of the site owners contact information, including their email address, telephone number and physical address.
- A contact form which the user can fill out to leave the site owner a message.
- A simple footer where the user can connect to the site owner via social media. The user can follow the links to the Facebook, Twitter and Instagram accounts to keep updated on more current news and blogpost done by the site owner.
- To sort the recommendations by star rating on the results table, sorting from highest to lowest ratings.
- Upload section where users can upload their own images of their discoveries around the Cape Winelands.
- A more interactive contact section by implementing sending emails with JavaScript.
- More interactivity on the map - allow user to customize their results with a wishlist and more specific filters.
- HTML
- CSS
- Javascript
- JQuery
- Bootstrap
- Font Awesome
- Google Fonts
- HTML Validator
- CSS Validator
- JShint
- Testing with Chrome DevTools
- Learned from W3schools and Stack Overflow
- Google Maps API place documentation
Manual tests were conducted throughout the creation of this site.
- HTML
- W3C HTML Validator:
- Document checking on HTML. Four total errors showing
- Stray DOCTYPE which was interesting that it was overlooked throughout the development process.
- 3 errors stating that “Attribute btn-block not allowed on element button at this point.” Corrected and committed in two separate commits.
- A second test was conducted in the same HTML validator to confirm no errors.
- Document checking on HTML. Four total errors showing
- W3C HTML Validator:
- CSS
- W3C CSS Validator:
- The W3C Validator displayed no errors or warnings to show.
- W3C CSS Validator:
- JavaScript
- JShint
- There are 16 functions in this file.
- Function with the largest signature takes 2 arguments, while the median is 0.
- Largest function has 25 statements in it, while the median is 2.5.
- The most complex function has a cyclomatic complexity value of 7 while the median is 1.
- One undefined variable
- One unused variable
- initMap
- JShint
- During the development process I consistently checked Chrome DevTools to test during section construction.
During the process I encountered an ApiTargetBlockedMapError in the console. This was rectified by adding ‘places&libraries’ to the end of the API KEY to include the Places API.
-
Testing for Responsiveness
- Testing during section construction was done primarily with Chrome DevTools, making sure each element works correctly and optimally, including responsiveness across devices.
- I planned to make the site responsive across all devices in Chrome Dev Tools. I am aware of a few issues with smaller screens.
- For navbar, I tested the functionality of all links, including the site brand which takes the user back to the Landing Page.
- I spent time testing the nav bar as initially the Bootstrap collapsible navbar worked but the toggler icon did not show on smaller devices. I overcame this by changing it to a dark navbar and removed the customisation. No other changes to the nav bar were needed.
-
User Testing
- After sending the site to my peers, the main comment that the site is beautiful. It was intended for the site to look nice.
- The users who helped test the site did not know too much about the Cape Winelands so I had to suggest a city to search for. I suggested the user search for Cape Town, Stellenbosch and Hermanus.
- User test comments include:
- “The site works well on my mobile phone, there are some small concerns around the map section working on my phone”
- “The site is interesting and it was enjoyable to learn about the Cape Winelands”
- “The site is easy to navigate, the burger menu on smaller screens make the site easy to navigate”
- “I would find this site useful when visiting the South African Cape”
- Deployment To GitHub Pages:
- I logged into GitHub
- In my account on the GitHub website, I selected Repositories
- I selected the lucyrush / capewine from the GitHub Dashboard.
- I navigated to Settings and to the GitHub Pages section.
- From the Source section, I clicked on the drop-down menu and selected Master Branch.
- Once Master Branch is selected, the page has been automatically refreshed, with a detailed ribbon display GitHub Source Saved Pages indicating the successful implementation.
The live link can be found here - https://lucyrush.github.io/capewine/
- To run locally, you can do one of the following two options
- Clone the repository using the git clone https://lucyrush.github.io/capewine/.git command
- Download the zip file, unzip and run it in your favourite local IDE (such as VS Code)
- All images of The Cape Winelands used on this page were taken from Pinterest
- The icons used for the footer were taken from Font Awesome
- Google Maps API documentation was used in the creation of the Script for this site.
- To create this website, I used many resources, like Stack Overflow, W3schools and help from my peers on Slack.
- Before starting this project, I did need to spend extra time learning about the more practical aspects of JavaScript with the Watch and Code Tutorials
- Google Maps API Documentation greatly assisted in the creation of the Javascript for this site.
- I would like to thank my colleague, Claire, for some guidance and help with getting started. Her help significantly sped the process up.
Cheers!
