BeABetterFriend.app
it's finally here! Be A Better Friend the App.
Completed & available for both iOS & Android, free and private.
Thought i'd share a little bit of why & how it was made.
The Why
The main problem arose from not having all my friend's information in one neat place and how I forget my friend's birthday all the damn time.
LIKE LOOK AT THIS, SHE MADE ME THIS FOR MY BIRTHDAY and what did I get her?
Nothing. I forgot 💀
So originally I started using an Obsidian Template (Which didn't work anymore since I moved to VS Codium) and plain old .md files. It worked but it was stuck to my pc, it didn't have the portability. It also depends on me checking my notes, I thought why couldn't it just have been automatic, I get a notification when my friend's birthday is near?
So I came up with an idea for an app, mind you I have never developed an app.
My only experience with coding is JavaScript & Python, with some knowledge of Lua, GodotScript & C. I soon found out about Capacitor from Ionic which allows me to use my own framework (none, in my case) and creates a web/app for both android, ios and web.
The How
So yeah the tech stack is:
- HTML
- CSS
- JS
- Capacitor
- SQLite
Yup all plain, no frameworks or anything fancy. Should have definitely used one...
If I made the app in one day, sure.
but oh boy maintaining pure JS is really something.
The Logo
As I was making the app, I got the name Better Friend. Kinda on point but after searching and seeing no apps with that name and some domains free'd up for it, I thought why not?
As for the logo I always had an idea of what I wanted it to be, like a clover, or a group of friend's hugging. And purple, I don't really know how to explain it but the logo and color, I was already dead set on what I wanted. Purple felt like a really neutral color and new, didn't want to step on other apps toes (youtube red, amazon prime blue, etc)
I got my mom to work off some very isometrical doodles I made and she made the end result. It was perfect, 4 hearts with the space touching removed. And then it kind of stuck. Purple, 4 and the clover. I really like it.
Developing
As for developing it was long process, mainly because
Getting a Mac
So after reaching a point, I realized I needed a macOS device that runs the latest version, so I can test and publish the app. The problem is the oldest mac we had was 2012, which was several versions behind. After researching and going around used selling groups, the best thing I found was a 2013 MacBook which again couldn't even run the latest version. Time was running out, I had a couple of colleagues I could borrow their Mac but none of them are programmers so I'd have to download XCode, Node, etc and probably would have to use it multiple times, which could be inconvenient since they all use it for work.
I even considered telling my friend from over sees to bring me one, the problem is it would be way out of budget. So I was even considering giving up, swapping to MacInCloud or something similar. Then it happened, my Dad searched on Magalu and out of nowhere, there was an officially sold by Magalu, brand new and not sold by a stranger, for 2500 reais (Literally the price of some used 2012 Macs people were selling). It was the perfect version to, a 2018 Mac, i3 with 8GB (Upgradable), anyways we bought it asap. Two days later it showed up, and after updating it it ran the version Sequoia, it worked. Then for curiosity I checked the Magalu store again, to see if it was still in stock. And it was, but the price went back up to almost 7k reais.
It really was a miracle.
Then I became a shill for mac and sold my gaming laptop for a M2 on black friday.
macOS is genuinely really good, it just works and required so much less debloating to make windows actually usable. Another blog idea, my favorite macOS extensions, just gotta write it. 😩
Procrastination
Then I procrastinated for almost a year.
Mainly had a lot going on my life, specially with work. Didn't wanna code after spending the day coding hahaha.
And I don't know but I lost motivation, mostly felt kinda dumb for making it? I don't know how to explain it, like it was gonna flop. Even I stopped using my OWN app, how crazy is that?
The project got in a weird state where I didn't really update it. It had a lot of really horrible bugs that I couldn't find out how to fix, but in retrospect I hadn't really given it my all to fix it.
What got me out of that trance was working on the site and consistency.
And I also realized it would be so much worse if I got so close and didn't release than release later than never or someone else did my idea.
Site
Instead of working on the app, I procrastinated on the site which has a much nicer tech stack, NextJS, TailWind CSS & React Bits, and it was awesome.
I really didn't get the whole hype but wow it's so much easier to edit in the long term, like just swap the pre made blocks or tweak a bit of the code. Especially the swap from the site not live to being live, was so great. Just swapped a couple of componentes, bada bing bada boom.
BUT THERE WAS A PROBLEM.
HOW ON EARTH DO YOU SELF HOST REACT WITHOUT PORT FORWARDING?
HTML/JS is just a file so it's much easier, my NextJS I made it so it's a server. What I did instead of paying a measly 10 dollars a month was, I self hosted Coolify + Cloudflare on my old gaming laptop. I love this little set up so much (Still need to fix my current fix of redirecting, the url is new.beabetterfriend.app and not beabetterfriend.app)
Take that tech overlords, i'll publish a guide on how to do that eventually. It's a great experience and honestly can't wait to use it for more projects. It was a small pain to set up but man i've been testing and playing around with it, so awesome.
Testing
Gotta say huge shoutout to all my friends who helped test the app and downloaded it, just the fact someone sent me a message asking hey tom, where's my app? or dude that's such a good idea.
it really made my day in such an unimaginable way, it really felt like what I was doing had impact. I think like 4 of them know I have a blog hahaha, thanks guys!
Challenges
Translations
I want the app to be for everyone, that's why having support for multiple languages is such a fundamental feature.
The problem is I only know 3, what about the rest? I could get friends to help me out but the way I currently have it implemented needs to be improved. So I create a repo inside a repo, that way the repo inside is public so it's super easy for anyone to add languages (super easy if you know github. May make a nice front end for this soon).
Check it out here and would love it if you could contribute!
File loading
So for some reason the way files are loaded is pretty weird in Capacitor, not sure if it's just for it or all apps. But basically the issue is that trying to load a file after the app is running, a .json or .svg. The path would be wrong so what was the solution? Just make all the files .js and preload them.
Yeah I don't know if it's "optimal" but hey it works, really simple solution.
Platform differences
Funnily enough I still had to account for platform differences, Apple handles permissions a little differently and for some reason on their simulator camera's don't work, so I made it instead work on just gallery. Then there was the floating island too, the little notch so my genius solution was padding of 10px.
The other stuff
Making an App is half the battle, what about the designs, marketing and videos? I could make a ok video but nothing too crazy, luckily one of my friends was down to help me in video editing. It was a little rough the first time, but learning from it and experiences from my work, I think the next few videos will come out better.
As for graphics, it was my Mom again that helped me & Mockuuups Studio, I gave her a few examples of what I had and she made some great work. I really like how the last image of the app on the stores, it's just people because that's what the app is, it's a helper not a replacement. The gradient was a nice touch too.
Retrospective
Definitely embarrassed with how long it took me to get this out, almost a full year for a simple offline app (ffs) but i'm still quite happy for the journey, all the ups and downs. How much I grew coding wise, Glad I managed to release the app before apple charged me another year too, (yikes) I get it why every extension is paid now on macOS.
Overall a lot of money was spent, I rather not think about it 😭 but hey at least I can brag i'm an app developer now.
The Future
I do want to keep updating the app, already got some bugs that need ironing out & features to add.
Do check it out here, https://beabetterfriend.app, I still need a couple more testers for android to publish.
Oh yeah and WIDGETS! LIKE HOW DID I NOT THINK ABOUT THIS EARLIER FUC-