• punchtime
  • Posts
  • How I built a webApp in 24h with AI

How I built a webApp in 24h with AI

AI is evolving at an unbelievable pace. By the time you read an article, there’s a chance the models it discusses have already been surpassed by more advanced versions.

Will we still have a job in the future? We don’t know, all we know is that some jobs will disappear, while new jobs will be created.

The only thing we can do to stay relevant in the future, is to learn how to use AI to our advantage and become power-users with 10x productivity. How else are we going to stay competitive?!

Everything in 60 seconds

In the future, leaders won't just manage people, they will manage AI. Every one of us will need to learn how to give clear, strategic instructions to AI systems. Learning to use AI is the new MBA.

  • Challenge

    • I challenged myself to use AI to build my own spending tracker. I wanted to keep an eye on those sneaky expenses—UberEats, coffee, snacks, and all the little purchases that add up. Even though I’m not a software engineer, I dove in and used AI tools like ChatGPT, Gemini, Claude, Cursor AI, and Vercel to make it happen.

  • The result?

    • A fully functional web app where I set a monthly spending target that breaks down into daily goals. If I overspend one day, the app smartly adjusts the remaining daily targets to keep me on track (you can check it out here and save it to your homescreen on mobile).

  • Key Learnings

    • Context is king. Giving LLM’s such as ChatGPT full context is key to ensure quality outputs.

    • Privacy is crucial. Never feed AI sensitive information, because you’ll never get it back.

    • Patience is the name of the game. It might be frustrating at times, but think about the real value, which is your learning curve.

    • Experience > Theory. You need to use AI tools in order to get more familiar with the power of AI.

    • Creativity survives. When most tasks can be done by AI, creativity becomes your true edge. The person who creatively combines and leverages AI tools will stand out.

  • Conclusion

    • This is just a glimpse of what is (and will be) possible. AI tools are revolutionizing our work, and to stay ahead, we need to be among the top AI power users. Dive in, experiment, and let these tools increase your productivity by 10x.

 

Tools & Insights

  • Tutorials with Wizardshot

    • Tool to create AI-powered step-by-step tutorials in minutes

  • AI Audience Simulator

    • Listen to this podcast where Michael Taylor, creator of Rally and co-author of a book on prompt engineering, joins to discuss his innovative AI tool for simulating customer responses.

  • AI User Interfaces

    • Check out this video where my friend Raphael Schaad, the founder and designer of Cron (now Notion Calendar), evaluates some groundbreaking AI user interfaces.

Do you enjoy this type of content? Share it with a friend or drop me a note. I’d love to hear about your challenges & experiences with AI. Happy to help.

Deep Dive: How I Built My Spending Tracker with AI

Whether you’re a beginner or just curious about the process, this guide should help you understand the high-level methodology and the tools I used.

1. Setting the Context

I started with a simple idea: "I want to build a spending tracker." With only a basic understanding of JavaScript, React, and Node.js, I started my journey.

The first step was clarifying my vision and write down the user experience. I knew I wanted it to be simple and manual by design, so I started with some wireframes.

The wireframes gave me a good sense of what this simple webApp should do.

You might ask why I chose a manual tracker. Good question! I wanted to put every expense on top of my mind, and that means I can’t automate it, I need active participation. Therefore, I thought about a manual entry that raises my awareness enough, but keeps friction minimal. One big button, rounded numbers, and maybe a category.

Then I had to write down the user experience for ChatGPT. The process was as simple as describing the app in a few sentences and outlining the key functionalities I wanted. This initial conversation with AI helped me lay the groundwork by defining user interactions and app flow in detail.

2. Creating a PRD (Product Requirements Document)

The next step was to develop a PRD. This document is the blueprint of your app—it outlines user specifications, flow, functionalities, and technical requirements.

I used AI to transform my initial ideas into a comprehensive PRD

Then I chose to try another tool, Google’s Gemini. By feeding the initial PRD output from ChatGPT into Gemini, I generated a more detailed PRD that could serve as the foundation for coding.

My prompt was: “Refine this PRD” followed by the original PRD.

Below you see screenshots of some of the outputs

3. Generating Code from the PRD

With the PRD in hand, I turned to Claude, an AI known for its coding capabilities, to generate the code.

I simply pasted the PRD and added the instruction:

"I need a step-by-step guide with all the code prewritten. Just tell me where to add API keys, etc."

Below you see screenshots of some of the outputs

Claude returned a structured guide complete with folder structures, file organization, and prewritten code files. This output was the roadmap to building the spending tracker.

4. Following the Instructions & Asking Clarifying Questions

With a full guide from the AI, I began to “code”. The instructions covered everything from setting up the project to integrating external services and where I had to place which code file. Key steps included:

  1. Folder Structure: Creating and organizing folders on your computer.

  2. GitHub: Uploading your project structure to GitHub for version control.

  3. Code Editor: Using an AI-assisted editor (like Cursor AI) to work on the project.

  4. Code Integration: Importing all prewritten code files into your project.

  5. External Services Setup: Configuring services such as:

    • Firebase: For user authentication.

    • Vercel: For frontend deployment.

    • MongoDB: For database and storage.

    • Render: For backend deployment.

    • Doppler: For API key management.

The beauty of this process is that you can treat the AI as a professor. If any step is unclear, you simply ask for clarification, learn from the detailed responses, and continue improving your project. It was an unbelievable experience.

5. Running, Deploying, and Debugging

After assembling everything, it was time to run the code. Naturally, bugs appeared. Here’s how I tackled them:

  • Testing: Run the code to see if it works as expected.

  • Debugging: When errors arose, I fed the error messages to ChatGPT, Claude, or used the built-in chat features of Cursor AI that automatically corrects every file in your code base after you feed it an error message.

  • Iterative Learning: Each debugging session was a learning opportunity. The process reinforced best practices and deepened my understanding of both coding and the underlying technologies.

Final Thoughts

Building the spending tracker was one of the coolest projects I've tackled - full of learning moments, plenty of frustration, and constant amazement at just how powerful AI tools are. It felt like I got a sneak peek into our future, where using AI becomes as second nature as using the internet today. To stay ahead, we really need to be among the top percentile of AI power users. I hope this punchtime edition inspires you to dive in and explore AI in your own projects.

Explore, learn, and stay ahead!