Overview
Offyourbike was a new service covering motorbike accident claims, which needed website development to be a substantial competitor to other similar businesses. Following the good results of my work on other projects within the parent company (Connexus), I was tasked with the development of several components for Offyourbike as I continued to challenge and improve my experience with essential frameworks such as Laravel, PHP & Vue.
Challenges
-
- JS components with dynamic CMS data
The agreed design guidelines would require the development of several interactive components that rely on dynamically generated data. One example for that was the inclusion of a news slider at the bottom of almost every page within the website that showcases the most recently added news posts from a headless CMS. The project also required the creation of collapsible FAQ panels with information about bike accident enquiries and a preview slider for various bike types, all of which use dynamic data.
-
- Auto-generated sitemap
Due to the presence of a headless CMS, a lot of the website content (regular pages, news posts, blog categories) was dynamic and extracted with server-side calls. However, there was still a definite need for an auto-generated sitemap that would include the latest content updates (page slugs, new/deleted pages) as well as creating the ability to hide/add custom entities to the sitemap.
Process
1. Initiate a Vue compatible slider
Apart from having a slider in the homepage banner, there were two other instances that required using a carousel-like functionality. The design mockup suggested that one of the fundamental website features was a slider positioned at the bottom of each page. The data for each slide is retrieved using Axios, and subsequently, the slide functionality gets generated by calling a new instance of the slider. It was essential to figure out how to prevent those events from being fired concurrently, otherwise, that would break the slider. To solve that, I used Vue.nextTick, which executes a function after obtaining our data and updating the DOM.
The second example that called for using a slider was for showcasing several popular bike types. That would encourage website visitors to trust the brand with its ability to represent a wide range of riders that want to claim compensation due to having a road accident.
2. Add the functionality for generating a dynamic sitemap
Processing the links that need adding to the sitemap is achieved by creating a function that gets all entries in the specified CMS collections (pages, blog posts, blog authors, claim types, etc.) with their 'slug' field and an optional 'priority' field. The new array is then attached to an XML-defined document and passed to the front end.
3. Develop reusable blade components with CMS-based bike accident-related content
Perhaps the most straightforward part of the development cycle was building a range of page partials with Blade and SASS. Those would help to navigate the user in their journey for either getting informed about the process of claim submission or seeing related statistics about road accidents.
Conclusion
The experience I got from working on Offyourbike enriched my knowledge in Laravel and Vue and challenged me more than I'd expected. I had to spend some time going through the official framework documentation and sometimes ask the other developers in my team for tips on how to optimize the performance of the components. While I enjoyed the process of creating compact Blade partials and utilizing the power of CSS & SASS to make them responsive, it was essential to face more complex tasks that would also assist my growth as a developer.
