Carbuckets Vue.js Powered Web App
Feb 2021 - April 2021
Goals
- Learn storybook and cypress testing to get up to speed quickly
- Learn a Vue.js design pattern I was unfamiliar with
- Isolate and test components effectively using storybook and cypress
Project Overview
Carbuckets was an existing app that needed new features and updates. I was tasked to take certain components and pages and build them out. The app had an existing code structure that I learned to effectively make changes.
Process
The process revolved around how the codebase was structured. Since we used storybook, the first step was to make the component’s design with populated data fed through the storybook component. This really helps with isolating the design step and not having to worry about hooking up data quite yet. Once that was completed and approved, my job was to grab the correct data from the vuex store and hook it into the design component.
The design pattern involved a parent wrapper component that contains the child components I was working on. I’d hook the data that was fed into the parent component into the isolated design component.
Throughout the entire process, I used cypress to test key functionality including file uploads, state management and consistent design.
Chase
Brandon did great work for us, would recommend and will likely use his expertise again in the future.
Technologies Used
Vuex and vue router was used for passing data to my components. To make the designed components themselves, I used vue.js and SCSS. Hooking up data involved making API calls and storing them in vuex then retrieving and reading those values through vue templating. Cypress was used to test all of the above.
Want to check out some code demos?
Check out code samples written in JavaScript, React, Node, and more
Demo 1
Converting jQuery Blog Post Component To Vanilla JS
I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store […]
Demo 2
Converting jQuery Navbar Code to Vanilla JavaScript
I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to […]
Demo 3
Defining Reusable Column Extends with SCSS
Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]