u/trunghaiy

Just shipped BookStreak (a reading habit tracker) to the App Store. Wanted to share how I handled the preview videos and screenshots, because this was the part I dreaded most and I ended up vibe-coding a solution.

The problem

After building the app, I needed App Store preview videos and screenshots in multiple dimensions. The normal options:

• CapCut Pro: $9.99/mo for the export features you actually need
• Canva: manually organizing screenshots into layers, aligning device frames, managing effects
• Both require design skills I don't have

Every app update means redoing all of it. I'm a developer, not a video editor.

What I did instead

I built an AI skill that reads my codebase and generates custom animated scenes using Remotion (a React-based video framework). The workflow:

1. The skill scans the project, extracts app name, brand colors, icon, features, store metadata from config files
2. It acts as a creative director, picks a narrative arc based on the app category, writes copy, chooses animations
3. It generates bespoke .tsx scene components using a shared primitives library (phone frames, animated backgrounds, captions, stat cards, etc.)
4. Remotion renders the scenes to MP4

The tools I used:

• Claude Code: the AI agent that runs the skill and generates the scene files
• Remotion: React framework for programmatic video rendering
• Agent Skills spec: how the skill plugs into AI coding tools
• TypeScript/React: the scene components are standard .tsx files

The result:

BookStreak's App Store listing, all preview videos and screenshots were generated this way: https://apps.apple.com/us/app/bookstreak-reading-tracker/id6767014813

What I learned:

• Programmatic video generation > manual editing for developer workflows. Once the scenes exist as code, updating them for a new app version is a prompt, not a reshoot
• Having the AI understand your codebase context means it makes better creative decisions than a generic template. It knows your brand colors, features, and what to highlight
• The hardest part was getting the animations to feel polished. Remotion's spring() function was key for natural motion
• Store-compliant output (dimensions, codec, duration) needs to be enforced at the framework level, not left to the user

If anyone's curious about the Remotion setup or the Agent Skills approach, happy to go deeper in the comments.

Just launched BookStreak, a reading habit tracker built entirely with Expo managed workflow. Figured I'd share what worked and what didn't in case it's useful for anyone considering Expo for a production app.

Stack: Expo SDK 52, expo-sqlite for offline-first storage, Supabase for cloud sync, RevenueCat for subscriptions, React Navigation with a 4-tab bottom bar.

What worked well:

• expo-sqlite is solid for offline-first. Every feature works without network, sync is additive. Way simpler than I expected.
• EAS Build + EAS Update for OTA patches. Shipped 2 hot fixes in launch week without going through App Store review.
• Expo managed workflow handled everything I needed. Never had to eject. WidgetKit and Live Activity via config plugins.

What was harder than expected:

• Import/export (Goodreads CSV, StoryGraph CSV) had way more edge cases than I planned for. Every export format has quirks.
• RevenueCat + StoreKit 2 on sandbox was flaky. Worked fine in prod though.
• Dynamic Island / Live Activity required a config plugin and a native extension target. Doable but not well documented for Expo yet.

What I'd skip next time:

• Over-designing the onboarding flow. Users just want to add a book and start. 3 screens max.

For the App Store preview video, I built a separate tool (AppShot) that generates videos and screenshots from React/Remotion components instead of screen recording. Saved me from learning CapCut, Canva and the output is pixel-perfect and reproducible. It's open source if anyone wants to try it: https://github.com/trunghaiy/appshot

Happy to answer questions about the architecture, Expo gotchas, or the App Store submission process.

App Store: https://apps.apple.com/us/app/bookstreak-reading-tracker/id6767014813