SaaS - Website Builder + Analytics + A/B Testing

The story of Storyteller.

The goal of the project was simple in it's intent - give people a way to validate their ideas by focusing on the idea's message, instead of it's presentation. A lot of bad ideas can be disguised as awesome products if you add enough flair and glitter. The issue is when you focus on the presentation, you're measuring how well you're presenting and not how useful your idea is.

So what if, instead of focusing on presentation, you connect with people without the glitz and glamor. You lay your idea before them in a clear, straightforward manner, without distractions or disguise.

The feedback you'll receive is at the core of what you are trying to learn, will people connect with this idea.

And from there, you can iterate and grow along with your audience by utilizing the built in metrics (no more google analytics), A/B testing (no more posthog), build an email list (no more mailchimp or constant contact), and gather direct feedback from your users, (no more typeform). Simply tell your story, share it, and learn.

Building Storyteller

My go to SaaS toolkit is the TALL stack - Tailwind, Alpine, Laravel, Livewire. Why? Simple - TALL gives you insane powers to build things FAST. You waste NO time building things that aren't specific to your project or mission.

Tailwind isn't just a CSS framework, it's a language which allows an endless supply of templates, components and UX frameworks that completely eliminate the need to build front ends from scratch.

Alpine + Livewire give you all the power of reactive frameworks (Vue, React, Svelt) without the additional tax of creating API's and additional services to supplement auth, state, sessions, security of building detached front ends. In other words, you don't waste any time. You build your product, your experience, and the tech enables you to focus purely on delivering value.

Challenges

At the heart of storyteller lies 1 essential experience - Sharing your story. If that doesn't feel right, none of the other features matter.

So the editor (or editors) needed to provide a smooth writing experience while not being complicated to incur a learning curve. But powerful enough to be expressive.

After almost a month of trying different editors, tools, and building a block editor from scratch. I built both the blog and web editor in React, to modularize the custom blocks and persist state in a string-affiable manner. This allowed me to leverage tools like GrapeJS, CraftJS, TipTap, Slate, amongst other contenders to build a first-in-class experience of telling your story.

Integrating a React app inside an alpine app also provided for some interesting integration techniques I developed to facilitate real time data exchanges between my SPA react editor and my Livewire data streams.