From Idea to Deployment in a Weekend: How I Created Calculizky, a Web App for Expense Management

Izky
3 min readFeb 8, 2024

--

On Friday night, as I was getting ready for an outing with friends, an idea popped into my head out of nowhere: How could I get a clearer view of my monthly expenses in a more agile and accessible way than my reliable but tedious Excel spreadsheet? That’s when I came up with a tailored solution: a web app to manage all my financial transactions, providing me with precise information about my money and accessible from any device.

Web App Development — Stack

With the determination to make this vision a reality over the weekend, I organized my thoughts in Notion and designed a simple mockup outlining the few views the application would require. I decided to use my preferred development stack: React and Next.js for the front-end, shadcn and Tailwind CSS for styling, and recharts for the charts. Authentication was handled by Next-Auth, and I ventured into the world of databases with PostgreSQL.

Technically, perhaps the most complex part was the table composition (it always is) and its customization. For this, I used tanstack/react-table since it allows incredible customization of all components. Understanding how the different types of recharts charts worked wasn’t a difficult task, although formatting the data might have been.

Then, on the backend side, I understood one very important thing: don’t code without thinking about the models first. First of all, you have to know how the models will be composed, what type of data they have, and what relationship they have with each other and with other models because once that’s established, the slope isn’t so steep anymore and everything costs you much less.

Calculizky walkthrow

What I Learned in these 3 Days

As I delved into the development of Calculizky, I faced technical challenges that allowed me to expand my skills and knowledge. Learning PostgreSQL from scratch was a challenging yet enriching experience. I discovered the power of Prisma as an ORM to handle communication between the front-end and back-end efficiently and effectively. Each technical obstacle represented an opportunity to challenge my knowledge and improve my skills as a developer. Problem-solving became an integral part of the development process, and each solution found brought me closer to my ultimate goal: deploying a functional and useful application in record time.

Calculizky Categories charts

Deployment and Future Perspectives

By Sunday night, the web app, which I decided to call Calculizky, was ready to be deployed. The front-end was quickly done on Vercel, while the backend required more effort and time due to my lack of experience in the field, although I ended up finding a good place to host my database at neon.tech. As of today, Calculizky is constantly evolving. I am working on adding new features and improvements to make the application even more useful and accessible for me and for anyone interested in managing their expenses efficiently. The idea of being able to create your own categories or track your expenses with a credit card is some of the upcoming features.

Conclusion

Designing and bringing Calculizky to life in a weekend was an incredible, highly rewarding, motivating, and enriching challenge for my work as a developer. Beyond delving into new technologies and codes, the experience taught me the importance of planning (a big challenge for us devs), persevering, and always being in a constant state of curiosity.

The best ideas arise when you least expect them, and with determination and effort, it is possible to bring them to life.

So, now you know, you can start using Calculizky to simplify the management of your monthly expenses. It has an easy-to-use interface and features that allow you to customize the control of your finances from any device.

--

--