Forty

After chatting with some friends and users I had figured that it would be pretty hard to convince someone to pay for an app while barely even using it, even if I had a demo available. It would be cool if I could get users to sign up and have them instantly able to begin using the app. I figured if I was able to get it in the users' hands, then I would later be able to convince them to pay for it.

So I went ahead and updated the app to support a free tier. User's can now use Forty for free. They get 1 project and 4 tasks managed without having to enter a credit card and they can record as much time as they would like.

I thought this would be a good way for me to grow the user-base as well as get valuable application feedback for now.

Looking forward to seeing users get their hands dirty with some time tracking!

https://forty.app

I found that I was getting some new visitors to the site, via a few channels like IndieHackers and HackerNews, and I was even able to get a few signups from these visitors, but I found none of them were converting into real paying users. I deduced that it would be fairly difficult to convince someone to pay for an app by only reading the landing page and seeing the screenshot so I decided to implement a demo page [1] where anyone can go and experience Forty without having to signup or pay.

This required a bit of a restructuring of the codebase because of the way the API was working, but after some refactoring of the API I was able to launch this demo page. I'm excited to see if this pushes the needle on conversions.

Would love any feedback!

[1] https://forty.app/demo

What the heck is SSR-Auth??

Let me tell you by giving a bit of background. The auth flows on Forty are handled via Firebase, when you sign into the website the first time a private Firebase cookie is stored in the browser. When you visit the website again, that cookie is retrieved by the Firebase SDK and automatically logs you in (all on the client side). Now this is super handy for SPAs (single-page apps). However, when we're using modern frameworks like Next.js, we want to pre-render pages on the server for the first page load, which isn't possible if we can only log a user in on the client-side. Now, because the Firebase SDK writes/manages that private cookie, we actually don't have access to it whatsoever (good for security 🔒).

So how can we enable server-side rendering for an already logged in user? Let's create our own cookie! This cookie needs to be something we can validate as a valid user credential on the server. We can store a short-lived user token, from the Firebase SDK, in the cookie, which we will validate using the Firebase SDK in the backend. As long as we send this cookie to the backend during the initial page load, we should be able to pre-render the entire application for the user, with all of their data (no screen flashes!).

Long story short, Forty now supports server-side authentication using cookies! I plan on following up this post with a blog post with some code snippets. Happy to dive into the details in the comments :)

Still stranded in the Caribbean, I spent a sunny morning creating social media accounts.

Created an IndieHackers Project (probably far too late, but better now than never) https://www.indiehackers.com/product/forty

Created a Twitter Account - https://twitter.com/fortyapp

They understood it, which was fun to see. But it was at that time I realized I had built the entire website from my Mac and had not designed it for mobile experience at all. When you tell most people about an application or website, the first thing they do is open their phone and navigate to the URL. Well it was then I realized, even if people aren't using the app on their phones, they should at least have as good landing experience so I can convince them to signup and use it on their desktops.

I spent the next couple hours tweaking the css to work on mobile, and surprisingly it was a breeze. Using tailwindcss.com has made light-years of a difference. Just by adding a few more classes the entire app when from a horrible experience to something looking explicitly designed for mobile. I can't recommend Tailwind enough!

The last few months were busy with work and working on other projects that I had mostly neglected Forty. But there was something about this project that was driving me to finish it. I had built most of the core application and wanted to launch it officially. So just as the world was being swept by a pandemic, I travelled to the Caribbean with a friend where we spent our days working on the balcony and in the sun.

I spent a good deal of time putting the polish on forty. Creating a landing page, connecting stripe integrations, setting up firebase authentication, firestore (database) and analytics, configuring hosting and DNS on now.sh.

I've recently gotten so excited and intrigued by new frontend technologies and serverless arch, namely Next.js. I'd played around with it on a few other projects but wanted to start a new project from scratch using the lessons learned from those.

I'm not much of a designer myself, so I also wanted to leverage some front-end frameworks that would make my job easier. This is where Ant Design and Tailwind CSS came in. Both of them in conjunction seriously enabled me to spin up the UI of this app in a fraction of the time compared to me writing and designing all of the frontend myself.

Over the Christmas holidays I had a lot of free time (in between turkey dinners) to spend working on this. I managed to get a lot of the functionality of the application, timer tracking, form submissions working in the matter of a week or so.

Then I had to go back to reality and to my real job in Seattle.

I'd downloaded literally 10+ time tracking apps and they were all so complicated to use and meant for large enterprise solutions. I wanted something dead-simple but couldn't find it. So I decided it would be fun to build one.

This was the genesis of Forty.