Well if a day is 24 hours and 2 days does not mean 2 consecutive days and 48 hours non-stop, then this actually is not a clickbait, otherwise — it is.
The goal — is to create the Flutter app with beautiful animations in 24 hours. Why? For the sake of challenge, I was never to a hackathon so I did one for myself. Reality? Took me 48 hours from the very first line of code to pressing publish at both app stores.
Here is the app:
That’s a long story short, if you want to know more, keep reading, if not, at least read the conclusions at the very bottom.
What and why
Ok, so you already know the goal, but what was the motivation, and what is the actual app?
Before focusing on other projects that I have on my to-do list, I wanted to create a Flutter app with some cool animations and haptics, just to prove to myself that I’m capable of doing so and to get better at it. On the other hand, I didn’t want it to take me too much of my precious free time, so I decided to do it in a form of a hackathon, technically taking me one day of work and one day of recovery, so a weekend — sounds cool right.
And the app? Nothing groundbreaking, simply an interval workout timer app. Why? I love working out, intervals are great, but all of the free apps that I have used were either ugly or had tons of annoying ads. My app lives on the premise of minimalistic, understandable but beautiful, and nicely animated UI, quick and easy setup, and no ads FOREVER. Also, such a kind of app is simply a good use case for some animations.
Imagine, you want to do some Tabata workouts but you haven’t done them in a while. You download the first app, boom, wanna subscribe to a pro version? No? Ok, you manage to set it up and press start, boom an interestial add, same after the workout. I mean, sure, everyone wants to earn some cash, but come on.
And then you could download my app, it opens in a split-second and you have a default Tabata routine predefined for you, 2 clicks and you can work out without any obstacles.
So the idea was to get it done in one day, but there was a cheeky handicap that I wanted to have — to have everything planned in before, that means todo/task list arranged in a sensible order, architecture, plugins that I want to use and even mockups already in place, so the only job left was coding and publishing in those 24 hours. Let’s go through every stage of this journey!
I obviously started with the wireframes, to lay out all of the user interface elements and have a good base, I feel like that is an absolute must before you code any app. That’s how it ended up:
I used the Concepts app together with my iPad and Logitech Crayon. It doesn’t have to be pretty, and certainly is not as I have no drawing skills at all.
The next step was to create something more defined, actual UI Designs, and this was the first time I was doing it. It was definitely a cool experience to be on the other side of the process, or actually on the both at once— designer and programmer. I’ve used Figma as that’s the tool I was most familiar with. Here are the results:
I used an iterative approach, created a screen, and came back to it after some time, to check what could I improve. In the top left, there are first versions, evolving towards the right and bottom. My screens are clearly inspired by Figma and Notion as I love their minimalistic UI style.
Also, Figma mobile app is an absolute live saver in the process of validating your designs, as you can wirelessly mirror them on your phone. This has instantly highlighted some issues in my designs, like too small font or inconsistent spacing. I definitely wasn’t trying to create pixel-perfect designs as I didn’t need to because I was the one that would replicate them later on in code, so I didn’t waste my time on that. In the end, I am pretty satisfied with the results overall!
I also established the colors used and prepared a backlog of ordered and pretty granular tasks that I need to do in order to have an acceptable MVP. Obviously, I still had some unanswered questions which I decided to leave and solve when developing, as I was getting impatient with all the planning but no work being done. I kept all of that on my Notion page.
Woke up pretty early on Saturday that was meant to be the day. The vision of coding 24 hours non-stop was thrilling as it reminded me of University times and making OOP projects during the night before the deadline, those were the good times.
It went well for the first few hours and I was able to quickly bootstrap quite a lot, but as issues started to pop out, I was losing traction. I quickly realized that there is no way that I am getting that done in 24 hours and that I cannot be truly focused for such a long period of time. I mean, I might be able to wrap up a shitty MVP, just like those University projects that got me D grades, but that was not the goal and I knew that I wouldn’t be satisfied with the results.
I simply got old and prefer to have and do everything in moderation but more often rather than to go all out. I decided to give up the idea of the 1-day app and transitioned to a 24-hour app. By the way, I always track my time on my side projects, on that day I had ended after 12 hours.
I had to focus on other stuff like my Flutter’s beginner course in the Polish language and the Christmas came so my efforts were spaced out and reduced. Anyway, apparently, 24 hours were not enough as well, so I doubled it to 48 hours and continued, as at this point I just wanted to have a solid MVP that I would be satisfied with. I had some really annoying issues with audio ducking (an article/tutorial on that is in the works) that took a few solid hours of my time and a few responsiveness issues on smaller devices.
And indeed, it took me 48 hours in the end, as the old saying says:
You will always spend as much time on the task as it was estimated to take.
Most of the tools I had used in the past for creating app store screenshots were then placed behind the paywall, and I do not really want to pay a subscription for a tool that I may use once every few months, an export fee would be fine though. So then I found this absolute gem, AppMockUp and it was a hassle-free experience that I loved. If you use that tool, please buy an author a coffee (I did), they deserve one! Approval times were quite long but at least there were no issues with the app and the first build was fine, that never happened to me before! I picked a random free name with some keywords and here it is — Simple Interval Workout Timer.
It took twice as much as I planned but I knew that it was a bold idea, and in the end, I released a pretty polished interval workout timer app that ticks off all of the boxes that I wanted to. Nice looking minimalistic UI, cool and smooth animations, functional, easy to use, quick setup, forever free, and ad-free. Ah, and I use it by myself so even if it will help just one more person — I consider it a win.
The most important part of any process, and the most valuable to you.
- It is worth doing more detailed mock-ups because you will encounter issues in the design phase instead of in the development phase and it is cheaper to fix them at this stage.
- Figma mirror is golden, seeing the designs on the real, physical device gives much more than seeing mockups on the virtual frames.
- You will postpone the deadline anyway, do not focus on that if you are doing it for yourself.
- Hackaton like attitude is great for swift bootstrapping of the project if it is fairly small, but that’s it, do not build a whole app like that.
- I know it is tempting but if you are an indie developer it is better to focus on one side project at once, or at least do not plan two deadlines/releases near each other
- The last 20 percent of tasks take 80 percent of the time.
- Now I know why Figma sheets on bigger projects get huge and messy real quick, it takes serious effort to keep them clean.
- That one is obvious, but cross-platform development is godsent for indie devs, if not for Flutter, I would have at least twice as much work to do and it would require almost twice as much knowledge
Thanks for reading! I love feedback, so if you have any regarding the app, article, or the whole process, please share it ??.
Let’s connect on my socials.
Mobile App Development Best Practices – 28.09
iOS Decodable CoreData: A Proof-of-Concept for Building Offline-First iOS Apps The Future of Accessing User Location in SwiftUI Create SPM...
What is Dependency Injection
The primary goal of dependency injection is to reduce the coupling between components by removing the dependency resolution responsibility from...
Dependency Management in a Multi-Module Project – THIS Is How You Need to Do It
⭐ Learn how to make apps scale with a multi-module architecture.
Raspberry Pi 5 microcomputer unveiled
At launch, the Raspberry Pi 5 will come with several RAM options: $60 for the 4GB version and $80 for...
Cashew – Personal finances on Flutter
Cashew is a full-fledged, feature-rich application designed to empower users in managing their finances effectively. Built using Flutter – with...
Mobile App Development Best Practices – 27.09
Swipe Actions from Scratch, Effective code reviews for Android developers, WebP exploit and more!