We’re in the midst of a lockdown here in Belgium, so I’ve got plenty of time to work on my side-projects.
One of these side-projects is Filterlist.
Walkthrough of the Filterlist app
Filterlist is an app for iOS that helps you find Instagram filters and filter creators. It’s made with React Native and I decided to use a TikTok UI: Simply keep swiping up to discover new filters. It’s like a big infinite scrolling interface.
You can download it from the Apple App Store if you have an iPhone.
Instagram makes it very hard, or at least not easy enough IMO, to find cool Instagram filters and their creators. Remember those “Which X are you?” filters from February? The only way you could find one is if you came across one. As a filter creator the only way people can find your filters is if they come across using one or if you follow a creator already.
Then you will see filter suggestions when you’re making a story.
Those 4 filters next to the camera button are filters by creators
So I set out to make the first Instagram filter discovery app.
As a React user developer, and I have some basic experience with React Native (I used it to create my first app - 36Q), I was going to go with React Native.
It took me a while to get the UI just right. Also I learned a lot about VirtualizedLists in React Native, and how to optimize them. The homepage (and the creator page) are just a VirtualizedList that loads the videos with an infinitescroll system.
And I just could hook a listener to it that every 6th screen you see, an ad overlays it. That way I can recover some money from my Google Storage bill where 20 gigs of those videos are stored.
There are three things on my to do lists for this app:
The first one is a better randomizer. Firestore has no way to get random elements from the database. So when you press the randomizer button, it fetches more filters, and then shuffles it, so you don’t always see the same. It fetches 50 filters each time, so if you hit refresh right away, it shuffles between the first 100 filters. Not ideal, but better than nothing.
Another thing I want to optimize is the creators page. As I have 500 creators right now, and more and more people are DMing me on Instagram and Reddit the names of other creators, this might potentially be a huge list. Right now this is also paginated with Firestore, which makes it hard to add a search field. It fetches the creators alphabetically, so if it has loaded the creators A to H on the client side, and you search for @jelleattheoffice (😉) it has to go look for it in the firestore database. And ideally it would also fetch the creators H - J, right? Or maybe H - L, so you can scroll down a bit without it having to do a second fetch right away. So that’s on the roadmap as well.
The third thing is to do some proper marketing. I created an Instagram ad to promote App Installs, but that was not a success. Posting it on Reddit did not yield a lot of extra installs it seems. So I have to see how I can attract the masses. As people have some time on their hands right now, this shouldn’t be too difficult.
One thing I have done tho, is create a website. You can find that one on MyInstaFilters.com. I bought the domain name before I was even thinking about making an app, and I didn’t like the idea of calling the app My Insta Filters.
I honestly think it’s one of the “slicker” websites I’ve ever created (apart from the submit creator page). It also takes care of some cool optimizations, like memoization and virtualization - that’s a lot of -izations.
It’s built with Gatsby, which was a mistake. Because Gatsby is a static site generator, the site needs to be rebuild every time a filter or creator is added. Right now I’m tracking over 500 creators with over 20k filters. Filters and creators are added daily (well, not right now as Instagram reviewers can’t work because of the Corona virus), so I’d need to rebuild it every day. I am setting up a Github CI/CD flow to automate that part.
That’s my to do list for the coming few days. Enjoy discovering new Instagram filters and don’t forget to rate it in the App Store!
