Building a Travel Expense App with Google Anti-gravity (A 50-Year-Old's Challenge)🚀

 "When I enrolled as a freshman in the AI ​​department in my 50s, many people around me didn't expect much. But technology isn't just for the younger generation! We now live in an era where you can build the exact software you need using simple natural language—and you can do it too!"

In early July, I went on a memorable 10-day trip to Frankfurt, Germany, and surrounding cities with four companions. Since I have always been slow with mental math and found organizing paper receipts terribly tedious, I felt anxious even before stepping onto the plane.

However, built on the confidence I gained from creating an Esperanto vocabulary game using Google Gemini's Canvas feature, I decided to take on a new challenge. This time, I used Anti-gravity —Google's cutting-edge AI agent development tool—to build a personalized travel expense management web app tailored specifically for our group!

Interface of a travel budget management web app developed with Google Anti-gravity, featuring OCR receipt processing and currency converter.
Travel Expense Management Web App Interface Built with Anti-gravity

1. Hand Over Complex Expense Splitting to Your Smart 'Digital Assistant' 🤖

Traveling in a party of five meant calculations got tricky fast. Group members had different individual expenses—like only three people grabbing coffee or specific members buying souvenirs—and pre-paid costs like flight tickets and hotel bookings were mixed into the equation.

That's where Anti-gravity came in, acting just like a sharp 'Digital Assistant' that understood my every command.

At local cafes or restaurants, all I had to do was point my smartphone camera at a receipt. The app automatically extracted the amount and converted Euros (EUR) to Korean Won (KRW) in real time. Thanks to this tool, we enjoyed our entire 10-day trip completely free from calculation stress and without ever touching a manual calculator!

2. 4-Easy Steps for Beginners to Build with Anti-gravity 

Don't worry if you know zero coding line-by-line. You simply need to describe the features you want in plain Korean or English.

  • Step 1: Map Out Required Features and UI Screen

    Write down a clear checklist of what you need in plain text: "Receipt OCR photo scanning, real-time EUR-to-KRW currency conversion, and selective expense splitting for 5 people."

  • Step 2: Pass Your Prompt to Anti-gravity

    When you input your prompt, the Anti-gravity AI agent analyzes your idea and generates an architecture blueprint and step-by-step code execution plan. If you want any tweaks, just ask in conversational text and hit the 'Approve' button.

  • Step 3: Run the Web App and Test Operations

    Double-click the generated .htmlfile, and your newly created web app opens up right inside your web browser!

  • Step 4: Input Live Receipts and Track Your Budget

    Snap receipts whenever you make a purchase during your trip. The data updates to your budget database instantly, showing remaining funds and individual settlement amounts at a glance.

3. Practical Field Tips & Future Enhancements 💡

  • Always Verify OCR Accuracy: Crumpled receipts or faint thermal prints can occasionally lead to Optical Character Recognition (OCR) misreads. A practical habit is to snap quick photos during the day and review the final database entries together at the hotel each evening.

    Interface image showing the receipt upload and smart OCR scan features of the web app built with Anti-gravity.
    Smart OCR Receipt Scanner and Manual Entry UI Component
  • Template Sharing Coming Soon: Although the app was originally built in Korean for our 5-person travel group, I am currently converting it into an English version and polishing it into a flexible, customizable template. I will share it for free on this blog soon!

📚 Essential AI Glossary for Beginners

  • Anti-gravity: Google's intelligent AI development tool that lets you build functional web applications using natural human language without writing code manually. Think of it as an automatic cooking machine where you name the dish and it serves the meal!

  • Optical Character Recognition (OCR): A technology that acts like a 'digital scanner', allowing AI to read printed or handwritten text inside images or paper documents and convert it into editable digital text. For technical details, check out the 🔗Cloud Vision API OCR Documentation .

AI is by no means reserved for young tech specialists or seasoned programmers. It is a reliable helper designed to solve everyday hassles. With the lighthearted mindset of "Why not give it a shot with a single sentence?" , take your first step toward creating your own custom digital tools! 🌟

In my next post, I will explore what Google Anti-gravity is and take a closer look at its key features . Stay tuned! 🎈

📌 Previous Post: Building an Esperanto Learning Game with Gemini Canvas

Comments