How I Built StatusSight
AI coding, multi-platform deployments, and other game-changers that saved me time and money
Hey, Lior here! In my newsletter, I will give you an insider view into building and growing profitable online products. Subscribe here, and be sure to follow me on 𝕏 / Twitter and LinkedIn.
This week I'm back with a deep dive into the tech stack I used to build StatusSight. Whether you're a seasoned developer or just interested in building products, I hope you'll find some tools and techniques to make you more productive. But before we start, a small ask:
I would love your support on Product Hunt
I’ve been working on StatusSight for the past couple of months, and I’m super excited to launch it today on Product Hunt!
If you have a second, please go to the Product Hunt page, and show your support or leave a comment! I’d be very grateful 🙏
Now that I’m done asking for favors, let’s dive right in:
The Foundation: TypeScript and Next.js
I built StatusSight as a Next.js app written in TypeScript.
Why TypeScript? Well, TypeScript gives me the warm fuzzies with its static typing, catching silly mistakes I make before they become big headaches in production. Used in tandem with a strict ESLint configuration, it catches my bugs on a daily basis. Embarrassing, I know…
Next.js is a natural choice for me. I’ve been writing JavaScript/TypeScript for two decades, and using TypeScript on the backend alongside the front end has proven to be a blessing.
Here's where it gets interesting: in StatusSight, I’ve decided to split the Next.js app and deploy it to two different platforms:
The main app is deployed to Vercel. It has a great developer experience and a very robust platform, allowing me to continuously deploy new versions several times a day.
The “status checker”, which is the service that crawls 3,000 status pages every minute to look for changes, lives on a dedicated inexpensive Hetzner server managed with Coolify (an open-source Vercel alternative).
Why the split? Simple: cost and efficiency. Vercel’s pricing structure is complex and tends to be unpredictable. It’s suitable for building a web application but tends to be very expensive for services that run 24/7. With my own Hetzner server, costs are capped and predictable. I only utilize Vercel to process status pages when there are actual changes to the status page, which reduces the workload by 99%. My wallet says thanks.
My New Coding Buddy: Cursor with Claude Sonnet 3.5
Okay, this one's a game-changer. StatusSight is the first time where I wrote an entire project using Cursor with the continuous help of AI, and let me tell you, it's been a revelation.
I have tried Cursor before with my OpenAI API keys, and it was... fine. Marginally better than Visual Studio Code paired with Copilot. But then I took the plunge and upgraded to Cursor Pro and actually took a few minutes to learn what Cursor Pro can do. Holy smokes!
I disabled GitHub Copilot and started using Cursor's built-in capabilities for AI code completion, editing, and chat. The difference is night and day!
But wait, it gets better. In recent weeks, I've been using the new Claude 3.5 Sonnet AI model in Cursor, and my mind is officially blown.
With the help of the AI, I now write complete features, identify bugs and remedy them, and answer questions about the code. Since I started using it, I've barely touched Google, StackOverflow, or ChatGPT for coding. It's like having a super-smart coding buddy who never sleeps or gets cranky.
Whether you’re a savvy developer or new to coding, I highly recommend you give Cursor a try (it comes with a two-week Pro trial) and see how much it can increase your velocity.
Making It Pretty: Tailwind and shadcn/ui
For building the user interface, I went with Tailwind CSS and shadcn/ui.
I was skeptical about Tailwind when I started using it, but after a while, I found it helps me create better-looking apps faster. Once you learn the ropes it’s faster and easier than writing CSS. It’s also more encapsulated, so the styles are easier to understand and maintain as the codebase grows. Furthermore, it’s a great guardrail to ensure the UI stays fairly consistent across the app, with normalized spacing, font sizes, colors, etc.
shadcn/ui is a set of well-crafted components that you can install with a single command. I often had to tweak the default shadcn/ui components for StatusSight, but here's the thing - it's easy to modify, and even the modified versions are much better than anything I'd create from scratch. Why reinvent the wheel when you can just add some cool rims?
Pro tip: Keep an eye on V0. I played with it and I'm considering it for my next project - it looks promising for speeding up the initial UI brainstorming and development.
Email Magic: React Email
Last but not least, let's talk about transactional emails. You know, those email notifications StatusSight sends whenever a service has an outage? I needed a tool to dynamically generate the HTML for these emails, and I heard good things about React Email before.
First time using it, and wow - what a fantastic developer experience. Imagine designing your emails and seeing all changes in real-time in your browser. No more sending a gazillion test emails to yourself.
Also, creating emails that work across different email platforms and clients has traditionally been a pain, and React Email abstracts all of that and create emails that look and work well everywhere.
It's so good, it almost makes me want to send more emails. Almost.
Wrapping Up
So there you have it - the technologies I used in order to build StatusSight.
While StatusSight is one of the more elaborate products I’ve developed recently, thanks to these tools, I believe my velocity as a developer has at least doubled.
“Give me six hours to chop down a tree and I will spend the first four sharpening the axe”
I’m not a big fan of chasing the shiny new “tool/framework of the day” since it’s often a distraction from building and shipping a product.
Having said that, AI-powered developer tools and no-code tools improve at an exhilarating pace, so now is a good time to explore the latest tools.
You might find that by investing one day in learning a new tool and “sharpening the axe,” you can significantly increase your productivity and save yourself months in product development.
Happy building, and may the force (of AI) be with you!
P.S. If you haven't checked out StatusSight yet, we're still live on Product Hunt. Your support means the world to this indie hacker!
Until next time,
- Lior
This newsletter is 100% free. Answer 4 short questions to help me make the newsletter more relevant for you.
Here are some of my products that can help you:
StatusSight: stay ahead of third-party service outages with custom health dashboards and email alerts
Competely: get a full competitive analysis for your product or idea within minutes, with the power of AI
Flawless: get AI-powered actionable suggestions to improve usability, conversion, and messaging for your homepage or landing page
BookAuthority: level up your skills and knowledge with book recommendations by experts and thought leaders