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.
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!
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!
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.
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.
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!
- 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.
- 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
Jan 11, 2021
At around Christmas, we started building the Flowrite web app to help users configure, customize, and test their Flowrite product in an enjoyable way. After creating the designs and an initial React implementation, we began transforming the project to share a uniform base with our Chrome extension.
Migrating the codebase
To separate business logic from presentational layers, we pulled the state management to a Redux store and side-effect handling to Sagas.
Firebase & settings
Redux actually goes very well with Google Firebase, so then, adding the data sync capabilities to our settings page, including persistent login, was a breeze.
Right now we are in a happy state with the settings application, adding joyful features like emoji picker and drag-and-drops. We can't wait to connect the new customization possibilities to our extension and the backend for all to try and enjoy!
+ We've been also working on a little website design update, and it's looking really cool. Will be out in a few weeks 😉
Dec 28, 2020
Style, Settings & Flowrite "App"
FYI: We are changing our biweekly update cycle to begin on Tuesdays instead of Mondays. Going forward, we'll be using Mondays to finalize the remaining work from the past two weeks 🤙🏻
During the holiday period and the week before, we worked on bringing our unique Flowrite style into the extension experience.
- Tailwind CSS bundled nicely into our typescript build
- No leaking CSS accidentally affecting the visited pages
- Styled popups for user authentication actions and error cases
Furthermore, we designed the UI for our web app (with Figma, ofc). We've done some initial designs earlier but we managed to finish the screens for:
- Configuration & edit windows
- Playground (to test the configurations in different scenarios)
- Flowrite button and its functionalities
- Basic account settings
Lastly, we implemented the designs by developing the front-end for app.flowrite.com:
- Building the .html base with React
- Adding responsive and consistent styling with Tailwind CSS
- Creating simple animations for better user experience
Dec 13, 2020
Approaching the beta launch
This month we have made headway in improving the usability and security of Flowrite's first beta release – the Chrome web extension.
We believe in making products secure by design, rather than by after-thought, so we have put quite a bit of time into this step. Chrome has recently taken strides in improving its security and we've had the pleasure of including many of its latest features in our product. One of their improvements is in the way users can log in to the extensions – we managed to fit this modern flow within our application for frictionless use of Flowrite.
We've raised a €550k pre-seed round from some of Europe's top investors – Lifeline Ventures, Seedcamp, David Helgason, and others – to accelerate our product development, hiring, and growth. It's the next chapter in our journey to creating a category-defining AI product to change how people write on the web.
More about the round:
Nov 29, 2020
In the last two weeks, we have built the foundation for our browser extension. This is the "real" version of Flowrite that we are shipping to early adopters soon. In the beginning, we will support exclusively Google Chrome, with a plan to extend support to other browsers as well.
The development work so far has included:
- Testing and selecting the best developer tools for our needs
- Introducing Flowrite and Google Chrome to each other 🔮
- Making Flowrite simple to use within Gmail
We are hiring
We've made some serious progress during our first months and are now looking for extraordinary product people to take ownership of certain parts of our development. We've opened the following positions:
- AI Engineer – a position dedicated to building our AI infrastructure from the ground up.
- Software Engineer – a hybrid position to help us create an impressive product foundation.
- Create your own role – an open application for those who see themselves contributing to our mission in other ways.
Check them out and let us know if you're interested!
Nov 15, 2020
Background work on the quality and UX
No shiny UI features this week, but a lot of heads-down work on the background to improve the Flowriting experience and completion accuracy on the end-user side. This is related to all the cool stuff we are building on top of the OpenAI API to make Flowrite the best writing experience out there.
We are so excited about making the final touches and begin shipping to early adopters later this year.
- We designed and built an about-page at flowrite.com/about to better communicate our mission and what we are up to. We'll also use it to announce our first open positions in a few days as we are starting the hunt for some stellar product people to join us on our mission. If this sounds interesting, we'd love to talk to you – stay tuned to hear more!
- Since we've gotten some nice SEO gains and thus, a great deal of traffic (see below) from our GPT-3 blog post, we built better ways to convert these new visitors to future Flowrite users on our pages.
Nov 1, 2020
First test users
In roughly 7 weeks, we've built our product to a point where it's already producing great results and is able to create value even though it's not in its final form (Aaro has been using it to answer most of his daily inbound emails).
With plenty of people asking to get their hands on the web UI, we rolled out access to a few early adopters to give us first-hand feedback on the results.
The preparations included:
- Making the set-up process as simple as possible
- Usability improvements to the UI, including sender and recipient fields and being able to adjust the randomness of the results
- Adding options for both example use cases and empty fields
We believe Flowrite should be effortless to use with most of your daily writing - and to accomplish that, significant legwork can sometimes help. We put in the hours and made a number of useful discoveries:
- Flexibility built-in: You can now customize Flowrite to your most frequent email types.
- Dynamic adjustments: If you feel like the tone of the completion is not quite right, we are able to adjust it on the fly.
Oct 18, 2020
More accurate completions
We've been putting a lot of time into our prompt design, which directly increases the quality and efficiency of the completions we offer. This is paying off well and we are looking forward to sharing some results with you during the upcoming weeks.
Way faster testing environment
From the start, we decided to develop Flowrite in steps, increasing the challenge level gradually. First, making the engine functional in an isolated environment and then, raising the bar by taking it into the real world – use-case by use-case.
During the past two weeks, we have made some core improvements to the testing environment, including the capability to dynamically control the brains that produce completions. We also took the first steps towards making Flowrite learn to adapt by itself.
Last week, we headed to the Finnish countryside to launch Flowrite after working on it for 5 weeks. The launch was successful with hundreds of people on the waitlist during the first 24 hours. Read the whole story here.
- Following our launch, there has been quite a bit of interest to 1) see the product in action, and 2) learn how we got access to GPT-3. So, here are answers to both:
- Want to hop on board to build the future of writing? We opened a signup form on our careers-page to get you notified when we start hiring.
Oct 4, 2020
Welcome to the first Flowrite Product Update. We will be posting updates every 2 weeks for both internal and external purposes; to stay accountable to ourselves and to display progress for early adopters, future hires, and investors.
This first update covers some fundamentals behind our tech decisions; however, future updates will be more about the specific achievements of the preceding two weeks.
Building the Flowrite Beta
When we chose our tech stack, we chose one that is a joy to use for our development team. We believe that happy people will, in return, build the most amazing products. So we picked all our tools that way. What we have now, is much fun.
Here's a sneak peek:
A no-frills backend using Python's FastAPI. It is a framework known for its speed of development, flexibility, automatic documentation and even some rudimentary type-safety with pydantic. Yes, we know, it's crazy that Python has type-safety.
A new – still private – demo website where our beta testers can play with Flowrite. A couple of weeks back, we were happy with the quality of the completions but not so much with the delays. So, we made the text generate as stream and decreased the wait times from 15 seconds to less than 2 per completion.
Nobody wants to use a buggy product, even at the beta stage! So we built an automated test pipeline that is able to create accurate mock databases from thin air and run a series of checks on the Flowrite Beta before we put it into production.
Design & website improvements
Approaching the first public launch of Flowrite, we've also put some effort into finetuning our visual identity and website.
- Finalized our logo, profile images and favicons
- Created the mockups in the explainer section below Hero on flowrite.com
- Created a new demo section – "Flowritten" – on flowrite.com to better display various ways of using the product