Pineapple Posture
Teaching women to love the body they are in + embrace the strength they are capable of.
My wife has always been much healthier than I am in almost every area of life. As a certified ISSA trainer, she has been trying to grow her personal training business and find clients she can train both on how to exercise and eat.
For most use cases Meta has a wide range of tools for small business owners to manage clients, book appointments, communicate, etc. But the bar to entry is so low it is often difficult to stand out in a vast sea of other fitness influencers who also want to become personal trainers.
My goal with her site was to create something beautiful to allow her to stand out, and tools that would be simple for her to get started, and simple for her clients to take get signed up, and communicate their needs with Gabriella.
Creative Process
The creative process was by far the longest part of this project. Coming up with a pleasing design that she was happy with took some back and forth, we wanted something that would provide information without overloading the user with too many visual elements. It had to be simple.
The first step was coming up with a logo. She had a good friend of hers design something that would bring out her personality and while playful, a recognizable logo. It had to look good and stand out in different sizes, from the favicon to anywhere else we needed to place on the site.
To elevate her site a step further, we were able to get some professional pictures done for her in an attempt to advertise her brand. The pictures being done professionally further improved the overall aesthetics of the site and her credibility as a trainer.
Even the fonts took a sampling of dozens of different fonts until we landed on one that we were both happy with.
The original build
As a primary backend developer, my take was to build something on a TALL stack. As always, Laravel gave me a lot of tools out of the box, and combined with TailwindCSS and Livewire, I was able to come up with a beautiful design and develop the overall site very quickly. As I created each element of the site, I could receive feedback and quickly address it. I had never built a TALL app from scratch before, so this was a great learning opportunity to get a little more knowledge, especially going over Alpine.JS and Livewire, two libraries I had not worked on before.
The front end is a custom TailwindCSS design created to be simple and flow well. Most of it is static content, so didn't require a robust CMS in the backend. To allow for content management and some administrative tasks, I set up a FilamentPHP dashboard. The dashboard includes some analytical information and has a section where she can update sections of her front page. As well as review the information submitted via the forms.
The Serverless approach
While the original build worked well and proved to be a reliable site. For the second iteration, I decided to move to a serverless infrastructure. The dynamic components of the sites could easily be outsourced to 3rd party services and allow my overhead to be greatly decreased.
The CMS and Form submission logic are the two components that required the most amount of thought. There are great options out in the market today for both. But for a serverless site, few have come as close as Builder.io in my opinion. With a robust Vue SDK and API integration of the headless CMS, it was as easy as setting up the data models for the elements on the site. Then with a simple Pinia store, I can fetch the data and hand it in to the Component to render it all out. Now, anytime there needs to be a change made, Gabriella can log on to her account, make the changes she wants, and within 5 minutes we have the changes live in production.
Forms are a little trickier by nature. Security is always a concern and ensuring data is stored appropriately and in an organized fashion. Ultimately, the decision to move to serverless infrastructure hindered finding a good form of service that was flexible enough to meet the needs my wife would have for communication on her site. A service I have found super helpful is Formspree.
The greatest part of the move was the fact that a lot of the existing Vue components could be reused with minimal adjustments made. The primary issue with the migration was converting any Breeze and Livewire components to either native HTML components, or finding alternatives.
The result
This build is still one of my original favorites, I was able to dive deeper into some more front end technologies that I had not had extensive experience on before. And explore the client's personality and taste to implement something that is beautiful and would elevate their brand. The communication process was another aspect of the build. As an engineer, the focus is on the tools and reliability of the site. But working with a client as close as my wife, gave me a chance to see that truly, deep down, they don't care much about all the things other than the end result (obviously this does not apply to every single situation) and their ongoing maintenance of their site and brand is what truly matters to them.