For this project I created a website for users to find attractions at any chosen location around the world.
The page waas made through the lens of Google's Material Design and as such features a very minimalistic look with no special bells and whistles attached. There is a search bar at the top of the page with Google's Autocomplete function built in to bring up any city or country the user would like to view. When a city is selected, a map and several tabs appear to show the user the nearby attractions (Restaurants, Night Clubs, Hotels, Museums and Casinos). The user can click on an individual attraction to view a gallery and additional information including the address and telephone number.
The site was made using Brackets IDE and tested using Google Chrome, Mozilla Firefox and Internet Explorer. Several Android devices as well as an iPhone 6s were also used in the testing process. Google Chrome inspector was used to simulate several device screen sizes I could not personally get my hands on.
I deployed the site to Github Pages after all testing was concluded on the following link here.
Mockups can be found in the /mockup/ folder in this Git repo.
Page/Feature | Description |
---|---|
Homepage | This is the landing page with suggestions in blocks if the user does not have a destination in mind. |
Search Bar | The search bar on top uses Google's Auto Complete feature and will suggest cities based on what is typed. |
Map | The map appears and centers on a destination once selected and will mark where attractions are. |
Tabs | Quick access to all attractions at given destination. |
Attraction Cards | Cards display attraction name, image and rating at a glance. |
Modals | Each attraction has its own modal with extra info including more images, address and phone number. |
- Google Maps Javascript API The backbone of this website used for the map, destination info and the Autocomplete search bar.
- Materialize CSS Framework This framework was used throughout the website to facilitate a responsive and clean design.
- FontAwesome Icons Used for the Social Media icons and buttons.
- Google Fonts Library Excellent online font resource.
- Hover.CSS Used for various divs and buttons around the site.