Tibi English

Tibi English a responsive landing page for an English tutor, originally designed and built in Webflow, later converted into Astro.js project with Sanity.io for dynamic content management.

Stack

Webflow
Javascript
Astro.js
Sanity.io

Live

View site →

Repo

Check code →

Project's Goal

Create a website to showcase an English tutor’s services, strengthen their brand, and help convert potential clients.

Challenges

No-Code Built

Before starting this project, I had been toying with the idea of building a frontend project with some sort of no-code solution. I didn't know much about them before I started, but I'd seen many people on YouTube crafting interfaces while moving pretty fast, and that intrigued me. After a short research, I concluded that Webflow is the product I wanted to try. It was popular, had a rich ecosystem of nicely designed templates, and its UI seemed well thought through and kind of reminded me of Figma.

I started by going over some learning courses on Webflow University, which, by the way, were super high production value and were also pretty funny. Once I was accustomed to the tooling, I started building the site. Clicking and dragging elements felt a little awkward at first, but after a short while, I got the hang of it and honestly quite liked it. Tinkering with controls again felt like I was in Figma, and building the layout visually required very little cognitive effort. I understood why this tool got so popular.

Once the page was finished and hosting costs for the page itself and its CMS came into full picture, I realized my client wouldn't be willing to spend as much for hosting, nor should he. That sparked an idea in me of migrating the page to a hosting provider with lower fees. Fortunately, the Webflow platform supports export into code natively.

Migrating to Astro + Sanity

After careful consideration, I decided to migrate the project into Astro.js, a content-focused framework with great load times. I got the okay from the client and proceeded to move everything I could as it was and reworked only the parts that were absolutely necessary due to their dependence on the Webflow platform. It was things like an Offer component using dynamic content or the Contact Form.

My choice for the backend was a headless CMS called Sanity.io. It was well established, had a good UI, and provided its own hosting for studio access. For hosting the static site, I chose Netlify, which provided its own Form service that I used for the Contact Form. Its free tier included free hosting and 100 notification emails a month, more than my client really needed.

As a result of the migration, I managed to lower hosting fees to a minimum , which was a big win for my client. Although the process itself wasn't without its negatives. Besides the extra work needed, the biggest one in my opinion was worsened code readability. The migrated code was using third-party symbols imported from Webflow, which had no semantic meaning and it was hard to understand what they actually do. This makes potential future work in this codebase more expensive. Next, the overall code structure was also not optimal, as it wasn't designed for Astro.js in the first place. Arguably, this could be improved by further refactoring, which would come with additional cost.

Lessons Learned

Even though this project wasn't technically difficult at its core, it helped me to widen my horizons in frontend development quite a bit. I've learned about no-code solutions for website design and I realized that even if it can feel nice to build interfaces via GUI, it's probably not for me as it takes a toll on my coding skills.

By working on this project, I've discovered various complications that can arise during migrations from one tech stack to another. I'm much more careful now considering various options and their impact before I commit my project to some technology in particular.