Flutter pet project roadmap

Often when I talk with someone about working on pet apps, I find people to be intimidated by the idea for several reasons:

1. “I don’t have time for this”
2. “I don’t know what to build”
3. “It is too hard, I can’t handle it on my own”

As a developer with a full-time day job, and an occasional imposter syndrome as my companion, I can relate to all of them. As a creator of my own app, I can assure you that you can handle this. Bunny Search app — is an app that helps users to find cruelty-free cosmetics brands. I’ve built it from scratch and exclusively in my free time, so it will serve as a great example for the pet project roadmap 🐰

Want to know how? You’ve come to the right place 😁

This is an article version of my talk at Flutter Global Summit ’22. If you prefer a video format, you can watch it here.

5 reasons why

Before diving into “how’s”, let's discuss the “why’s” first. So why should you build your own app?

1. Fun

What can be more fun for an app developer than to create and launch their very own app? To build something that excites YOU, to add any features that you want (as opposed to a client), to do anything you want with it, and all of this without pressing deadlines. Surely sounds like fun to me 😅

2. Skills

With every app I build I learn something new. I solve new architecture problems, create new UI widgets, and try out new libraries and services. With your own project, you get all that, plus you get to choose which skills to focus on and how much time to spend on them yourself. Spend days on a subtle animation? You do you 😁 (spoiler: that’s what I did 😅)

Also, working on a full-scale app and focusing on its eventual launch will help you choose the right skills to work on as an app developer. It’s easy to get lost in this vast ocean of tech tools, libraries, and frameworks and to spend time on something that you will never use.

3. Experience

Creating and launching an app all by yourself involves much more than just coding up several screens. You need to decide how to handle remote data (serverless? write your own backend? 🤔 something in the middle?), prioritize which features to work on and many other technical and product problems that need to be solved. This grants you an invaluable experience in such fields as full-stack development, project & product management, and maybe even design. And this in turn might lead to better communications with team members from these domains in your future work 😁

4. Portfolio

1. If you’re a junior developer, this is your chance to show off your skills without commercial experience. I’ve been interviewing a lot of interns & junior-level developers, and even though I don’t expect a lot of skills from entry-level position candidates, those who have pet projects usually capture more attention. Sometimes so much, that I insist on hiring even if we don’t immediately need a new employee 😉
2. If you’re a senior developer, there is a high chance that a lot of your work is under NDA and you can’t show it off. But you CAN show off your personal projects, as well as share them with the community and maybe even create educational content about them (… 😅)

5. Soft skills

Hard skills aren’t the only reward, as well as not the only requirement to be successful as a developer.

Being paid for creating an app for the client is one thing.

But working on a project of your own

• that doesn’t (yet?) pay;
• that you need to sacrifice your free time on (pet project or no pet project, there are still only 24h in a day);

requires a heck load of discipline and responsibility. Those qualities are essential both in tech and in life in general. Deliberately working on a project for a continuous period of time and actually delivering it, will grant you with skills that no self-help book can :)

Extras :)

Now, this is hard to predict and is more of a butterfly effect, but this is a continuous journey. Most probably you will use different services, engage with the community, and do a lot of research and all of this may return to you in unexpected ways. For example, I became a tech writer for a service that I used in my app, which I wouldn’t have used without my pet project. And got other business proposals that I wasn’t expecting. So put yourself out there and rewards will follow when you least expect it 🙂

You’re still here? Or maybe you’ve already run off to work on that pet project of yours? 😁

Ok, now let’s get to the more practical things and start moving along that roadmap!

8 steps how

Step 1: The idea

Obviously, the first question will be: what should you build? Well, I see two ways to decide:

1. Something that you already want to build, a problem to which you want to create a solution in form of a mobile app.
2. Something that google search suggests you build 😁

Seriously, there are so many suggestions if you just google it. Browse them, get inspired, adapt them to yourself and start building! It’s a creative process :)

The idea of Bunny Search

To understand where it’s coming from, there are a few things you need to know about me.

• First of all, I’m a huge animal lover. I gush about every cat that I meet on the street (every day, every time, yup). I don’t eat meat for 10+ years because of ethical reasons. And throughout my childhood, I had many various pets: cats, dogs, and even bunnies.
• And the second thing is that I love makeup. But the problem with makeup is that it needs to be tested for safety before it gets to the counters. Various methods of testing exist, but one of them is particularly cruel because it requires animal suffering.

Fortunately, there is a big community that fights animal testing and one of the ways is to certify brands with a cruelty-free status. There are many official and unofficial certifications, such as PETA, Leaping Bunny, and Cruelty-free kitty. But at the time the idea of Bunny Search was born, there were no apps or services that aggregated the information of several certifications. So that’s how I decided to fill in this spot 🙂

Ok, so we have an idea! What do we do with it?

Step 2: The MVP

Even though earlier I said that you can do whatever you want with your app for how long you want, along the way I learned that if your goal IS to release your app eventually, the chance of that is higher if you define an MVP (minimum viable product) and stick to it. If it gives you more motivation, you can even set up a deadline for yourself, but be careful with that, since this IS a pet project that is supposed to be fun and you DON’T want to burn out by trying to hit deadlines both at work and after it 😬

What is an MVP?

It’s the most basic version of your app, that has the minimum of features implemented, and that can be shipped to users as fast as possible to get first meaningful feedback.

So let’s strip the idea of all of the fancy machine-learning web3 blockchain whatever other hyped word there is and leave it with a minimum of plain, boring, understandable from the delivery aspect, list of features.

The MVP of the Bunny Search

1. Option to see certified brands by organization
2. Option to search for a brand by title among all of the brands in the database
3. Show details of this brand (for the initial version just the list of organizations that it belongs to if any)

Cool, now that we have our MVP defined, let’s move on to building!

What to start the development from?

I think that you can start from different points and they all can be valid, but for the sake of picking something let’s start with the design of the app and move on from there.

Step 3: The design

Now, one might argue that design is not the most important part of the app. While that might be true, I think that at this point we are pretty much spoiled with beautiful applications that besides looking beautiful, do their job too. I’ve even heard opinions that users can tolerate minor bugs if the overall feel of the application is pleasant, including from the UI perspective.

So even if you don’t do anything fancy at first, it pays off to make a little effort to make your app look decent at least.

What are your options?

1. An obvious one, but very often not possible: collaborate with a designer 😁 You can search for one on social media, and maybe you can agree on alternative forms of payment, for example, that the designer can use that design in their portfolio, etc.
2. Search for a ready, free UI kit. This is a very great option because there are many beautiful & free UI kits out there, but the downside of this is that they probably won’t cover all of your features. But then again, you can decide on one and assemble out of it the features that you’re missing.
3. Become the mythical unicorn developer and design the app yourself 🦄
   If you somehow already have the designer skills, then amazing, you’re good to go.
   If not, you can do what I did:

• Browse Dribble, Behance & Pinterest for ideas
• Screenshot the ones you like and put them all into one mood board
• Try to make something out of it yourself. I used what most designers use nowadays — Figma. It is very beginner friendly and you can quickly get a hang of it to make some basic things.

Bunny Search Design

To be a woman of my word, I really did an attempt at the design of the app myself. Disclaimer: UI is not my strongest side, I had a lot of frustrations while doing it, but step by step I did manage to do something decent enough for an MVP.

But even before the app got released, I was lucky to collaborate with a designer, who agreed to work with me for free and in the end, Aleksandra came up with what we now recognize as the Bunny Search app :)

We both work at Chili and we agreed to make a Dribbble shot of the design, because why not 🙂

Step 4: The frontend

Now that we have the design of our app, let’s start coding it. This is where the tech stack dilemma starts showing up. Depending on your experience, at times you will encounter a decision that I call “experiment or deliver”.

It means that you will have to choose between the options:

a) learn something new, experiment, and deal with the outcomes (might be a bad experiment, might not work as expected, basically, has a degree of unknown)

b) deliver by going with a safe, known solution that you have experience with and don’t learn anything new in this regard

Both options make sense and that’s a decision that you will need to make based on your interest.

Bunny Search: my first Flutter app

The idea of Bunny Search popped into my head at the same time with the wish to experiment with this new cross-platform framework called Flutter. I come from a background of years of native Android development, so I had a decision to make:

1. I know what app I want to create, and I have experience with native Android. I can code it up pretty fast, but

• a) I have coded so many Android apps during my day job and I’m a bit tired of Android
• b) it will only be available on Android and I’ll need to figure out what to do with iOS

2. I’ve heard a lot about Flutter and Chili is starting to adopt it. But I have 0 experience with it and it might impact the speed of development a lot.

As you’ve probably figured out, I went with Flutter. At first, I had to break my mind a little to transition from XML-based layout design in Android to the declarative approach of Flutter, but in the end, I’ve fallen irrevocably in love with it. And even though the development of Bunny Search was halted for more than a year for reasons not related to Flutter, I did manage to develop it to the level where I’ve implemented my own design and even hooked up the Firebase for backend, but we’ll discuss this part a bit later. And just a few months later I got my first Flutter project at work and had an easier transition thanks to that bit of experience with my pet project.

App architecture & features

And so along the way, you will encounter many such dilemmas and you will need to weigh your options in order to make a decision. I’ll briefly highlight some of the ones that I encountered and maybe this will give you some clarity.

App Architecture

When I returned to developing Bunny Search in 2021 after a break, I already had some extensive experience with Flutter thanks to my day job. Since so much time had passed, I decided to redo the app from scratch. It would be much easier than migrating, considering that a lot has changed since then.

Some of the first things you consider when creating an app are:

a) what architecture approach you will follow

b) what will you use for state management

Now, what I think about this in general:

1. If you’re interested in experimenting in these areas, e.g. try a new state management library or apply the architecture principles that you’ve heard about at a conference or something, then why not, go for it! This is the perfect place to do so.
2. If you’re just starting out and all of this sounds intimidating to you and doesn’t make sense, then you can forget these words and start building from the very basics. First, follow the beginner tutorials and avoid complicated libraries. By doing so, eventually, you will encounter problems or things that you would like to do differently. At this point, you will understand what kind of problems you have. Only then does it make sense to look for a solution, not the other way around. This is called experience and this is how you learn → by encountering problems and only then finding solutions.
3. My case was that I already had patterns that work nicely for me and I decided to leave time for experiments in areas that I wasn’t completely satisfied with. Since it’s a big topic, I won’t be diving into details of architecture in this post (comment if you want a separate post on that 😉). In short, I use clean architecture layers that are split into features on each level, I use bloc for state management and manage the state inside it via triple state pattern implementation. Great articles and very similar to how I did it are by Marcos Sevilla and Andrea Bizotto.

UI quirks

Now, since I’ve left architecture experiments behind, I’ve had time to experiment with UI a little. When I was working with Android, to my dismay, UI wasn’t my strongest side and often I avoided doing anything fancy due to time constraints. In my pet project though I decided to work on my weaker sides and not shy away from UI challenges. So when I saw that the designer had come up with a pretty, yet “I have no idea how to implement it” search bar, I dived in. In the end, I found a solution that involved maths & animations, and also wrote a tutorial about it in case you want to check it out.

Algorithms

The main feature of the app is the search, and because to search you need to type, it’s quite easy to make a typo. A “fuzzy search” approach that allows finding correct results even with typos is a feature that my app would benefit from. Even though it’s not yet ready (for various reasons, as usual…), I did experiment in this area and learned several things, such as the Levenshtein distance algorithm doesn’t perform really good on my big dataset and how to work with Isolates in Dart. One day I will finish this feature… sighs 😅

Step 5: The data

Ok, moving on to the next step. The relevance of this step depends on the business logic of your app. If your app revolves around on-device user-generated content, then good for you 😄 In my case, Bunny Search is the source of content, so I couldn’t skip this step.

There are several ways you can get data for your app:

1. Generate it yourself. For example, if your app is your personal recipe collection, then there is no other way than, well, put that data together yourself. In this case, you will only need to think about how to model that data, like what fields will it have and how to fill them in.
2. Use free public APIs. For example, you can check out this GitHub repo, which has a huuuge list of available public APIs, and check if any of them suit you. Or google any specific ones yourself.
3. Web scrape the data from where you need it. Now, it’s really important to note here, that there might be legal consequences, and only do that if you’re allowed to do that. For example, this is how we get data from some of the organizations for the Bunny Search app. But before we went this way, we contacted the organizations and asked them if they have an API that we can use for our app. PETA said that they currently don’t have the API, but we’re allowed to scrape their website if we want. So we have written permission to do that. This is also the reason why we currently don’t have the Leaping Bunny brands in our app: even though we can scrape their website, we’re still negotiating with them to allow it. We don’t want trouble.

How to organize the data?

But besides scraping the data of existing organizations, we also have our own list of brands, that we generated ourselves. This is possible thanks to another teammate of mine: before starting out with Bunny Search, I recruited a cruelty-free makeup blogger to see if she wants to collaborate with me on this app. The deal was that the app is on my side, but data generation & validation, as well as communication with the organizations, is on her side. Yana agreed and we’ve done this together ever since.

So now we have several sources: data scraped from websites and data generated by Yana. How to put it together? Well, we went with plain old CSV for now, it is all imported in a google sheets doc and when needed, exported from there. It’s not the best and most comfortable solution, albeit the easiest, but the next step for Bunny Search is to create a nice admin panel with Flutter web so that this process can be automated.

Ok, and the last step. How to deliver this data to the users?

Step 6: The backend

Now, this is the next big step that involves a lot of decisions. Let’s check out our options:

No backend

No backend, no problem, right? Well, sometimes that can work. If your app doesn’t require any communication with remote data & it can all be handled on the device, you can rely on local storage only.

The benefits of that approach include:

• There is nothing extra for you to integrate
• Data is always available and doesn’t rely on the network connection

But the major drawback is that in order to update the data you need to ship a new version of the app. Definitely not convenient! Plus you won’t gain that full-stack experience after all.

2. Backend-as-a-Service (BaaS)

Chances are that you’ve already heard about Firebase. Well Firebase, among many other vendors such as AppWrite or Supabase, offers what is known as backend-as-a-service functionality. Basically, it is what it’s called → they offer such common things as user authentication, database, cloud file storage, and many other things that you might need for your app. They abstract away the implementation & the scaling, offering you an easy-to-use API. All of this comes at a cost, although most offer a free tier that will be enough for most of the pet projects, especially at their initial stages.

So among the benefits:

• Fast integration
• Easy scaling
• Free up to a point

And the drawbacks, of course:

• Free up to a point
• Relying on a 3rd party SDK
• Firebase specific: NoSQL databases only

P.S. — If you want to try Supabase, check out this awesome article by Ana Polo.

For Bunny Search, I went with Firebase. Because at this point I had experience with it and in this case, I decided to deliver instead of experimenting (at first). I already spent enough time & nerves assembling the data for the app that I didn’t want to spend an eternity developing my own backend. Why I didn’t use other vendors? Tbh I don’t know, at that time I didn’t have second thoughts just because I already had experience with Firebase. But if I was presented with this choice today, I’d probably reconsider, both for the sake of experiments and also because of functionality. As it turned out from practice, NoSQL doesn’t really work great for my type of data and it will be even more so when I will be adding new features.

3. Custom backend

Now, if for some reason the previous two options don’t suit you, you want more control and more problems, then this is for you. Write your custom backend!

First of all, all practical things aside, this is the coolest thing you can do in terms of learning as a front-end developer. As a frontender with hands-on backend experience, you will find it easier to communicate with real backend teams in your day-to-day work and participate in more meaningful conversations. So if you need only one reason to do it, here you go.

But my advice in this regard is if you don’t have any previous experience with the backend, BaaS works for you and you do indeed want to publish your app, then 1) launch the MVP with BaaS and 2) develop your custom backend. You might not even actually use it in the end, but you will have a real use-case to develop for rather than something random and you won’t be afraid to fail it because you will already have a working version.

Ok, so I give advice and I follow it! After the app was already launched, I realized that I’m interested to expand my skills a little and tap into the backend domain. I already had an app that could benefit from the custom backend. I’ve also watched a talk about Dart being used for backend development, so I decided it’s a perfect opportunity to experiment.

One can ask why to use Dart for the backend if there are already so many time & production-proven solutions for backend.

1. Well, first of all, because I’m not a backend dev. I’ve decided to ease in my transition and start with something I already know, and that is Dart.
2. Because it’s fun and why not? I’m really curious to see how far it will go. The success of a tool, from my perspective, is tightly coupled with how the community reacts to it and how it contributes to building an ecosystem around it. Maybe it’s the next big thing, maybe not. Who knows, but heck, we’ve already made so many logic-based decisions, let’s hype a little and have some fun.
3. Ok, ok, back to being practical: there is code that can be reused from your existing flutter project, for example, data models.

So I’ve used a package developed by the Dart team called shelf and it took me about 10h altogether to write my API for the Bunny Search from scratch. It currently mimics Firebase 1:1, but I will refactor it to be more convenient. Also just recently Very Good Ventures released their framework called dart_frog (now stable!), which wraps shelf underneath and has great potential. Btw, it took me 2,5h to rewrite my shelf backend to dart_frog backend. Well alright, the whole database layer was just copy-pasted, but I still found myself a new entertainment, basically rewriting my backend with different frameworks. Cause apparently I have all the time in the world and nothing else to do. But anyways, let's move on.

Step 7: The distribution

Great, so we have built our app and now we want to show it to our friends, let them click it, and give us some feedback! What is the best way to do it?

Well, the easiest one would be probably to assemble it locally and just send the .apk version.

But if you have ever tried any CI/CD tools that assemble and distribute your app, you’ll probably never want to do manual distribution again.

If you have never used CI/CD tools, then this is your opportunity to do so.

CI/CD tools allow you to automate the building, testing, and distribution phases of your apps. You can set up pipelines for sharing a version of your app with your beta testers via such services as Firebase App Distribution, for example, as well as deploying straight to the stores.

CI/CD is an important step in the release management of real products I strongly encourage you not to skip this step. You will minimize the possibility to do something wrong while deploying, will learn new skills that will pay off in your day job, and just save some time and nerves for yourself.

There are many great service providers of CI/CD. At Chili, we use Bitrise and are pretty much satisfied with it, but in my personal project, I wanted to try something different. First of all, it would be boring to set up the same pipeline for the Nth time, and second of all, I’ve been hearing a lot about this service called Codemagic and how it easily integrates with Flutter. So on the delivery vs experiments scale this time the experiments overweighed.

So the setup of the pipelines that assemble Android & iOS builds and distribute them to Firebase App Distribution was very easy and fast, I was satisfied with this. But what surprised me more were the build times of the apps, for some reason it was much faster than Bitrise. But tbh I find the UI of Bitrise more intuitive and user-friendly.

Another aspect of CI/CD that is important is the option to run tests on your build and fail the build of the tests fail. Now, I’ve skipped this point in Bunny Search because drumroll I have 0% test coverage in it. I hope no one from VGV is reading at this point 😂 That was an acknowledged decision because it is MVP & it has very few features that are easily tested manually, but once more complex features are developed, such as fuzzy search that requires specific algorithms, they will for sure be covered with tests.

Btw, remember those butterfly effect extras that I mentioned earlier? A few months later I become a tech writer for Codemagic! And even though it’s not related to Bunny Search, that wouldn’t have happened had I not decided to use it for the development of my app.

Step 8: The release

Amazing! The app is created, feedback from beta testers is implemented, and it’s ready to be released to the public! But… not so fast. There are still some things that you need to do before your baby will see the world.

1. While you’re developing your app, it can be signed by the debug or development certificates. But once you decide to publish it, you will need to generate and sign with a release certificate.
2. You might also consider flavoring your app so that once it goes public, you can continue developing it without being scared to mess up any production data. Or in order to not send a “test dev” push to production 😁
3. In order to publish your apps, you will need to create developer accounts for Google Play & for App Store. Google Play account has a one-time fee of 25$ (I’m not sure if it depends on the country) and Apple developer costs 99$ per year (also might depend on the country).
4. App assets. Both stores require you to provide some information, as well as visual assets in order to be shown in the stores. They include short & long descriptions, app icons, and app preview screenshots in specific formats. If your app requires sign-in, then you will need to also provide credentials for a user so that the app reviewers can log in to check the app.
5. You will need to provide the privacy policy (PP), as well as terms & conditions (T&C) in form of a web link that can be accessed from your apps page. Keep in mind that if you use any 3rd party services such as Firebase, you also need to state that. You can use online generators for PP and T&C, both free or paid. Also if you work a lot with user data, you might consider running it by a legal department.
6. For Apple, you also need to provide a support website. I’ve created a simple page on WordPress that just features the support e-mail. Oh, yeah, you’ll also need to specify a support e-mail & other contact information.
7. App privacy questionnaires. This is an extensive, multi-step questionnaire in both stores about how user data is used in your app & what type of content your app provides, that is required to be filled in.
8. And you’re done! Time to publish your app… for review.
9. Once it is reviewed and (hopefully) no problems are found, it will be available to download. Congratulations! In case there are any problems, don’t worry, this happens to everyone, Apple & Google are notorious for disapproving due to very random reasons. Just fix what they ask and publish the updated version. Reviews can take some time, from several hours to several days.

What’s next?

1. Monitor your crash report system for crashes and fix them if they occur.
2. Gather user feedback, both good and bad. Decide what to do with it.
3. Analyze analytics (pun intended) to see what parts of your app are used and how, as well as what you can do with it.
4. Open source it. Or don’t. If you decide to do so, you may need to read up on software licenses.
5. Turn it into your side hustle and wire up some kind of monetization via in-app purchases or subscriptions. This will motivate you even more 😄

I hope I inspired you to work on your pet projects and debunked the myths & concerns that you had about this journey. This version of Bunny Search took approximately 8 months to develop, considering that I have a full-time job, family, and hobbies and I only spent occasional evenings and weekends, and there were several weeks in a row when I didn’t touch it at all. I spent 0 money on it, and I’ve learned tons, implemented my small dream, and will continue working on making this app more useful, as well as on other pet projects. I mean, I have Flutter, why would I not utilize this opportunity to the maximum?

Check out Bunny Search source code here & backend code here.

If you liked this article, don’t be shy about clapping, commenting, and sharing 😊

Talk to me on Twitter 🐦

Daria 💙