Mobile-First Startup using Flutter & Firebase
The fact that you are reading this article means that you want to be a top-earning mobile app developer working at a startup using the latest and fastest technology or as an entrepreneur you have this cool idea (..and wonder why nobody else has thought about it, yet so simple) for a mobile app that will make you the next startup millionaire.
So let’s assume you are the latter and you have this cool mobile app idea which will allow ladies easy access to beauty services which include hairstyling, makeup, manicure, etc. The master plan is to build the app, launch and run it for enough time to show it is worth investing in based on available analytical data to attract investors.
1. Solution Definition
First, we state the problem our solution is trying to solve and the steps we plan to take in solving this problem.
Problem: No easy access to varieties of nearby beauty and skin care services and the high risk of getting bad quality service.
Solution: Create a mobile app solution that will allow users to search and access nearby and available beauty and skincare service then rate and comment on services rendered.
So from the above, our solution is going to have 2 actors, the providers of these beauty and skin care services and the consumers of the service. Now that we have our actors defined we will now define what features each of them will have access to for our MVP (Minimum Viable Product).
Features of our app
Service Provider
- Create Brand on the platform
- Select list of beauty and skincare services rendered by brand
- Engage a customer in a transaction
- Comment and rate the customer
- View history of all transactions
Service Consumer
- View and select services based on categories and subcategories
- View details of nearby and available provider of a service
- Create an account/profile on platform
- Engage a provider in a transaction
- Comment and rate service provided
- View history of all transactions
Of course, we can add more features or even an extra actor (Assistant for Provider) but we do not want to increase cost and risk just in case our project fails. So these are the features required for our MVP which can be further broken down into User Stories to finely define the requires of each feature.
2. Solution Prototype
Its time to bring our solution closer to life using graphics or sketches. Figma is a cloud-based very easy tool for prototyping so we use it to produce sketches of our app screens based on the features and the user stories for each actor.
How to build the Mobile App
The 2 most popular platforms right now are Android and iOS, so these are the platforms we want to build our solution for. We have 2 options with which to build our mobile app.
The first option will require at least 2 developers, one to build the app on iOS using Objective C or Swift programming language and the other developer to build the app on android using Java or Kotlin. Yes, you can find a developer who can do both but then it will take a longer time to produce our app than using 2 developers.
The second option is to use one of the popular hybrid frameworks that allow us to use a single language and single codebase hereby reducing the work by half meaning using a least a single developer is feasible without compromising on delivery time. the two most popular hybrid frameworks for mobile are Flutter and React Native.
We are going with option two so our MVP can keep costs and risks low. Some people are usually concerned that the file size of the hybrid app is usually double the size of the one built with native. I used to be one of these people but then facebook, Instagram and Twitter made me notice something. What I noticed is that if you have a good app and it matters to the user, the size would not really matter.
Why Flutter?
Flutter allows you to build beautiful native mobile apps from a single codebase without compromising on quality speed and performance. It uses widgets to produce beautiful and responsive UIs. The main difference between flutter and the other hybrid systems is that it does not use a bridge or the OEM’s UI element, instead, it requests a Canvas from the platform to do its work. The video below can shed more light on this.
3. Solution Architecture
This section is more like stating the obvious but then it has to be done. The architecture of the solution will be as shown below:
We need to have a cloud server that will host the database that will contain all the information our solution will be working with. The mobile apps will access this information via a backend application that is in charge of information access and manipulation. Using a mobile-first approach also means we might be looking into a web client port for our solution in the future, so there.
4. Solution Funding
At this stage, we can start having an idea of all the resources required to launch the MVP of our solution. We need to build the hybrid flutter app for the service provider, another for the service consumer and a backend application. That means we need at least 3 developers. So as a coding ninja, you decide to build everything by yourself instead of paying others to do it.
And with your current workload at the office, you estimate it will take you at least 12 months but if you quit your job it should take half the time, but then you would need some cash to take care of yourself during this time. Whether you want to hire some developers to lighten the load or you wanna do everything yourself, it would not be a good thing to bear all these time and financial risk by yourself so you decide to call a friend with a fat pocket.
5. Firebase
Your said friend loves your idea and wants the solution launched like yesterday. Apart from the backend that does all the data exchange, other mobile app features we will require include:
- Push Notifications: Just like the notifications you receive on your phone when u get a new email or message from Facebook, WhatsApp, Twitter or Instagram
- SSO (Single Sign-On): Allowing users to login/sign up using an existing social media account (Facebook, Google).
- Storage: Saving and loading media files and documents on the cloud.
- Analytical Data: Gathering of user data to be able to make informed decisions to grow your app and its users. This is the information investors will like to see and know whether your solution is worth investing in.
You can imagine the amount of work need to implement these extra features adding to more time, risk and costs to out backend. This is where firebase will come in to rescue you.
Firebase is a mobile-backend-as-a-service that provides powerful features for building mobile apps. Firebase will eliminate all the extra time, cost and work required to implement these features by providing them for you. Firebase has 3 pricing plans. The first one is the FREE plan which has a threshold for usage per month of the features that are not free to use after which you will be billed. Then there is the SPARK Plan which increases these thresholds then there is the BLAZE plan which is the pay as you go plan. On the BLAZE plan, you get billed for usage only after you have exceeded the free threshold for each month.
Let us look at some of these features one after the other.
- Firebase Cloud Firestore
Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. It is a NO-SQL database so instead of tables and rows like in SQL, we have collections and documents. With firebase cloud firestore we can manipulate the data directly without the need of a backend to act as a go-between as illustrated below:
It also gives us realtime app capabilities. Watch video below for more info
You are billed based on the amount of data stored and read along with the number of reads, writes and delete. The free plan allows for 1GB storage free per month which means provided you do not exceed 1GB you do not get billed, and if you do and use maybe 3GB, you will be billed (3GB— 1GB) x $0.18
- Firebase Cloud Storage
Our solution is going to store and share user-generated images and probably audio and videos and we will need a place to save and be able to retrieve them.
The FREE plan allows for 5GB free storage after which you will pay $0.026 for every extra GB.
- Firebase Authentication
Manage your users in a simple and secure way. Firebase Auth offers multiple methods to authenticate, including email and password, phone number and code, third-party providers like Google or Facebook, and using your existing account system directly. Build your own interface, or take advantage of our open-source, fully customizable UI.
Here you are only billed for Phone authentication as it requires sending of verification code via SMS like WhatsApp. The Free plan allows 10,000 verifications per month then $0.01 for each verification afterward.
Cost Saving Tip: If your app uses profile pictures for users and it is not absolutely necessary that users can use a phone or email login, then you should leverage on Facebook, Google and other providers that already provide a photo URL so you do not have to save one to firebase storage.
- Firebase Cloud Functions
Cloud functions allow us to use a serverless architecture for our solution instead of a backend. Serverless architecture simplifies the building of the backend by allowing us to focus only on the coding of the functions and not have to worry about setting up a server, routing requests, defining REST resources and then creating methods for GET, POST, PUT & DELETE and other things required to build the backend. The code is written with node.js or typescript.
The free plan allows for 125,000 invocations, 40,000 GB-secs, and 40,000 CPU-secs after which you are billed for extra usage. Making calls to external/ outbound network calls cannot be made on the free plan, only on the blaze plan. For example, you can call google maps API from functions on the free plan but you cannot call Stripe APIs unless you are on the blaze plan.
Firebase authentication can be easily used to protect access. The cloud functions can also be used to manipulate data stored in the firestore directly. Best practice is to use cloud functions for all single and multiple write operations and single and multiple read operations that require some processing to firestore directly and perform read operations on the mobile app. Doing things this way will allow for making easy changes to a process without the need to update the mobile app.
- Firebase Cloud Messaging
One of the most important features of mobile applications is push notifications. Push notifications allow people who have your app to receive messages in the iOS notification center or android notification bar. For example, the notifications you receive when you receive a new WhatsApp message, DM from twitter and so on. Firebase cloud messaging allows us to easily integrate push notification into our mobile apps.
We can send notifications to particular devices and devices subscribed to a topic. Yes, this feature is free.
- Firebase Analytics
This firebase feature allows us to analyze and capture data about our app and our users. This data is also used to make relevant data decisions.
This feature is also free and allows us to capture up to 500 unique events in our app. You can export the data captured to Google BigQuery for further analysis and Machine Learning Kit to solve real-world problems. This data can allow us to understand and grow our users based on events captured. People who want to invest in your solution will also be interested in this data to know if your solution is worth investing in.
- Firebase Hosting
Firebase provides free 1GB static files (HTML, CSS, javascript) for front end web hosting. So we can host a web version of our consumer app using any javascript framework like angular, react, VUE here for free and 10 GB transfer per month.
6. Product Launch
Its time to launch our solution, cross your fingers. Firebase also has a suite of features to help improve the quality of your app and grow your business. They are:
- A/B Testing
- Crashalytics
- Predictions
- In-App Messaging
- Remote config
- Dynamic links
- ML Kit
…and so much more.
Thank you for taking your time to go through this article, if you like and it nd feel others too will find it useful then, by all means, do share. I will be working on a series of articles to deep dive into all topics mentioned and actually build the Beauty & Skin app from start to completion, so watch this space.
