<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Shutian Ma</title>
    <description>The latest articles on Forem by Shutian Ma (@michellemashutian).</description>
    <link>https://forem.com/michellemashutian</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1373972%2Febcf83c1-23aa-4718-93a2-a00d76cb5543.jpeg</url>
      <title>Forem: Shutian Ma</title>
      <link>https://forem.com/michellemashutian</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/michellemashutian"/>
    <language>en</language>
    <item>
      <title>📦 From Spec to iOS App: Building BoxFinder with GitHub Copilot CLI</title>
      <dc:creator>Shutian Ma</dc:creator>
      <pubDate>Wed, 11 Feb 2026 01:54:36 +0000</pubDate>
      <link>https://forem.com/michellemashutian/boxfinder-finding-stuff-in-real-life-with-github-copilot-cli-1c1b</link>
      <guid>https://forem.com/michellemashutian/boxfinder-finding-stuff-in-real-life-with-github-copilot-cli-1c1b</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github-2026-01-21"&gt;GitHub Copilot CLI Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built &lt;strong&gt;BoxFinder&lt;/strong&gt;, an iOS app that helps track physical storage containers—those mystery boxes in closets, garages, or storage units that everyone forget about.&lt;/p&gt;

&lt;p&gt;The MVP focuses on three core questions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;What does this box look like?&lt;/strong&gt; → box photo
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Where is it stored?&lt;/strong&gt; → location photo
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;What’s inside?&lt;/strong&gt; → item photos + tags
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Users can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create boxes with photos
&lt;/li&gt;
&lt;li&gt;Add photos of the contents
&lt;/li&gt;
&lt;li&gt;Manually tag items (auto-tagging later 😉)
&lt;/li&gt;
&lt;li&gt;Search by keywords to quickly find which box contains something—and where that box lives
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;👉 &lt;strong&gt;GitHub repo:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;a href="https://github.com/michellemashutian/BoxFinder-iOS" rel="noopener noreferrer"&gt;https://github.com/michellemashutian/BoxFinder-iOS&lt;/a&gt;  &lt;/p&gt;

&lt;p&gt;📸 &lt;strong&gt;Screenshots:&lt;/strong&gt;  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnab37gzpr240n1vswocu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnab37gzpr240n1vswocu.png" alt="A set of iPhone screenshots showing the BoxFinder app’s main tabs" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Main tabs: Boxes, Search, and Settings. The Boxes screen lists stored containers with photos and locations, the Search screen lets users browse by box name or location, and the Settings screen shows app info and support options.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbzrm8ej73w6aajlay7t8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbzrm8ej73w6aajlay7t8.png" alt="Screenshots of creating and managing a box in the BoxFinder app" width="800" height="365"&gt;&lt;/a&gt;&lt;br&gt;
Screenshots of creating and managing a box in the BoxFinder app, including adding photos of the box and its location, viewing items inside, and deleting a box with a confirmation alert.&lt;/p&gt;

&lt;p&gt;🎥 &lt;strong&gt;Video walkthrough:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;a href="https://drive.google.com/file/d/1UAAATtcxgWCFupV-kKk1dx0wwrbgwEgX/view?usp=drive_link" rel="noopener noreferrer"&gt;https://drive.google.com/file/d/1UAAATtcxgWCFupV-kKk1dx0wwrbgwEgX/view?usp=drive_link&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  My Experience with GitHub Copilot CLI
&lt;/h2&gt;
&lt;h3&gt;
  
  
  🧭 Starting from a Spec
&lt;/h3&gt;

&lt;p&gt;Before writing code, I created a simple product spec to guide development:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# BoxFinder MVP Spec (iOS 17+)&lt;/span&gt;

Goal:
&lt;span class="p"&gt;-&lt;/span&gt; Track storage containers ("boxes") with:
  1) box photo (how the box looks)
  2) location photo (where the box is stored)
&lt;span class="p"&gt;-&lt;/span&gt; Add item photos to a box (photo of contents).
&lt;span class="p"&gt;-&lt;/span&gt; Each item photo has tags (auto later; manual for MVP).
&lt;span class="p"&gt;-&lt;/span&gt; Search by keyword -&amp;gt; show matching boxes + where they are.

Tech:
&lt;span class="p"&gt;-&lt;/span&gt; SwiftUI
&lt;span class="p"&gt;-&lt;/span&gt; SwiftData
&lt;span class="p"&gt;-&lt;/span&gt; Photos stored in app Documents directory; DB stores relative file paths.

Core screens:
&lt;span class="p"&gt;-&lt;/span&gt; TabView:
&lt;span class="p"&gt;  -&lt;/span&gt; Boxes: list, create box, box detail
&lt;span class="p"&gt;  -&lt;/span&gt; Search: search by tags/name, show results
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This spec became the backbone for how I collaborated with GitHub Copilot CLI.&lt;/p&gt;

&lt;p&gt;Then, I began entirely inside Copilot CLI with this command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;copilot -i Read SPEC.md. Propose the minimal set of Swift files to implement: SwiftData models (Container, ItemPhoto), a PhotoStore to save/load images to Documents and return relative paths, and a basic TabView with Boxes list Search screen. Output a step-by-step plan with file names and code blocks per file.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiia4bcykes4uwuvonduj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiia4bcykes4uwuvonduj.png" alt="input1" width="800" height="621"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That worked surprisingly well: Copilot generated a reasonable file layout, SwiftData models, and a first pass at the UI structure.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwut4wq3lvtaixbpj3i7e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwut4wq3lvtaixbpj3i7e.png" alt="output2" width="800" height="621"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;From there, I loaded everything into Xcode and started iterating by pasting compiler errors and simulator issues back into Copilot.&lt;/p&gt;




&lt;h3&gt;
  
  
  🛠 Debugging &amp;amp; Platform Friction
&lt;/h3&gt;

&lt;p&gt;A big real-world challenge: I wanted to test on my own phone, which only supports &lt;strong&gt;iOS 16&lt;/strong&gt;. My original spec said &lt;strong&gt;iOS 17+&lt;/strong&gt;, so a lot of generated code used newer APIs. I ran into errors like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;- Views only available in iOS 17: `AddItemView`, `BoxesListView`,`ItemPhotosGridView`, `SearchView`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I had to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Convert APIs back to iOS 16-compatible patterns
&lt;/li&gt;
&lt;li&gt;Ask Copilot to downgrade features
&lt;/li&gt;
&lt;li&gt;Eventually update the spec itself to say &lt;strong&gt;iOS 16+&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That back-and-forth took more time than expected, but it was interesting to see how strongly the model followed the original spec—sometimes &lt;em&gt;too&lt;/em&gt; strongly.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw1slt4tg7wv3w0fnmp2v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw1slt4tg7wv3w0fnmp2v.png" alt="IOS problem" width="800" height="615"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  📷 Camera vs Photo Picker
&lt;/h3&gt;

&lt;p&gt;Another iteration was enabling &lt;strong&gt;taking photos directly&lt;/strong&gt;, not just selecting from the photo library.&lt;/p&gt;

&lt;p&gt;I had to explicitly ask:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Why can I only select photos? Add the function for taking photos.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This required several rounds of fixes across the image picker and permissions logic.&lt;/p&gt;




&lt;h3&gt;
  
  
  🎨 UI Feedback (Where It Struggled)
&lt;/h3&gt;

&lt;p&gt;I’ll be honest: UI polish was the weakest part of the experience.&lt;/p&gt;

&lt;p&gt;Even after asking Copilot CLI (using the &lt;code&gt;claude-haiku-4.5&lt;/code&gt; model) to optimize the UI, the app still felt:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;visually dated
&lt;/li&gt;
&lt;li&gt;very default-SwiftUI
&lt;/li&gt;
&lt;li&gt;lacking modern spacing, hierarchy, and personality
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Also, describing UI problems purely in text was tough. I often wanted to attach screenshots and say:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“This part looks weird—how do I fix it?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft3zuy04f7afvfkwqs5oq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft3zuy04f7afvfkwqs5oq.png" alt="UI problem" width="800" height="636"&gt;&lt;/a&gt;&lt;br&gt;
That’s something ChatGPT does better today, since I can show visuals directly.&lt;/p&gt;




&lt;h3&gt;
  
  
  🌍 Multilingual Surprises
&lt;/h3&gt;

&lt;p&gt;I’m a native Chinese speaker, so I tested asking some questions in Chinese mid-development.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fegv939agrfsjqe67zmuq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fegv939agrfsjqe67zmuq.png" alt="Chinese prompt" width="800" height="621"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It mostly worked… but at one point Copilot changed UI strings into Chinese inside the app 😅.&lt;/p&gt;




&lt;h3&gt;
  
  
  🤔 Overall Takeaways
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Where GitHub Copilot CLI struggled:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;UI refinement
&lt;/li&gt;
&lt;li&gt;Long debugging loops for certain functions
&lt;/li&gt;
&lt;li&gt;No way to reason over screenshots
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Compared to my recent experiments building three other iOS tools with ChatGPT, GitHub Copilot CLI required more manual fixes and cleanup... Of course!!!! I also think it's possible that these problems occur because I don't know how to use this tool🥲. But it was impressive to drive an entire MVP mostly from the terminal😘😘😘.&lt;/p&gt;




&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;BoxFinder is still rough, but it already answers a problem I actually have:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;“Which box did I put that cable in… and where is it stored?”&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This challenge pushed me to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;write clearer specs
&lt;/li&gt;
&lt;li&gt;rely on CLI-based AI workflows
&lt;/li&gt;
&lt;li&gt;treat Copilot more like a junior engineer that needs careful direction
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thanks for the challenge, this was a fun way to stress-test an AI-first iOS workflow. &lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>cli</category>
      <category>githubcopilot</category>
    </item>
  </channel>
</rss>
