JSified Brains Blogs

From Snap to Story: Building an AI Photo Journal with React Native, PoML & MCP Part 3:  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.

  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.

  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 Below is what we plan to accomplish in this part of this multi-part guide for building a AI based Photo Journal React-Native app that uses a MCP server. Step 1: Set up the folder structure and initialize the React Native (Expo) app Step 2: Initialize a Node-Express REST server skeleton that we would eventually refactor to a MCP server.  Step 3: Connect the app and server with a test API call

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 Exp...

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 .