Over the past few months, I have been meticulously crafting dypt, the ai supercharged task manager. As tech enthusiasts, we're all too familiar with the countless task management tools available, not least because it's a common goto app for new coders finding their wings.
It's a space that, despite being heavily saturated (and some might argue cliché), still left me yearning for a platform that offers an easily navigable, infinite depth hierarchy.
I wanted to be able to breakdown any given task as many times as I needed until I arrived at the nuts and bolts of the thing. This became the driving force behind dypt, my labour of love.
In my first introductory post, I shared a little about the motivation behind dypt and what you can expect from the app. I mentioned that I planned to document my journey building it out from a technical and business perspective.
So consider this, the first of a series of posts on the technical side of dypt, what makes it tick, what I've loved and what I've hated. If you're a fellow dev, or just curious about the tech behind dypt, I hope you'll find this interesting.
I've been deep in the depths of the web dev world for a while now, and I've seen the landscape change dramatically. The tools available today are nothing short of incredible, and I am excited to share some of the technologies powering dypt.
We aren't sponsored by any of these, just fans of the products and the people behind them.
Under the hood: the technology stack of dypt
First and foremost, I'm fully aware that the stack I've chosen is not the most cost-effective. I've made a conscious decision to use paid products to speed up the development process and to leverage the expertise of others.
I've learned my lesson from a few previous projects where I've tried to build everything from scratch and ended up in a rabbit hole of technical debt and endless development. I'm a solo dev, and I want to focus on building a great product, not reinventing the wheel.
I'm heavily invested in the javascript (ahem typescript) ecosystem. Love it or hate it, the tools and infrastructure available to devs in the space today are next level.
Framework - Next.js
I've chosen to build dypt with Next.js, a framework I've grown to love. It's a powerful tool that allows me to focus on the product and not the plumbing. Specifically, dypt runs on the latest version, Next 13, incorporating its innovative features such as the app directory, react server components, and the newly introduced server actions.
This is somewhat bleeding edge and so adopting it hasn't come without a few early challenges, which I plan to document in later blog posts. Ultimately though, it was all worthwhile. The design patterns and workflow make for an incredibly responsive application, both in terms of development and site speed.
The app includes multiple use cases, including static marketing and blog pages and live, user driven dynamic pages and dashboards. Next.js handles this with ease, and the new app directory makes it a breeze to organize the codebase.
The app is deployed on the edge using Vercel, a seamless and hassle-free, but potentially expensive option. I've been using Vercel for a while now, and I've been impressed by it's ease of use and how quickly it allows me to iterate and deploy.
As dypt continues to grow, managing costs will inevitably become a concern but for now as a solo dev at my present scale, it's a no brainer. What's more, edge function execution is rapid and incredibly low cost. I've been able to leverage this to build some powerful features, which I'll share more about in future posts.
Database - PlanetScale
Next up, database selection and I've gone with PlanetScale. In my opinion, PlanetScale represents today's gold standard in modern, scalable database solutions. What stands out with PlanetScale is the push and branch deploy approach and their impressive instant reverts should you ever make a nasty mistake on production. This has already saved me a couple of times.
Originally, I dabbled with Vercel's new storage offer, but it seems I hopped on a bit too early and I encounted several show stopping bugs which soured me on it. Hence, I decided to play it safe and return to PlanetScale.
Some of the other features I love about PlanetScale are their javascript edge driver, which allows me to run queries directly from the edge, and their insights tool, which has come in really handy for working out the 'cost' of my queries and optimising them to be as efficient as possible.
Database ORM - Drizzle
For database management, I've used Drizzle. This fantastic open source tool allows me to work almost directly with SQL while ensuring type safety throughout the project. An additional perk is fast cold boots as it runs on the edge and does not require a runtime to load as in the case of Prisma.
The latest release from DrizzleORM now includes relational queries, a feature that makes a developer's life a whole lot easier. They've also introduced Drizzle Studio, which gives you a beautiful UI to work with your database. I've been using it to manage my data and it's been a joy to work with.
Authentication - Clerk
Authentication is handled by Clerk. It is a delightful tool to work with and integrates seamlessly with the newest features from Next. The trade-off here is the high cost, but a promising pricing update appears to be in the pipeline.
You get a lot for your money, including a beautiful UI, passwordless authentication, social sign in and a powerful admin dashboard. The authentication flow is a breeze to work with, edge friendly and the support is top notch.
Email - Resend
Email delivery is handled by Resend, combined with react-email, enabling beautifully designed emails that reach users reliably. Resend also provides stellar monitoring and developer-first testing tools to get your emails right without damaging your domain's reputation with major email providers.
If you've spent any time working with email, you'll know how much of a pain it can be to ensure your emails are actually delivered and don't end up in the spam folder. Resend takes this pain away.
Type Safety - Zod & Next-safe-actions
For type safety and validation, I've used Zod along with my newfound love, Next-safe-actions. The latter provides some handy hooks to work with Next server actions and optimistic updates, similar to react query. I made a few contributions to the project, and I'm excited to see where it goes, it seems to be gaining GitHub stars at a rapid pace.
Visual - Tailwind, Shadcn & Framer
To help with the visual side, I'm utilising Tailwind CSS and Tailwind UI extensively. They have been significant contributors to my development workflow, and I could not imagine building without them.
They make me a better 'designer' and allow me to iterate quickly. The styling defaults are enormously helpful in allowing you to avoid the dreaded 'design paralysis' whilst also incorporating best design practices. From colour palettes to spacing, it's all there.
I've also used Shadcn for some of the ui components, it's an impressive library that makes it easy to create beautiful interfaces. Remarkable how much value it provides having only been around for a year or so.
Animations in dypt are made easy with Framer Motion, a powerful animation library that makes it simple to create beautiful, performant animations. I've used it extensively throughout the app, and it's much better for it.
Wrapping up: an embrace of innovation
Being a team of one, I am trying to leverage the brilliant work of others to speed up the shipping process. I'll share more about the costs in the future so you can get a sense of how it plays out.
By the way, I'm a chartered accountant and I'm looking forward to diving into the financial nitty-gritty of running a startup as a solo dev in future posts. Hopefully, it'll be useful for others in a similar position.
Web development today involves many intricate components, but against the backdrop of recent web dev drama, creating dypt with this stack has been genuinely enjoyable.
I am profoundly thankful for the inspiring content from some of the web's most talented creators, honorable mentions to Fireship, Theo and Josh Tried Coding, who introduced me to some of these fantastic tools.
I'd love to hear your experiences if you've been using any of these tools. Please get in touch on Twitter or Threads. What do you love, what do you hate? Am I missing out on something incredible?
Finally, whilst I have you, please give dypt a try, I think you'll find it genuinely useful and it's free. Any feedback is greatfully received - there's always room for improvement.