Downtown Oshawa Web App
Description
In this project, I developed the Downtown Oshawa Web App to demonstrate my expertise in building a visually engaging and interactive walking tour experience using Vue.js and related Vue API libraries. The project highlights my ability to integrate dynamic maps, location-based data, and responsive interface design to guide users through curated city tours.
Languages & Libraries & Skills:
Vue, JavaScript, GSAP, jQuery HTML, CSS.
#jQuery #Vue #JavaScript #GSAP #HTML #CSS #Figma
In Depth
Developing Process:
The walking tour concept centers around two core features: “Where to Go” and “Where Am I.” To implement this, I first created a custom map of downtown Oshawa, defining precise boundaries to guide visitors through our pre-designed tours, which include casual strolls, murals, public art, and urban development spots.
To enhance interactivity, I developed a location-based feature where visitors can scan a QR code at a site to access a dedicated information page. This page displays the description of the location, and users can easily navigate to the next recommended stop via the top navigation menu. This system ensures that the app meets the client’s goal of providing a guided, informative, and intuitive walking tour experience.
Interface Colour Scheme Development:
The web app is fully responsive across devices. On desktop, the navigation menu is positioned to the right, while on mobile devices, the information panel shifts to the bottom to maintain usability and visual clarity.
The interactive map allows users to click location icons to reveal an information tab at the bottom of the screen, ensuring that key content is always accessible. The colour scheme and layout were designed to balance readability, visual hierarchy, and engagement, creating an intuitive interface that complements the walking tour experience.
Gallery
