Overview
One of my first projects with Connexus Group was the website reconstruction of one of their subsidiary companies. I worked on implementing and reviewing core features during the initial development process and also later on while receiving requests from Marketing or the stakeholders.
Challenges
-
- Headless CMS & frameworks
At the time of joining the project, the other team developers had already started the development process. I had to get up to speed with some essential frameworks like Laravel, Blade and Vue as well as learn to use a headless CMS.
-
- Reusability
Other than making the content pixel perfect, I also had to ensure that it can be successfully replicated on various pages across the site if needed.
-
- Dynamic content with JS integration
As well as accessing the CMS data with the PHP framework Guzzle, I was required to learn Axios for making API requests and incorporating dynamic content in Vue JS components.
Process
1. Framework training and foundations
In my experience, learning a new framework was best achieved by watching practical video tutorials. Getting familiarized with Laravel became less intimidating when I discovered the Laracasts online portal, which taught me the Laravel foundations and showed me some essential tips. Although the Specters development relied on using the Twig template engine instead of Blade, both had similar functionality and syntax which I gradually grew familiar with.
2. Build reusable twig components
Shortly after acquiring the Laravel basics, I had to be quickly involved in the project development cycle with tasks that would gradually increase in difficulty. My first practical assignment was learning how to add custom error pages, which suggested creating some designs and doing further research.
Familiarizing myself with the headless CMS happened alongside the process of using Laravel. The former became necessary when I received a request from the Marketing team to create a page with client testimonials from the CMS. Achieving that would require using the handy Laravel controllers that pass the data retrieved with Guzzle and sort the testimonial entries by their creation date.
3. Integrate the CMS data with dynamic Vue components
Some of my tasks further along the development process required the implementation of Vue, which was also something new and challenging at the time. There were several instances where there was a need to use dynamic CMS data for JS-based components, e.g. collapsible FAQs block, enquiry form information & expandable team profiles.
In the example above, the Axios library makes an API call to the headless CMS, which retrieves the data from the 'FAQs' collection based on a predefined 'category' property.
Conclusion
With Specters being among the first projects I got to work on during my stay at Connexus, I reckon it was a good learning experience that had the right amount of difficulty for someone just starting with advanced frameworks like Laravel and Vue. I had to quickly adapt to those new tools which, although intimidating at first, ended up being a great confidence builder that equipped me with essential knowledge for my future assignments. While I found the process of learning Laravel much more straightforward with its carefully assembled documentation and collection of video tutorials, I was determined to get just as comfortable with using Vue. Regardless, I successfully handled the development tasks I was given and also got a decent exposure to the new technologies involved that gradually became more familiar and less daunting.
