ZeroToHero – A Vue.js Powered Web App
May 2020 - June 2020
- Work with an open-source project workflow
- Integrate with an existing codebase
- Design new components to match the current app
For this open-source project, I took the existing Vue site and added new components, as well as updating existing ones. The client had an older existing WordPress site with similar content, but moved to a web app based solution. My job was to complete the process of migrating some old designs over to the new components.
The Revamped Sections
The project involved taking sections of the old WordPress site and updating them to be new Vue components. Here are some of the more significant changes.
The process was fairly straightforward since setting up Vue web apps is fairly easy. After setting up, it was all about getting familiar with the current codebase. Once I do that, it’s important that I reuse existing components and logic to adhere to the DRY principal. From there, it’s about adding custom logic on top of their existing components. The project went fairly quickly and the changes were all completed on time.
Want to check out some code demos?
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 […]
Discord Bot: Reddit API Ask Feature
The Purpose Some Discord bots have a feature where you can “chat” with the bot(i.e: Cleverbot integrations). I decided to take a spin on this concept and utilize the Reddit API to answer common questions. A user from the server asks a question using the b!ask command, then the bot gives a random answer from […]
React.js Modal Using The Hooks API
Modals are a classic piece of application functionality, made even easier with libraries like React. You could go with a library, but you can often make your own with less than 100 lines of code. Using the hooks API, you don’t even need a class based approach. This example is going full functional! Defining The […]