Chris Brown

Project Overview: This project involved a WordPress directory application experiencing significant functional issues with its front-end, preventing proper testing and demonstration. The core problem stemmed from configuration errors arising during the integration of its AngularJS front-end within the WordPress theme. The goal was to restore the application to a fully functional state, document the encountered issues, and outline the resolutions for future reference and client assurance.

Timeline: April 7, 2025 - April 8, 2025 (8 hours total)

Initial State of the Application:

Upon initial investigation the primary issues were related to the application's front-end, built using AngularJS within the WordPress theme. Specific sections of the application, such as the "County" search, were failing to load correctly, indicating problems with how Angular was accessing its template files.

Description: The application generated "404 (Not Found)" errors (24 errors total on-load) in the browser console when attempting to navigate to certain sections, particularly the "County" search. These errors pointed to missing Angular template files. The error messages indicated that Angular was looking for these templates in an incorrect path.

Root Cause: Due to the <base href="/"> tag in index.php the relative paths were incorrectly resolved against the sites root instead of the subdomains theme directory. Critically, there was no mechanism in place to dynamically generate the correct theme relative paths within the Angular application.

Steps to fix:

1. Identified the Incorrect Paths: Browser network requests and Angular error messages clearly showed the template files were not being found.

2. Analyzed search.html: Inspection revealed the use of custom Angular directives.

3. Traced Directive Definitions: The JavaScript files for these directives were located.

4. Recognized the Need for a Dynamic Theme URL: It was determined that a global JavaScript variable containing the theme's URL was necessary for constructing correct asset paths within the Angular application.

5. Implemented themeUrl in index.php: The index.php file was modified to introduce a script tag that defined the themeUrl global variable using the get template directory URI Wordpress function.

6. Updated templateUrl in Directives and config.route.js files where appropriate: Within each directive's definition, the templateUrl property was updated to utilize the newly implemented themeUrl global variable to create absolute paths to the template files within the theme's directory.

The brief was very straightforward. The client had an idea/concept in-mind and we hashed it out over a cup of coffee in person. I've included my notes from that session in the gallery The gallery also shows the iterations. I have been out of the Graphic Design/Logo game for awhile now so I was grateful to have the opportunity to help.

This was a project I have toyed around with in various stages and iterations for many years, but never completed. I also was curious about prompt-based development environments, so I decided to give Bolt a try and built this. I really love barbell training in my spare time and good plate calculators are hard to find! They are generally hidden behind paywalls or crammed with ads. I gave Bolt a single-sentence prompt and it delivered the MVP in seconds!

I have since used a combinations of prompts and manual coding to add features and polish the app. I plan to continue to iterate on this project and add more features in the future.

The Xenith project involved the development of a new e-commerce website for Xenith, LLC., a leading American Football sports equipment manufacturer. The goal was to transition the site to a platform that allowed for more custom feature development creating a modern, user-friendly online store that would enhance the customer experience and drive sales. As the front-end developer on the Xenith project, I was responsible for refining and implementing the user interface, developing interactive components, and ensuring a responsive design across various devices.

When the front-end work stabilized, I identified opportunities to contribute to the back-end and took on tasks like handling various API integrations, writing Twig extensions, POSTing to Controllers and writing services to process that data, as well as other server side logic to extend Craft CMS. This allowed me to contribute to both the user-facing and server-side aspects of the project, ensuring a robust and efficient e-commerce platform.

I also learned a ton! On the technical side of things there was only a two man team to deliver this and an accompanying B2B portal. Because of this small team, I sat-in on all the architecture brainstorming for the entire multi-site project and contributed where appropriate. This was a more "traditional" LAMP stack which doesn't seem to be very popular today. The new e-commerce site launched in 2023 and was supported through the end of 2024, when it then transitioned back to Shopify.

For the BoxPop® site I was a newly minted Web Dev (fresh from the junior role) and was in charge of the project. I handled all the frontend template development, coordinated with marketing for feature requests and content, trained content coordinators how to use the CMS, and supported the site for 3 months before departing Britten (who owns BoxPop®) for a new opportunity with Xenith. A lot of these templates and features were rinse and repeat as we had a pretty robust ecosystem of company websites that all shared similar motifs and components. This is part of the reason we were able to launch so quickly.