• The home page of the Fitsolution Personal Training website
  • The pricing page of the Fitsolution Personal Training website
  • The reviews section of the Fitsolution Personal Training website
  • The coach highlight popup of the Fitsolution Personal Training website
  • The contact page of the Fitsolution Personal Training website
  • The mobile highlights of the Fitsolution Personal Training website

2020-2021

Fitsolution Website

Fitsolution is a personal training company owned by an acquaintance of mine. Around 2020, he asked me if I could help him create a website for his company. He mainly needed a few informational pages and a simple webshop to sell his training schedules. I initially suggested using a platform like Squarespace, which met most of his needs. However, it lacked support for Bancontact, a popular payment method in Belgium. Squarespace relied on Stripe, which at the time only supported credit card payments. So, together we decided that I would build a custom website for him instead.

To make this work, I needed four things: a web framework, a CMS, a payment service provider and a hosting service. All preferably free. At the time NextJS was quickly gaining popularity. Seeing as I already had some ReactJS experience, it was the logical choice for the framework. Headless CMSes were also becoming popular and after some research I landed on Prismic because it was easy to use and had a straightforward api. For payments, I went with Mollie, a Dutch provider I was already familiar with that supported Bancontact.

To save some time, I also integrated Shopify as both an e-commerce platform and CMS, using its checkout api and GraphQL. It's a decision I wouldn't make again, but being pretty new to NodeJS and backend development, it was a reasonable decision at the time. Since I was using NextJS, it made sense to host everything Vercel.

So what did I learn? Using NextJS gave me my first introduction to the so-called meta frameworks. I learned about concepts like hydration, SSG, SSR and why serving html first is important for SEO. I also became much more comfortable working with external APIs in NodeJS, thanks to the headless CMS setup with Prismic. This was also my first exposure to GraphQL. I liked the concept, but still prefer regular REST apis. Finally, also dipped my toes into CI/CD, connecting my Git repository to Vercel and managing environment variables for deployments. Minor steps, but meaningful ones.

The website is no longer live, but the screenshots above show what it looked like. Everything except the logo and (stock) photos was designed by me. This project was a great learning experience and served as a stepping stone toward the Customer Content Website rebuild project I later worked on at The Park Playground.

Relevant languages - tools - frameworks