How We Developed a Startup MVP in 3 Weeks with Flutter and Firebase

the application allows its users to store their notes on the books they read as voice, as text notes, get a photo of a page, OCR specific part of it, and store/share as a quote. Check out the application flow below. Android APK could be found here — feel free to test it out yourself. Check out video here.

Core features of Quotea

Here is the list of core features of the application so you could have a basic understanding of the application’s size of the scope:

1. Login with Gmail.
2. Profile/Settings screen.
3. Ability to add any book you read to your own list from a database by name of the book or author.
4. Ability to add your own book if it’s not found in our database.
5. Organize your library and change statuses of each book (you read now/ your finished readings/wishlist of books you plan or would like to read).
6. Add an image note (taking and storing a photo of a page).
7. Ability to select and OCR a specific part of the page on the photo and turn it into editable and shareable text.
8. Add voice and text notes to a specific page or book.
9. Draft, delete or edit your notes.
10. Share a quote on social media or over messengers including the quote itself, author, and name of the app you sharing with:)

Part I — Product Design

Product Design Phase I — Competitive Analysis and Focus Groups

The importance of this phase is obvious. It gave us an understanding of what our main competitors are and what pains the target audience of your product has. This phase helped us to shape the core functionality of the product basing on market needs and potential user's opinions. Check out the competitive analysis and user polls examples below:                    

Product Design Phase II — Sketches

The importance of this phase is often underrated. Many startups skip this part and frankly often skip Phase I too to move directly to the wireframing phase(luckily) or even dive straight into development and “somehow shape UI on the run” during the development process mostly by engineers.

Sketches help you to visualize and stabilize your product idea. Your team can brainstorm on functionality, core flows, and user experience without losing lots of time to adjust sketches. Changing anything on stage is cheap and will become more and more expensive as you move your product through the next phases.

Unfortunately, we were not able to recover Quotea sketches to present them, but we have a different example to share:          

Phase III — Low-Fidelity Wireframes and UI

Low-fidelity wireframes helped us to put our sketching into a very close to the real environment our app would be used in the future. We still did not have any style guides defined, no brand, no logo but we already have a core user flows and core functionality assembled into an app. We have put our low-fidelity wireframes into a clickable prototype (here is an example), and were able to approach potential customers quite seriously to collect market feedback. At the same time wireframes still require fewer efforts to apply changes to comparing to UI and not much more comparing to sketches.                    

Part II — Development

Why we went with Flutter and Firebase for Quotea

Here @inVerita we approach fresh technologies very carefully and avoid hype-driven development. We believe that we rather deliver products to our customers with tools we know well and have experience with(when it came to mobile projects we were mostly sticking to native, less often to React-native). Quotea case was an exclusion and frankly speaking, we are happy we went with Flutter for our internal product.

Our team experienced Flutter in 2018 for the first time as we were exploring the mobile development market for trending technologies that might become a good bet in the future. We were expecting that kind of technology to be “on the edge” and still be simple enough to learn and operate. We cloned a quite complex app we developed for one of our customers on Android-native to Flutter. It took us less time(even though no one had a strong background in Flutter) and we received similar functionality product with less efforts spent — that was a surprise at some point as Flutter was in its alpha phase and was far from its current popularity and stability. We were surprised that alpha version of Flutter gave us pretty stable product.

At the moment of Quotea development, Firebase was nothing new to us. We clearly understood and accepted all the drawbacks Firebase introduced to a product like Quotea. Still, Firebase is a gold mine as Google basically presents you with a cheap backend if you are ready to pay a pile of money as you scale:), especially if you store lots of data like we do (photos and voice notes). One more game-changing thing about Firebase is that an experienced mobile engineer with a basic understanding of Node.js has no problem integrating and operating Firebase. That means you don’t need a backend engineer to develop a basic backend for your startup.

Firebase Services and Plugins we used for Quotea:

- we used firebase_ml_vision to leverage ML Kit with Flutter for our OCR functionality when Quotea had access to the internet. As an alternative, we used Tesseract OCR when we had to OCR locally

- firebase_storage was obviously used to work with Firebase Storage

- firebase_auth to handle authentication with Firebase and firebase_crashlytics to track stability issues of application

Flutter app architecture — BLoC with Redux flavor                    

We can see a few core elements here:

- UI — Flutter markup itself — in theory, it should be as stateless as possible;

- BLoC — is the place where all the business logic goes. We have used flutter_bloc — a battle-tested tool;

- Data — all async methods used to work with network and DB go there;

- Store —is the most interesting part. Basically it’s the Store from Redux but without Reducers. This is the place where all pure functions are stored.

We strived to keep layers isolated as much as possible by making them abstract the best way to achieve that is to keep most of the layers stateless. Having two unidirectional data flows(one for UI, another for Store which has no access to UI) allows us to scale application and team faster as basically UI development and Data Layer can be handled by two different teams.

Why we mostly passed on Redux

In 2019 there was no clear understanding of which architecture approach is best and even now there is a big discussion around what is the best BLoC, Redux, Vanilla, or MobX. In 2020 we would say BLoC and Redux are dominating but the topic is very controversial even today.

At those times the biggest part of our mobile development team had strong native experience as we discovered that Redux creates an extra entry point for people with native background — we decided to focus on BLoC as it allowed us to keep quite low entry point on the project and help engineers to deliver high-quality code quite fast even without big prior experience in Flutter as we scale.

Wrap-up

First of all, we are happy to receive ANY feedback on the app. It is not live yet but you can test it out on Android(APK hosted here) or watch the demo.

When it comes to the development process and technology Google Firebase and Flutter opened a door for young startups and fresh products that leads to fast MVPs and market feedbacks even for products with complex custom UIs. Flutter combined with Firebase allowed us to build a fully functional prototype for both iOS and Android in less than a month with mostly one engineer involved in the development process which is a great opportunity for every product or startup business-wise and budget-wise. On top of that, it might take us another week or two to bring Quotea to the web or desktop with the help of Flutter.

We strongly encourage you not to skip any stages of product design as every hour and every dollar invested into the so-called “discovery phase” will save you five or even ten times more on the development stage.

Finally, if you struggle to pick the best mobile development technology for your next product check out this article — it might have some answers.