From Snap to Story: Building an AI Photo Journal with React Native, PoML & MCP

From Snap to Story: Building an AI Photo Journal with React Native, PoML & MCP

Tech Stack & Services

(Some steps are edited/updated on Oct. 2025 as per latest updates in the technologies used.)

Core Technologies

  • React Native (Expo or bare workflow - I'd recommend bare for native module control)
  • TypeScript (essential for this complexity)
  • MCP SDK (....)
  • .... finish this list later
  • ]


Part 1 – Project Setup and Tooling

  • Step 1.1: Set up the folder structure and initialize the React Native (Expo) app

  • Step 1.2: Initialize the MCP server skeleton

  • Step 1.3: Verify both run (hello-world endpoints & screens)

  • Step 1.4: Connect the app and server with a test API call


Let’s start 

🪄 Step 1.1 — Create Project Folder & Scaffold the React Native App

Goal:
Initialize a new React Native (Expo) app that will become your “AI Photo Journal” frontend.

1️⃣ Prerequisites (install if missing)

  • Node.js 18+

  • npm or yarn

  • Git

  • EAS Account - we would use Expo and EAS(Expo Application Services) to create and build the project. EAS allows us to build the project locally on development machine or in you EAS cloud account. Once build in ready in your cloud account, you can download it on your test device to run and test.

  • EAS also automates pushing the app builds to Android or iOS app stores. (For Android, the first build has to be done manually though from the Playstore developer console account)

  • Android Requirements (as of Ooct 2025)

     ✓ Adb - Required to verify if the android device is attached correctly

     ✓ JDK - Required to compile Java code >= v17 , <= v20

     ✓ Android Studio - Required for building and installing your app on Android

     ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation

     ✓ Gradlew - Build tool required for Android builds

     ✓ Android SDK - Required for building and installing your app on Android

       - Version supported: 36.0.0

  • Install a emulator in Android Studio -> Devices

  • To run/test on Android Device/emulator

     ✓ Xcode - Required for building and installing your app on iOS

     ✓ Ruby - Required for installing iOS dependencies

     ✓ CocoaPods - Required for installing iOS dependencies

     ✓ .xcode.env - File to customize Xcode environment

- to test on your test device during development, install Expo Go App

Step 1.1

Create the project
Run below command in terminal to initiate the project

npx create-expo-app@latest



(paste pics of terminal command and error)


Got JDK 17 required error , followed this SO answer to fix this https://stackoverflow.com/a/78509554

npx create-expo-app@latest

Above command would ask for the App name and couple of other questions and create the project.

Once the project is created/scaffolded, you can run below command to run locally on Android or iPhone emulator, or web browser - 

- cd AIPhotoJournal

- npm run android

- npm run ios

- npm run web


Or run below command 

npm run start

This would build the app and run it on a local server. It would display a QR code to open the locally running app from Expo Go app on your test device. Scan the QR code from Expo Go app (or scan with camera on iOS). Make sure the device and the development machine both are on the same wifi network.




 


Comments

Post a Comment

Popular posts from this blog

Securing Web forms in React

Securing Web forms in React Practical Guidelines for Preventing XSS and Data Injection in Web Forms Introduction Forms are a key part of most web applications. They handle user data entry, authentication, and configuration. Because they accept external input, forms are also one of the main sources of security vulnerabilities such as: Cross-Site Scripting (XSS) Data Injection Phishing via injected form markup React automatically escapes user-provided data in JSX, which prevents many common injection attacks. However, as applications scale and integrate with user-generated or external content, teams must apply  consistent input sanitization and validation patterns . This document defines standard practices for React-based projects to ensure that user input is handled safely across the application. Core Principle: Validate Input, Encode Output Every piece of user-provided data should be treated as  untrusted . “Never trust input that originates outside your code.” Stage Action Ex...
Read more

From Snap to Story - Part 1: Building an AI Photo Journal app with React Native, PoML & MCP

From Snap to Story - Part 1: Building an AI Photo Journal app with React Native, PoML & MCP Part 1 - Prerequisites, Tooling and initial project setup Forms are a key part of most web applications. They handle user data entry, authentication, and configuration. Because they accept external input, forms are also one of the main sources of security vulnerabilities such as: Cross-Site Scripting (XSS) Data Injection Phishing via injected form markup React automatically escapes user-provided data in JSX, which prevents many common injection attacks. However, as applications scale and integrate with user-generated or external content, teams must apply  consistent input sanitization and validation patterns .
Read more

From Snap to Story: Building an AI Photo Journal with React Native, PoML & MCP

  From Snap to Story: Building an AI Photo Journal with React Native, PoML & MCP Part 2:  Set up image picking (camera/gallery) and sending the photo to the MCP server . In this post, we would add a feature in our React-Native app to let user take a photo (or pick from gallery), send it to the backend, and display the returned AI caption (for now still placeholder). This is where the “Photo Journal” starts coming alive.
Read more