AI Helps Me Full-Stack Develop a Side Project: Melon Moment

Executive Summary: An Engineer’s Self-Revolution

This “report” is a complete record of my personal development journey for a Side Project: Melon Moment (Chinese name: 小瓜书). Amidst the current wave of generative AI, I have deeply experimented with how a software engineer can utilize AI tools to develop a full-stack application. The core of my project is an application for recording child growth, aiming to address the various shortcomings of existing commercial software in terms of organizing massive amounts of photos, the high cost of printing physical albums, and the integration of AI features.

Core Insights — Development Paradigms in the AI Era:

• Paradigm Shift in Development Efficiency: I discovered that the speed at which AI writes code has already surpassed my speed of reading and reviewing it. This forced me to treat a solid CI/CD process, strict Linter constraints, and high-coverage automated testing (especially end-to-end testing) as necessary “safety nets” to guarantee project quality. It is no longer an optional “bonus” but a “must-have.”
• Toolchain Trade-offs: The choices between React Native and Flutter, as well as between Monorepo and microservices architectures, were profoundly influenced by the AI’s ability to understand context. Although React Native benefits from my familiar TypeScript background, handling native platform compatibility remains a significant challenge.
• Strategic Use of Costs and Models: The cost of high-performance models (such as Claude 4.5 Sonnet) is indeed not low. I had to adopt a “tiered usage strategy”: using high-end models during the architectural design and complex debugging phases, while switching to free or low-cost models for simple code execution and review phases to save on expenses.

1. Project Background and My “Parenting Pain Points”

The idea for this project originated from my actual feedback using existing parenting record software (such as “Qinbaobao”). My partner and I found that traditional apps make it incredibly difficult and expensive to organize thousands of annual photos into physical albums.

My primary drivers were:

• Functional Requirements: I want to use AI to assist in photo selection, automatically generate diary copy, and ultimately achieve one-click generation of photo albums or storybooks.
• Technical Exploration: As a software engineer, I aimed to practically experiment with AI-assisted coding tools outside of a corporate environment to understand the rapid changes at the technical frontier.
• Reducing Friction: I wanted to explore a lightweight sharing mode from “Brain Dump” to blog output, using AI to reduce the resistance to my creative process.

2. Technical Selection: RN vs. Flutter and the Monorepo Decision

In the early stages of the project, I made key choices regarding the cross-platform development framework and code organization.

2.1 Development Framework: Why I Chose React Native

2.2 Architecture Pattern: The Sweets and Sorrows of Monorepo

I decided to place the frontend, backend, and documentation all in a single repository (Monorepo).

• Advantage: This provides my AI Agent with sufficient context, allowing it to understand the logic of both frontend and backend simultaneously, which greatly improves collaboration efficiency.
• Disadvantage: This leads to deep coupling of configurations, API keys, and business logic, increasing the difficulty of future Open Source release. My current plan is to gradually separate configurations and secrets through progressive refactoring.

3. AI-Assisted Development Toolstack and Practice

3.1 My Core Toolstack

• IDE: Windsurf
• LLM:
  • Claude 4.5 Sonnet: Used for writing and debugging complex logic.
  • Gemini Deep Research: Used for technical selection surveys and feasibility studies in the early stages of the project.
• Automation Tools: Playwright (E2E testing), TypeScript Linter (code quality control).

3.2 Impressions of Windsurf and Claude

Windsurf and Claude exceeded my expectations in the following areas:

1. Command Line Interaction: It can proficiently call ADB (Android Debug Bridge) to connect to Android emulators or operate Docker environments.
2. Error Analysis: It can automatically read failure logs and propose corrective solutions to me.
3. Cloud Deployment: It can even directly call Gcloud tools for backend deployment and handle related logs.

3.3 A Painful History of Cost Control

The cost of AI development is consumed very quickly. My $15/month Pro plan (which includes 500 credits) was exhausted in just two days of high-intensity development.

• Planning Phase: I use the most powerful models (like Claude 3.5) for architectural design and planning.
• Execution & Review: I try to switch to free or low-cost models, calculating the usage of credits carefully.

4. Key Features and Those Cross-Platform Pitfalls

4.1 My Integrated AI Features

To enhance user experience, my project integrates several AI-driven features:

• Speech-to-Text (STT): Utilizing voice models for rapid diary entry. I plan to introduce real-time voice conversation models (like Gemini Live) in the future to enhance the sense of interaction.
• Assisted Diary Writing: Supports three styles of generation (Warm, Factual, Funny).
• Automated Content: Planned features include generating a “Weekly Chapter” review and monthly books.

4.2 Pain Points of Platform Consistency

While developing the photo album printing feature, I found that some open-source libraries perform well on the web but face many restrictions on Mobile Native. This cruelly proves that the ideal of “write once, run anywhere” still faces serious cross-platform compatibility challenges in React Native development.

5. Engineering Excellence and My Self-Reflection

5.1 The Necessity of Automated Testing

The saying “AI writes code faster than humans can read it” is an absolute truth.

To maintain confidence during high-speed iterations, I invested significant effort into building CI/CD processes:

• Introduced strict Pre-commit Hooks.
• I require that every PR (Pull Request) must have detailed unit test coverage.
• Use Playwright for end-to-end testing.

5.2 Summary of Experience: If I Could Do It Over

1. Early Frontend-Backend Separation: I should have introduced Open API / Swagger standards from the project’s inception to ensure frontend and backend could be released independently, as the cost of releasing a mobile client is much higher than that of a Web client.
2. Modular Testing Guidance: I should maintain a Markdown file (e.g., Gemini.md) to explicitly tell the AI Agent that end-to-end testing should follow the “Critical User Journey” (CUJ), rather than blindly adding fragmented test cases, thereby reducing test flakiness.
3. Client-Side Focus: If the goal is a mobile app, I should have developed with the mobile side as the priority from day one, rather than first verifying logic on the familiar Web side.

6. Future Outlook

Through this investigation, I found that tools like Natively.dev or Google’s Firebase Studio are attempting to achieve “Prompt-to-App,” but they are still immature in terms of backend integration or complex application generation.

Summarizing my journey: AI-assisted Side Project development has evolved from simple code completion to full-process assistance (design, coding, debugging, deployment). Although I still need to perform significant manual intervention and architectural control, I expect that by the end of 2026, more mature automated development solutions with deep backend integration capabilities will emerge in the industry.