Capsule — making a chat app with Flutter and Firebase for iOS and Android
This is my first mobile app, and I am excited to share my experience with you..
- Visit Capsule’s website: https://capsulechat.com/
- Download from Google Play
- Download from AppStore
What is Capsule?
Capsule chat enables you to talk to your friends and family and send them scheduled messages, it also allows you to write your diaries and schedule when they should appear for you. Send messages as reminders to your friends, or reveal the secret of the future by using the long-press scheduled messaging of Capsule Chat.
Capsule is free and very simple to use, no need for email, usernames, or passwords, just register with your phone number and check who is using Capsule from your contacts. Capsule is yet in its early stages, but we have lots of exciting plans for it!
Development
When building an MVP or first go-to-market app it’s best to keep things simple. You might get a lot of users or just a few and even the timespan in which this happens might take a long time.
To keep things simple using Flutter is already a great choice if you want a native-feel app for both Android and iOS. If you come from reactive front-end development you will feel at home with Flutter. Another choice would be to use web front-end with a native wrapper producing an installable app as well.
But to make things even simpler I decided to use Firebase for our backend. Thanks to the great work at Google, Flutter has great compatibility with Firebase. You can start using almost all Firebase features for free.
With Firebase Authentication you can easily set up any authentication method, even Phone SMS based authentication, and that is free as well.
As for the rest of the backend there are painful decisions that have to be made. The de-facto architecture of a web app today has consists of REST APIs that reach backend code that represents the business-logic, which usually uses a RDBMS to store and query data. Developing these take a lot of time and it’s not always ideal when you want to create an MVP to test your idea with the market.
Firestore is a good choice to avoid these complications. It’s a NoSQL cloud database with client libraries for data manipulation directly from clients. Obviously this has security concerns but you can set rules in Firestore to validate and restrict access. This means some of our business-logic and the data manipulation can live in our Flutter app further simplifying work and helping ourselves go to market sooner.
Capsule also uses Cloudinary, an image media CDN with some super comfortable features like on-upload and ad-hoc transformations like resizing and cropping which we use when you upload a profile picture. They also have a free tier to help us get started.
We also have a Node.js server running on AWS EC2 that takes care of sending scheduled messages 😉
Design process
For designing I used Figma. I used to use Adobe XD but in my opinion Figma is a different level, although Adobe is trying to catch up.
I’ve found that designing a mobile app is much easier than designing a webpage app. The screen is restrictive enough so you can’t clutter the screen, and simply there are de-facto design standards in mobile app UI and UX, and by now they are even more standardised with the Material UI design system of Google’s Android and Cupertino of iOS. If you go by example and follow these systems, and use their components nothing can really go wrong.
Here are some screenshots of Capsule’s Figma
Development process
Developing the whole app took about 4 months as a side project, ~12 hours a week, ~16 weeks for one engineer. So calculating it back it would have taken about 5 weeks as a full-time project.
For tracking my work I used Atlassian’s Jira and Confluence and all their magic. Creating kanban cards, a roadmap and documentations was super helpful. The code lives on Github with no CI yet. I used VS Code mostly and sometimes Android Studio and XCode, especially for their emulators.
Flutter has great integration with VS Code, and hot reloading feels like you are developing a web app.
I won’t go into the details of Flutter development, but it has to be said that this was 95% of the process. I learned a lot thanks to this project. The sources that helped besides https://flutter.dev/ and https://api.flutter.dev/ were a bunch of Youtube, StackOverflow, Github and reading Flutter source code.
In the beginning, and well before starting this app I spent a lot of time researching how to develop a Flutter app in the first place, and then finding the right packages. It has to be said that Flutter development depends on a lot of community libraries, although this is the same for the web… Coming from React front-end development I found the right packages to reach that productivity, but also keeping the code clean (as much as possible).
Here is a list of some of the essential packages that I would use again: https://gist.github.com/najibghadri/8836eeeaaff8cdad85dc1bb6623e2d8d
I want to highlight flutter_hooks and hooks_riverpod for state management. I think it’s really worth giving them a shot for a production app.
In order to develop Flutter for iOS you need to have Mac machine to use the emulator 🤷♂ 😏. That’s just Apple at it.
Release and marketing
To release a mobile app decently you have to 1.) make some nice marketing visuals for the app stores 2.) have a simple landing website.
The landing page https://capsulechat.com/ was made using Gatsby. The other choice would have been Next.js, but that is too much for our purposes, as Gatsby is great for static websites and Next.js for dynamic ones. The landing page has some nice visuals, links to the apps and terms and conditions and some promises for the future.
The visuals were made with Figma, as you can see in the screenshots above. The fake mobile frames are available on the internet from other public Figma designs. There are some Figma quirks you have to know to produce them but everything can be learned.
Android — Play Store
To publish an app there are some administrative tasks to do.. Not fun, but now you are just too close to the finish line. The Flutter app has to be built and published in https://play.google.com/console/. Registering a Google Play developer account is 25$ and getting the app approved takes about a week. If the app is not monetized and ad-free it’s simpler to submit.
iOS — App Store
For iOS building the app is also well documented. To publish you have to register at https://developer.apple.com/ and pay 100$ annual membership fee for Apple 💸. The process took a lot more time than with Google. App submissions are reviewed more thoroughly and the policies are stricter. You might be rejected a couple of times until you bring the app submission to a state that’s accepted.
Conclusions
As I said before, these tools are great for building an MVP. The cloud providers are free to certain limits, and if you hit those limits you have already won, and you can then think about reimplementations and scaling and all those things. Of course everything should come in its time, and cost-performance-maintenance optimisation is always a ballet dance in software development, no matter the size of a product/company. Having the knowledge what to do, what to choose is the way to do things right, but people with passion will join and help you.
Upcoming work
If the app is in demand we plan to build the following features:
- E2E Encryption using Diffie–Hellman key exchange and QR codes
- Unschedule messages
- Group chats
- View upcoming scheduled messages
- Image, video and audio messages
- Languages
- Sound notifications
- Typing and online presence indication
- And more 🤞
