The "Hello World" of Infrastructure: Understanding Todo Apps
In the world of software development, building a "Hello World" app marks the very first step into coding. But for those dipping their toes into modern web apps, creating a todo app serves a similar foundational purpose. This simple task app involves a suprisingly complex interplay of components involving the client, a server, and a database, all while ensuring real-time updates to the user.
The Anatomy of a Todo App
A todo app typically involves a few basic operations: adding an item, marking it as complete, and deleting an item. Each of these functions kicks off a sequence where the client (the user's browser) sends a request to the server (the backend logic), which then talks to the database (the storage). This might sound straightforward, but each step is crucial and must be handled with care to ensure data integrity and user satisfaction.
Adding a Todo Item
When you add a new task, your input is sent from your device to a server where it gets validated and processed. The server then records this data in a database. This interaction must be fast and secure to maintain a smooth user experience.
Marking a Todo Item as Complete
This action requires updating the task's status in the database via the server. For bonus complexity points: Try to ensure that the update is reflected in real time across all devices accessing the app, requiring the use of web sockets or similar technologies.
Deleting a Todo Item
Removal of a task again involves the server and database, and must be reflected in real time. This operation might seem simple but managing data consistency across the network can be tricky.
Building a Todo App with the Vercel Stack
Today, I built a simple todo app using the tools I'm most familiar with, the Vercel stack, which includes Next.js, Clerk, Prisma, Shadcn, Vercel Postgres, and Vercel. This modern stack allows developers to set up and deploy full-fledged applications swiftly. This took me 3 hours (which should have been less than 2 if I wasn't also watching eSports on my 2nd monitor)
What a world we live in, that it takes less than 3 hours to set up authentication, connect to a cloud database, and deploy an app, and it really showcases the efficiency and power of the Vercel stack.
Check it out the finished product here and the source here
What's Next? After some success with the Vercel stack, I'm considering exploring other technologies such as Rust, Go + HTMX, and .NET Framework to replicate the process. Each technology offers advantages and challenges, and experimenting with different stacks is a great way to understand their potential, their limitations and their ecosystems.