[brandyscarney]

What This Does

Makes the app's code match what a reader ends up with after following the "Your First App" docs, so the repo can be used to check your work against the tutorial.

New Behavior

None. The app works the same; names, declaration order, and comments change to match the docs.

Changes

• usePhotoGallery.ts:
  • Renames to the docs' names: takePhoto → addNewToGallery, photo → capturedPhoto, savedFileImage → savedImageFile.
  • PHOTO_STORAGE and base64FromPath move inside the hook, and the functions are declared in the docs' order.
  • deletePhoto uses .slice() instead of the deprecated .substr().
  • On native, savePicture passes the photo data from Filesystem.readFile() straight to Filesystem.writeFile() (string | Blob), like the Angular app, instead of converting a Blob with .text(), which would have saved raw bytes as if they were base64.
  • Comments match the docs, including the inline comments on the Camera.getPhoto options.
• Tab2.tsx: uses addNewToGallery, <IonContent fullscreen>, and the docs' Cancel handler and action sheet markup.
• Tests: updated for the addNewToGallery rename, and the native Blob test now checks the data reaches writeFile unchanged.

Notes

• This is the same structure and naming the Angular app and all three docs tutorials already use.
• Repo-only code the docs don't teach is unchanged: SplashScreen.hide() in main.tsx, the Capacitor splash screen config, and the native assets.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
tutorial-photo-gallery-react	Ready	Preview	Oct 26, 2026 3:34pm UTC