Jan 25, 2021

Where should we start... Well, we've been getting ready to ship our first product and have both (yes, we are still two people for a few more days) been coding pretty much non-stop for the past two weeks. Now, we are proud to show you the results.

Welcome to our biggest product update so far ✏️

Meet dark mode

app.flowrite.com now comes in both light and dark mode. This took some time to design but was thoroughly simple to implement with Tailwind CSS.

Referral system

We've implemented a new in-house-built referral mechanism into the waitlist signup flow.

It's been completely made with Webflow, Zapier/Integromat, Google Sheets, as well as some custom code.

The new system lets us:

• Assign a personal referral code to everyone who signs up to the waitlist
• Track the number of new signups through those codes
• Incentivize people to share their referral links by offering special prizes (sneak peek below) based on the amount of referrals made

We launched this last Wednesday and with the signups now going through the roof, we just wish we had built it earlier... 🤤  Better late than never!

Re-engineering

Snappier, quicker, ordered

We encountered frequent flashing and needless re-authentications in our presentational components. To fix them, we clearly needed to give distinct routes to the child components and utilize redirects, instead of toggling visibility using ternary operators. We did that and now the performance is a lot more pleasing.

In much the same way, we discovered that our Firebase reads and writes were not fast enough to deliver an instant and satisfying response. So we created local state in places where it made sense. We employed sagas to handle local updates instantly, while leaving the corresponding remote reads and writes to be processed in the background. As a result, our drag and drop objects not only look great but snap equally satisfyingly.

As great as Firebase is, it does not feature indexing out of the box. To address this, we implemented our own solution, and the reordering actions to manipulate the new ordering.

Restructuring the mountain

Because of all the improvements, the number of state actions more than doubled and the application became quickly much harder to reason about. Consequently, and for the happiness of all, we rewrote all actions, action-types, and reducers into their own hierarchical structures, creating a clear separation between remote, local, and sagas.

Now, we have a well-organized family – all living comfortably in their own cozy spaces. As an additional extra, defining them hierarchically made the importing of them much cleaner.

Once lost, but now found

No more awkward solutions in directing the user from window to window. Now, a dedicated redux location reducer gives us full control of the different application routes and switching behavior.

It's called TypeScript, not AnyScript

And what about all those any-types we had lying around in the realm of redux? We had an opportune time to type most of them. And we did!

Emojis 👀

We had an emoji picker for customizing configurations already before, but now it's much more robust and beautiful.

In practice, we forked emoji-mart, customized it with our own CSS, changed it to assign a random emoji by default, and topped it with dark mode.

Keyboard shortcuts

On app.flowrite.com, we now have several keyboard shortcuts available that let you move around the UI more quickly. For example, you can go from Configurations into Playground by clicking [⇧ + space] and open a configuration with [⇧ + # of configuration].

We plan on adding more shortcuts later and also including them in the actual extension.

Community

With our user onboarding starting soon, we've researched different ways of building a community around our early adopters.

The obvious choice was Slack, but we figured that we could use Circle.so to integrate a community into the actual app and use it as a common ground for discussion, product instructions, roadmap, and documentation.

Circle's allows us to add our own HTML/CSS in its custom head code settings. We did that to create a Flowrite-style blue/pink background.

Loving it so far!

Redesigns

Sidebar

• Re-picked icons from Heroicons
• Adjusted paddings, font size, colors and hover animations
• Ended up with an elegant design for both light and dark mode
  ‍
  ‍

Home page structure

We separated Use cases and Playground into their own tabs to give the home page more space to breathe.

Other improvements

• Designed & implemented both Tonality and Identity settings
• Designed & implemented loading screens for the entire app.flowrite.com
• Fixed various bugs with component behavior, such as clicks causing unintentional closing or sticking of windows
• Transitions – we used both Tailwind CSS's standard configurations as well as our own keyframe animations to add some smoothness into the app