Fixd Repair: A Vue-Powered Home Repair Website
2018 September - 2020 November
Goals
- Redesigning the look and feel of an older WordPress website
- Optimizing load times, refactoring the code base, writing clean reusable code
- Utilize modern technologies such as Nuxt, Vuex, Router, and Webpack
- Working effectively with a team under fast-moving business deadlines
Project Overview
Fixd Repair needs an older WordPress site updated for 2018. What’s a hot framework that certainly lives up to the hype? Vue.js to the rescue! My job was to work with a team, and fulfill my role by building out a performant front-end for the new site. Utilizing modern technologies such as Nuxt, Vuex, and Vue Router, I was able to build a scale-able front end for this fast-growing home repair company. Overall, the site is designed mobile-first, with a responsive design that works across all screen-sizes and browsers.
Fixd Repair Gallery
All assets are loaded as inline svgs, which make load times blazing fast and programmable. Here, the pins are hoverable, and the clouds animate across the map.
Using Vue.js, you can create instant form validation with multiple forms in the same session. The big advantage here is how fluid a complex form flow can feel to the end user.
Process
Getting Started
I was provided assets, mobile and desktop designs, and a general sitemap with a game plan. My job now was to bring the designs to life. When I approach a site, I usually do it page by page all the way through, then move on to the next. This made sense when approaching the redesign, so that’s how I started.
Always Working On Something
After a full page is good to go, I’ll take revisions/feedback while moving on to the next. For time crunches, it’s ideal to always be working on what you can. For example, if a page is done, there’s no need to wait for reviews to come in if you can be working on another page. Since there was a time crunch, that’s the approach I took.
..And Beyond
Page by page works for a while, but real world requirements eventually kick in. After the first few pages were built out, the process turned into changing current designs, adding new features, and optimizing the overall site as much as possible. Changes from there involve a mixture of new designs/pages and tweaks to current ones.
Technologies Used
The build
Fixd utilizes not only the bells and whistles of Vue and its single file components, but also their third party libraries such as Vuex and Vue Router. The build uses a mix of Gulp.js for deployment to AWS and Webpack for building and generating static files(Nuxt).
Styles and SCSS
SCSS compilation and auto prefixing is built in on top of the overall build, allowing a large folder structure on top of some mixed-in scope styles. This is usually how I prefer to work, since I utilize global and reusable style rules where I can.
Other Libraries
This site also utilizes smaller libraries to carry out things like API calls(axios), form validation(vee-validate), and general helper functions(_scores, vue-smooth-reflow, etc).
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 […]