iTranslated by AI
How to Develop an Expense Reimbursement App in One Person-Day with GEAR.indigo
In this article, I will explain in detail the specific method of developing an expense reimbursement app in one man-day by leveraging GEAR.indigo.
I will also introduce Cursor, an AI code editor that improves development efficiency.
Deliverables
When you photograph a receipt
It automatically reads the content.
Login functionality is also implemented
Search and CSV export are also fully provided.
Watch the video here
What is GEAR.indigo?
GEAR.indigo is an innovative tool that leverages generative AI to automatically generate everything from requirements definitions and system design documents to code based on prompts.
This allows you to complete the initial documentation and basic code implementation—which traditionally took a lot of time—all at once.
What is Cursor?
Cursor is the latest AI-powered code editor that dramatically improves developer productivity.
- AI Code Completion: Proposes the next code to write or the optimal syntax in real-time.
- Error Checking: Instantly detects syntax errors and logical inconsistencies.
- Refactoring Support: Supports code optimization and organization.
- Documentation Reference: Allows immediate checking of documentation for libraries and frameworks in use.
Development Steps for the Expense Reimbursement App
1. Creating Requirements Definition
First, use ChatGPT to create the requirements definition to be loaded into GEAR.indigo.
Prompt Example
I want to create a "receipt reading app" as follows. Since I want to develop it using a generative AI tool, please create an easy-to-interpret requirements definition.
- Selection of output format
- Use the Freee format in the initial stage
- Required items: Income/Expense category, Management number, Transaction date, Settlement deadline, Partner, Partner code, Account item, Tax category, Amount, Tax calculation category, Tax amount, Remarks, Item, Department, Memo tag, Settlement date, Settlement account, Settlement amount, Segments 1–3
- Capture information by photographing receipt or bill images
- Read information from images and output as CSV in the specified format
- The only items the user needs to set are "Transaction date," "Partner," and "Settlement amount"
Generated Requirements Definition (*Partially manually corrected)
Receipt/Bill Expense Reimbursement App Requirements Definition
Feature Overview
• An application that outputs a CSV file in a specified format when a user takes a photo of a receipt or bill.
• For now, only one format, the Freee format, will be used.
Freee output format is as follows:
Income/Expense category
Management number
Transaction date
Settlement deadline
Partner
Partner code
Account item
Tax category
Amount
Tax calculation category
Tax amount
Remarks
Item
Department
Memo tag (multiple can be specified, comma-separated)
Settlement date
Settlement account
Settlement amount
Segment 1
Segment 2
Segment 3
User Interface
• Receipt photography feature
・Format selection
• Users can upload images of receipts or bills.
Image Analysis and Data Extraction
• OCR processing
• Extract text information from uploaded images.
• Data mapping
• Map extracted data to Freee format fields. Only the following items should be mapped:
• Transaction date
• Partner
• Settlement amount
• Tax amount
• Other fields should be default values or left blank.
CSV Output
• File generation
• Generate a CSV file according to the specified format.
• Download feature
• Users can download the generated CSV file.
Technical Requirements
• Programming language
• Libraries/Tools
• Use an appropriate library (e.g., Tesseract OCR) for OCR processing.
• Data processing
• Implement error checks and validation to ensure data accuracy.
Non-Functional Requirements
• Security
• Handle user-uploaded images and data securely and delete them appropriately when no longer needed.
• Usability
• Provide an intuitive and easy-to-use interface.
• Scalability
• Design so that other formats can be supported in the future.
Development Scope and Limitations
• Only the Freee format is supported.
2. Automatic Generation with GEAR.indigo
Step 1: Create Requirements Definition
First, create a project. Select "Product Creation".
Copy and paste the generated prompt into the requirements definition.
With just this, it creates the requirements definition document for you.
Project Overview
Business Requirements List
System Business Flow
If there are parts that differ from your expectations, correct them and proceed to the next step.
Step 2: System Design Document
It refers to the requirements definition document created in the previous stage even without specifying anything, so you can proceed just by clicking buttons.
Repeat the cycle of generation and manual correction.
Basic Design Document
Detailed Design Document
It even generates (!) ER diagrams and the screen UI.
Step 3: Code Generation
Code Generation
If you link it with GitHub, it will push it to your repository.
3. Code Verification and Correction
Clone the repository locally and use Cursor to verify and correct the code.
It didn't work even when following the README, so I asked various questions to the Cursor Composer agent, and the app successfully started.
After that, I had the Agent correct the parts that weren't working or differed from my expectations.
The most significant change was that I initially planned to use OCR for image reading, but the accuracy was too poor to be practical, so I changed the specification to use an LLM instead.
I used Canva's logo generation AI to create the logo.
The project was completed after integrating Supabase and making other minor adjustments.
Summary
By combining GEAR.indigo and Cursor, I was impressed that I could develop an MVP in such a short period as one man-day.
While I believe that aspects like security and code quality still need a bit more scrutiny, I felt that the sense of speed provided by AI development tools will become a major weapon in future system development.
Bonus
MAKE A CHANGE Co., Ltd. is a specialized company providing AI system/app development and solutions.
Please feel free to contact us.
We are also looking for teammates who want to work with generative AI (AI engineers, PMs, UI/UX designers, etc.).
Discussion