Reshaping our own brand

Phase 1: Taking stock and untangling the prototype

Untangling the AI-generated code

Vibe coding can be great for quickly generating ideas, and it definitely empowers non-technical business owners to prototype quickly. However, it can also result in a codebase where no one person knows what's going on, even for a simple static site.

Shai had applied their artistic and creative skill to create a great design, but under the hood things were a messy combination of python scripts, massive CSS files, and markdown content.

Our first task was to break down exactly how the coding agent had hacked the Hugo prototype together. Fortunately this process was fairly quick for a static site with a few dynamic routes.

After reading through the codebase, we identified a few key knots to untangle before we could begin porting the site to the new framework:

• The conflation of a built-in Hugo theme with custom styles.
• A number of javascript files being imported with unclear funcationality or impact.
• Translating the way that Hugo loads content from markdown to Astro's content layer.

Phase 2: Minimal migration to the new framework

Leverage the existing implementation to port quickly

Once the key hurdles had been identified, it was time to start migrating. We decided to focus first on moving the existing implementation entirely to the new framework.

This meant copying all of the markdown content, scripts, and stylesheets from the built Hugo project to our new Astro project. We then built a minimal content-loader to load the markdown content into the site, much in the same way it was in Shai's prototype.

The reason we went with this strategy is two-fold:

First, exact visual parity was critically important. Shai had worked hard on a design that they felt expressed their brand identity. Our job was to preserve that exactly. By directly porting all styles, we had a baseline in the new framework to reference before trying to bring the codebase in line with best practices. We established a source of truth to make sure we didn't budge a single pixel.

Second, separating the process into two steps of (1) minimal port and (2) code clean-up set us up to have a clean foundation on which to start adding features and integrating the CMS.

Cleaning house

Once the minimal port was complete and functional, we started work on cleaning up and organizing the codebase. Previously, all styles were in a 500-line long CSS file exposed to the world in the public root folder of the site. We refactored these styles into a much more modest, 100-line global file defining site-wide styles and many smaller styling blocks scoped to specific components bundled on the server. This change reduced flashes of unstyled content and massively improved readability. We also removed nearly 200 lines of unused CSS classes, saving valuable bundle size and speeding up page loads.

We then starting breaking the site down into components that could be reused around the site and later hooked up to the CMS.

All told, after cleaning up unused code and styles left behind by the AI agent, the codebase was almost 20% smaller and far more maintainable. It was time to start transforming the site into a scalable platform that fit Shai Paper's goals.

Phase 3: Laying the foundation for growth

Composable content with Payload CMS

Shai needed powerful tools to manage their own content. Instead of rigid schema and markdown files, we leveraged Payload CMS to develop a composable system of blocks for creating content like informational pages, blog content, and guides.

Product details benefit from the strict typing of a relational database, but marketing content and website copy should be flexible and composable. We chose Payload for Shai's project because it gave us the benefits of both and supports easy extension and customization at every step. With Payload, we were able to build modular content blocks that Shai could use and repurpose across the site to build new pages and content without the need for developer help, empowering them to take control of their entire workflow.

Speed + rich interactivity with Astro

At DataParty, we tend to favor Astro over other modern frameworks for its design philosophy and development speed. In this case, it was a perfect fit because we could selectively decide what content to render on the server on page load and what content to render at build time and serve statically. We were able to load static assets incredibly fast while integrating interactive components like the shopping cart and inquiry forms where needed, minimizing the amount of javascript shipped to the browser.

Page load and response times are absolutely crucial in e-commerce. Even in slower-moving B2B sales, a sluggish site can sour your prospective customer's impression of your business in seconds. We knew that building the fastest site possible for Shai Paper was absolutely crucial. We did everything possible to make sure their site had a first-class user experience.