Equipment Sign Out Site
Description
In this project, I recreated the Equipment Sign Out site based on the dynamic landing platform used by Durham College. The goal was to demonstrate my ability to design and develop a data-driven interface using Vue.js, the Materialize library, Axios, JSON data structures, and core JavaScript. This project highlights my approach to building responsive, component-based applications that integrate structured data with intuitive user interfaces.
Languages & Libraries:
Vue.js, Materialize, JavaScript, Axios, HTML, CSS.
#Vue #Materialize #Axios #HTML #CSS #Responsive #rebranding
In Depth
Developing Process:
In this project, I focused on demonstrating my understanding of working with dynamic data within a Vue.js environment. One of the key challenges was managing data flow using Axios, including sending requests, handling responses, and implementing error handling. This required me to establish a clear and well-organized state structure within the main application file to ensure consistency and maintainability.
I implemented data retrieval for equipment categories as well as sample borrower information from the database, allowing the interface to dynamically update based on user interaction. This process emphasized the importance of structuring data logic alongside interface design.
Another core feature of the project is the shopping cart system built entirely within the Vue.js framework. By leveraging Vue components, props, and lifecycle methods, I created a modular and scalable architecture. This allowed me to maintain separation of concerns while ensuring that different parts of the application communicate effectively.
I also developed the typography and visual hierarchy to support clarity and usability across the interface.
Interface Colour Scheme Development:
As a rebranding project, I based the colour scheme on the existing brand guidelines of Durham College. I applied two primary colours, green and brown, to key structural elements such as the header and footer to establish a strong visual identity.
To complement these tones, I incorporated white and light grey for background and content areas. This combination helps maintain a clean and balanced interface, improves readability, and ensures that the data-driven elements remain clear and accessible to users.
Gallery
