DEV Community: Isaac Addis

A Complete Beginner's Guide to Item-Item Recommendations with Matrix Factorization and BPR

Isaac Addis — Fri, 20 Feb 2026 15:55:19 +0000

When I wanted to build an item-item recommendation system with just implicit ratings (e.g. viewed, clicked as opposed to explicit ratings which are things like ratings for a movie out of 5), Matrix Factorization (MF) with Bayesian Personalized Ranking (BPR) is what Opus 4.5 recommended I get started with. As it helps to understand these systems to identify and debug issues, I'll be giving a walkthrough of the crucial information I learned over the span of a month (on-and-off) until I had enough of an understanding to fix problems and evaluate model performance. I'm now switching to LightFM which overcomes a cold-start problem and has better recommendation performance, but this knowledge should still be valuable whether choosing to use MF + BPR or LightFM.

Problem

I used this algorithm to: given an item i, recommend K items that are similar to item i. The K items could be used as recommendations to item i but the task is strictly to find related items to i. Items can be things like Amazon items, Netflix movies, and Spotify songs.

The Matrix Factorization + BPR Algorithm

Matrix Factorization with BPR allows us to accomplish this in a series of steps:

Create an interaction matrix containing (user, item) pairs. If a user interacted with an item, the interaction matrix at (user, item) is 1. Omit items users don't interact with from the interaction matrix; these items (negative items) are sampled during the training loop.
Use Xavier-initialization to randomly initialize user vectors and item vectors. The number of user vectors should be all the users who were assigned a row in the interaction matrix and the number of item vectors should be all the items that were assigned a column in the interaction matrix.
Run a training loop. For all users and items interacted with by the user (not recommended, please see Edit 2),
1. Sample a (user, positive item i, negative item j) triplet. A positive item is an item the user interacted with and a negative item is an item the user did not interact with.
2. Compute a term, x-hat_{ui}, as the dot product of user vector u with positive item i. Compute another term, x-hat_{uj}, as a dot product of user vector u with negative item vector j. x-hat_{uij} := x-hat_{ui} - x-hat_{uj}. The loss function is defined as -Math.log(sigmoid(x-hat_{uij}) + 1e-10). The 1e-10 is there to avoid computing log(0).
3. Perform gradient descent. Store the values u, p_i, n_i then with a pre-defined learning rate lr and number of factors K, for every 0 <= k < K:
4. userFactor[k] += lr * (sigmoidNegDiff * (pi - ni) - regularization * u)
5. posFactor[k] += lr * (sigmoidNegDiff * u - regularization * pi)
6. negFactor[k] += lr * (-sigmoidNegDiff * u - regularization * ni)

Edit 1: sigmoidNegDiff in my code is sigmoid(-diff) and diff is x-hat_{uij}.

Edit 2: The BPR 2009 paper advises against sampling in this way. It suggests random sampling across all (user, positive item, negative item) pairs.

We now have latent user vectors and latent item vectors with every entry being a factor representing something about the item (these aren't manually labelled).

With cosine similarity (finds the dot product of two vectors normalized by the product of their magnitudes), it's possible to find the closest-matching item vectors as well as the closest-matching user vectors to a user.

Intuition

The dot product represents how much two vectors "agree" with each other – vector cells have a high dot product if their entries agree in positive/negative and magnitude.

x_{uij} is a score representing whether user u prefers item i over item j. It's true if positive, otherwise it's negative. Since the sigmoid function transforms a number x into a probability between 0 and 1, sigmoid(x_{uij}) = P(i > j | u). If x_uij > 0, sigmoidNegDiff = sigmoid(-diff) is near 0 and the update to posFactor is minimal. The result is that incorrect preference rankings result in larger model parameter updates.

Note that gradient descent is moving userFactor • posFactor (x_{ui}) away from userFactor • negFactor (x_{uj}). It makes x_{uij} positive; in other words, it makes the score x_{ui} greater than the score x_{uj}.

Common Issues and their Fixes

I ran into co-exposure bias (an item j gets recommended for item i just because they are visible from the same page) implementing MF + BPR. An item from a trending page would only have other trending items as its recommendations. There are several mitigations for this:

Inverse Propensity Weighting: multiply the loss function by 1/P(exposure).
Remove non-organic interactions from the interaction matrix.
Add a bias term that absorbs general tendencies for users to prefer specific items (for example, popular products on the Amazon website).

Performance and Tuning

Two metrics commonly used for evaluating MF + BPR model performance are Recall@K and HR@K (Hit-rate@K). Hit Rate@K, according to ChatGPT, is defined as "The fraction of users for whom at least one relevant item appears in the top-K recommendations." Recall@K is defined as "The fraction of a user’s relevant items that appear in the top-K recommendations."

One way model testing is commonly done is Leave-One-Out. If a user interaction with items 1, 2, 3, and 4, it's possible to train the model with items 1-3 and verify that item 4 appears in the recommendations within K across all users (the aforementioned HR@K).

I hope you enjoyed this blog article and/or found it helpful.

Working Expo + pnpm Workspaces Configuration

Isaac Addis — Wed, 14 Jan 2026 13:42:05 +0000

Working Expo + pnpm Workspaces Configuration

This post outlines how I got pnpm workspaces to work in a monorepo containing React and React Native projects. I will explain key components in our pnpm workspaces configuration and walk through the errors I encountered trying to get this to work. A complete metro.config.js is attached to the bottom of this blog post.

Note: This didn't work when running more than one mobile app in the pnpm workspaces project.

Prerequisite Knowledge

In pnpm workspaces, every module's packages are stored at a top-level node_modules/.pnpm folder (the pnpm virtual store).
In individual project folders, node_modules contains symlinks to this pnpm store.

Overview of our pnpm Workspaces Configuration

We have a shared package in packages/. We import this package using "<package-name>": "*" in package.json.

We use Turbo for running projects and installing dependencies efficiently.

Errors I Encountered and Fixes

Error: `Invalid hook call`

Fix: Some packages like React and React Native must be pinned to specific versions to avoid multiple instances of them running at the same time. This part of our metro.config.js fixes this (Singleton Pinning):

const singletons = [
  'react',
  'react-native',
  'expo',
  'expo-router',
  'expo-modules-core',
  'expo-constants',
  '@expo/metro-runtime',
];

config.resolver.extraNodeModules = singletons.reduce((acc, name) => {
  acc[name] = path.resolve(projectRoot, 'node_modules', name);
  return acc;
}, {});

Error: Missing transitive dependencies

Fix: Make sure to not use disableHierarchicalLookups: true. This will prevent pnpm from locating packages in the pnpm store. This part of our Metro config solved this problem:

config.watchFolders = [
  path.resolve(monorepoRoot, 'packages'),
  path.resolve(monorepoRoot, 'node_modules/.pnpm')
];

config.resolver.unstable_enableSymlinks = true;
config.resolver.unstable_enablePackageExports = true;

// Resolve from app's node_modules first, then root .pnpm for transitive deps
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(monorepoRoot, 'node_modules'),
  path.resolve(monorepoRoot, 'node_modules/.pnpm/node_modules'),
];

Error: Missing non-transitive dependency

Fix: Install the packages with npx expo install. This will make sure compatible versions with your Expo version are used.

Conclusion

Getting pnpm workspaces to work with Expo requires careful Metro configuration. The key points are:

Singleton Pinning - Ensure React, React Native, and Expo packages resolve to single instances to avoid "Invalid hook call" errors.
Enable Symlinks - Configure Metro to follow symlinks into the pnpm store for transitive dependencies.
Use npx expo install - Always install Expo-related packages through the Expo CLI to ensure version compatibility.

Complete metro.config.js File

const path = require('path');
const fs = require('fs');
const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');
const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config');

const projectRoot = __dirname;
const monorepoRoot = path.resolve(projectRoot, '../..');

// Set EXPO_ROUTER_APP_ROOT to absolute path BEFORE config is created
// This ensures require.context resolves correctly with pnpm symlinks
const appRoot = path.resolve(projectRoot, 'app');
process.env.EXPO_ROUTER_APP_ROOT = appRoot;
process.env.EXPO_ROUTER_IMPORT_MODE = 'sync';

const config = getDefaultConfig(projectRoot);

config.projectRoot = projectRoot;

config.watchFolders = [path.resolve(monorepoRoot, 'packages'), path.resolve(monorepoRoot, 'node_modules/.pnpm')];

config.resolver.unstable_enableSymlinks = true;
config.resolver.unstable_enablePackageExports = true;

// Resolve from app's node_modules first, then root .pnpm for transitive deps
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(monorepoRoot, 'node_modules'),
  path.resolve(monorepoRoot, 'node_modules/.pnpm/node_modules'),
];
// Pin singletons and expo packages to prevent duplicate instances and ensure resolution
const singletons = [
  'react',
  'react-native',
  'expo',
  'expo-router',
  'expo-modules-core',
  'expo-constants',
  '@expo/metro-runtime',
];
config.resolver.extraNodeModules = singletons.reduce((acc, name) => {
  acc[name] = path.resolve(projectRoot, 'node_modules', name);
  return acc;
}, {});

// Add SVG support
config.transformer.babelTransformerPath = require.resolve('react-native-svg-transformer');
config.resolver.assetExts = config.resolver.assetExts.filter(ext => ext !== 'svg');
config.resolver.sourceExts = [...config.resolver.sourceExts, 'svg'];

// Wrap with NativeWind, then Reanimated
module.exports = wrapWithReanimatedMetroConfig(withNativeWind(config, { input: './global.css' }));

Building an LLM-powered Facebook Marketplace Bot

Isaac Addis — Fri, 26 Dec 2025 21:23:50 +0000

I was interested in trying out bot development in Ethiopia’s emerging tech industry by creating a bot that would monitor product listings on Facebook Marketplace. I succeeded in my attempts to pass through bot detection using a simple heuristic: mimic a real human. As I eventually discarded this bot (Facebook Marketplace already has a “Notify Me” feature), I am open to sharing how I developed this.

Please note that this does violate Facebook ToS.

System Overview

Here’s a summary of our tech stack:

Digital Ocean VPS running Ubuntu
Better Stack for logs (we had to use raw HTTPS requests with helper functions – this wasn’t working with the pino library)
pm2 for process management (this makes it easy to run a script as an always-on background task)
Slack for alerts
better-sqllite3 to track alerted listings (to avoid alerting about the same product twice)
OpenAI /chat/completions API with gpt-4o-mini for filtering product listings
TypeScript + OOP (I’ve found that bot development works really well with OOP)

Something interesting we did was use LLMs to filter out listings unrelated to our product query. For example, when the bot searches for "iPhone 15"s, the LLM filters out listings for "iPhone 15 Pro"s. We used gpt-4o-mini for this because of its high speed and low cost and had perfect results.

Technical Challenges + Solutions

Captcha Harvesting

Note: being signed-in is not required for monitoring Facebook Marketplace

Captchas prevent signing in directly through the bot. To get past this, I created a captcha harvester script that opened Puppeteer on my local computer and saved subsequent authentication cookies onto my local machine. With the scp command, I moved the cookies onto my VPS. This works for getting past login walls on Facebook.

Proxy Rotation

I’ve noticed that I needed to rotate proxies from our ProxyManager class when:
No amount of captchas would get me signed-in
I would suddenly get a login wall when trying to monitor products

Residential Proxies

I used residential proxies to make it seem like traffic was coming from realistic IPs.

Puppeteer Stealth Mode

LLMs suggest this. Something crucial from this plugin is the obscuring of navigator.webdriver, something that identifies Puppeteer/Playwright usage.

User Agent

I configured the browser user agent to Windows: await page.setUserAgent(Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36); despite running on a Linux VPS.

Tips

Create scripts with LLMs to debug things. For example, I needed to create a script to check if Facebook recognized my authentication cookies with the Puppeteer settings we use in the bot
Avoid alerting on obvious scams by filtering out prices that seem too low
Approximating what a human user would do proved to be a good tactic for getting past bot protection on Facebook Marketplace.

Techniques used here to get around bot protection should be applicable to other services.

My Nontraditional Stress Management Routine

Isaac Addis — Mon, 20 Oct 2025 18:22:46 +0000

Introduction

Stress management is crucial to maintaining optimal cognitive performance, which is great to maximize as a programmer. While building my first product, Voyage, I gradually built a stress management routine that works for my 6-7 day workweeks. I refined this routine, thinking mostly in terms of percent reductions on my baseline cortisol levels.

The Routine

HIIT (High-Intensity Interval Training): 20-25% reduction to baseline stress levels (source). Weightlifting in addition to this should also provide an additional reduction to baseline stress levels.
Laying down: this was my own stress reduction idea that I came up with (this study shows that higher self-discipline/perfectionism can lead to physiological problems associated with stress such as burnout). This is the closest study I could find that shows a quantified effect of laying down (~7.6%).
Following Cal Newport's advice: it's difficult to sustain high-performance work for many hours at a time so I work in Deep Work blocks. I intentionally take breaks and go for walks.
Dedicated entertainment time (TV/movies/video games): This study shows an association between having a passive leisure hobby and a 4.1 point reduction (on a scale of 0-100) in stress levels. This was the best data I could find on the topic.
Taking half-days off, a single day off, or days off of coding specifically. Doing this has reset my stress levels when I notice signs of burnout.

Conclusion

This was a summary of the most important things I do to manage my stress levels. I look to optimize baseline stress levels rather than accumulate high stress and reactively try to fix the stress. This has helped me prevent negative effects of burnout – bad sleep, loss of focus, and low motivation – and maximize my productivity.

Edit (Oct 23, 2025): Added reference to a Frontiers in Psychiatry (2022) study showing a 4-point reduction in stress levels among healthcare professionals with passive-solitary leisure activities.

Edit (Oct 25, 2025): Added a link to a study showing that high discipline demands can lead to burnout.

Zero-Downtime AWS Cognito User Pool Migration (User Migration Lambda Trigger)

Isaac Addis — Sat, 04 Oct 2025 12:21:27 +0000

Overview

Using the User Migration Lambda Trigger on a new Cognito user pool enables users to sign-in to a new user pool without having to create a new account or reset their password. The User Migration Lambda runs after failed sign-in attempts and attempts to sign in users against the old user pool during a migration. Following an open-source repository, this blog will guide how to migrate users to a new user pool.

Link to the repository

https://github.com/Collaborne/migrate-cognito-user-pool-lambda

Changes I made to the repository

I made sure the event.response.userAttributes object had keys matching the new user pool's signup attributes (with the same exact spelling).
I added ["custom:<attribute name>"] to the event.response.userAttributes response to add custom attributes to a user in the new user pool.

Free Mapbox SSO Configuration with Auth0

Isaac Addis — Mon, 15 Sep 2025 15:49:28 +0000

I was in search of a free way to let people access our Mapbox account without giving company credentials. From there, I found Mapbox SSO which I configured with Auth0 to enable SSO (single-sign on) access to our company’s Mapbox.

System Overview:

A NextJS application has a link with a redirect_url pointing to Mapbox’s provided single sign-on URL. The link is an href to the Auth0 application which is a login form.
The Auth0 Mapbox SSO Integration provides fields to paste into Mapbox’s SSO configuration page
The Auth0 application references an allowlist for users allowed to sign up using a pre-registration action
On successful sign in, the SAML attribute role is set from user_metadata (this value is set during the pre-user-registration action) to be Admin. According to Mapbox’s SSO configuration page, “Users with the Admin role can read and write to all resources and APIs. They cannot access invoices, nor can they read or write to account settings.”

Required Code

Pre-user registration action (Auth0):

exports.onExecutePreUserRegistration = async (event, api) => {
  // Define your allowlist of emails
  const allowlist = [
    (List of allowed emails)
  ];

  // Check if the user's email is in the allowlist
  if (!event.user.email || !allowlist.includes(event.user.email)) {
    // If the email is not in the allowlist, deny access
    const msg = 'Access denied: Your email is not in the allowlist.'
    api.access.deny(msg, msg);
  }
  api.user.setUserMetadata("role", "admin")
};

Post-registration action (Auth0):

exports.onExecutePostLogin = async (event, api) => {
  const role = event.user.user_metadata["role"]
  api.samlResponse.setAttribute("role", role)
};

Link from the NextJS app:

  <a href="<domain name from the Mapbox application>/authorize?response_type=code&client_id=<client id from the Mapbox application>redirect_uri=<Mapbox-provided Single Sign-on URL>">
    Click here to redirect to SSO for MapBox
  </a>

Note: In the "Application URIs" section of the Mapbox application settings, I set these two values:

Application Login URI: NextJS application URL containing the redirect tag
Allowed Callback URLs: Mapbox-provided Single Sign-on URL

Using React Native Components in a Next.js Web App (via @expo/next-adapter)

Isaac Addis — Sat, 06 Sep 2025 14:26:03 +0000

Using React Native Components in a Next.js Web App (via @expo/next-adapter)

This post documents how I imported a React Native component library into a Next.js pages‑router app and rendered it on the web using React Native Web, @expo/next-adapter, and Babel. This configuration is a viable option for preventing duplicate code across a mobile + NextJS app codebase.

Caveat: Our team at Voyage Travel Technologies PLC eventually decided on removing this. Using React Native components with NextJS resulted in the following problems for us:

slower build times
build errors needed to be suppressed for next build to work
the web application was significantly slower in production

Tech Stack

Next.js 15 (pages router) + React 19
React Native Web
Tailwind CSS v4 + NativeWind v4
@expo/next-adapter
react-native-css-interop
Babel via .babelrc (Next disables SWC when a custom Babel config is present)
Shared RN components (e.g., @isaacaddis/private-rn-library), RN primitives (@rn-primitives/*)

Key ideas

Tailwind v4 uses a new import model: in globals.css use @import "tailwindcss"; (not v3’s @tailwind base; ...).
RN components don’t understand className without CSS interop. Map the primitives you actually render.
Many third‑party triggers/buttons are Pressable under the hood — interop it specifically.
Add all RN and shared packages to transpilePackages or you’ll hit syntax/runtime errors.
Set important: "html" so Tailwind wins over other stylesheets.
NativeWind works in the pages router and "use client" routes; RSC support is in progress.

Integrating the React Native library

Install the library and its peer deps (example uses @isaacaddis/private-rn-library).
Add the library to transpilePackages so Next transpiles it for the browser.
Add the library path to Tailwind content so utility classes used inside it are generated.
Ensure CSS interop covers the primitives the library renders (e.g., View, Text, TouchableOpacity, and especially Pressable for triggers/buttons).

After these steps, components can be imported and used as follows:

import { Card, Dialog, DialogTrigger } from "@isaacaddis/private-rn-library";
import { Text } from "react-native";

export default function Page() {
  return (
    <div className="p-6">
      <Card className="rounded-xl border p-4">
        <Text>Card content</Text>
      </Card>
      <Dialog>
        <DialogTrigger className="bg-blue-600 p-3 rounded">
          <Text className="text-white">Open</Text>
        </DialogTrigger>
      </Dialog>
    </div>
  );
}

next.config.ts

import { withExpo } from "@expo/next-adapter";

/** @type {import('next').NextConfig} */
const nextConfig = withExpo({
  reactStrictMode: true,
  transpilePackages: [
    "react-native",
    "react-native-web",
    "nativewind",
    "react-native-css-interop",
    "@rn-primitives",
    "@isaacaddis/private-rn-library",
    "react-native-reanimated",
  ],
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      "react-native$": "react-native-web",
      "phosphor-react-native": "phosphor-react",
    };
    return config;
  },
});
export default nextConfig;

tsconfig.json (please note the `jsxImportSource` line)

{
  "compilerOptions": {
    "jsxImportSource": "nativewind",
    "jsx": "preserve",
    "moduleResolution": "bundler",
    "strict": true
  },
  "include": ["next-env.d.ts", "nativewind-env.d.ts", "**/*.ts", "**/*.tsx"]
}

.babelrc (Babel config)

{
  "presets": ["next/babel", "@babel/preset-env", "@babel/preset-flow"],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "automatic",
        "importSource": "nativewind"
      }
    ]
  ]
}

nativewind-env.d.ts

/// <reference types="nativewind/types" />

tailwind.config.js (Tailwind v4 + NativeWind)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{ts,tsx,js,jsx}",
    "./components/**/*.{ts,tsx,js,jsx}",
    "./node_modules/@isaacaddis/private-rn-library/**/*.{ts,tsx,js,jsx}",
  ],
  presets: [require("nativewind/preset")],
  important: "html",
  theme: {
    extend: {
      // tokens (colors, sizes, etc.)
    },
  },
  plugins: [],
};

postcss.config.mjs (Tailwind v4)

const config = {
  plugins: ["@tailwindcss/postcss"],
};
export default config;

styles/globals.css (Tailwind v4 import)

@import "tailwindcss";

pages/_app.tsx (CSS interop for RN primitives)

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { cssInterop } from "react-native-css-interop";
import { View, Text, TouchableOpacity, Pressable } from "react-native";

// Map className -> style for primitives actually rendered in your app/libs
cssInterop(View, { className: "style" });
cssInterop(Text, { className: "style" });
cssInterop(TouchableOpacity, { className: "style" });
cssInterop(Pressable, { className: "style" }); // critical for many Trigger components

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Issues and fixes

No background colors rendering
- Cause: Tailwind v3 directives used with Tailwind v4 → CSS never generated.
- Fix: Use @import "tailwindcss"; in globals.css.
Border width shows, but border-red-500 doesn’t
- Cause: Underlying component is Pressable without CSS interop.
- Fix: cssInterop(Pressable, { className: "style" }).
SyntaxError / Unexpected tokens from node_modules
- Cause: Untranspiled RN/shared packages.
- Fix: Add them to transpilePackages and ensure the library ships browser‑compatible JS.
Styles present but overridden
- Fix: Add important: "html" to Tailwind config to increase specificity.

Conclusion

Using @expo/next-adapter with React Native Web, Tailwind v4, NativeWind, react-native-css-interop, and Babel allows for importing a React Native library inside a Next.js web app without duplicating UI code. The required steps are: transpile React Native and the library, use Tailwind v4’s @import CSS, include the library paths in Tailwind content, and map React Native primitives (including Pressable) with CSS interop so className resolves to styles.

Edit (Oct 25, 2025): Added a caveat to the introduction.

Edit (Nov 8, 2025): Updated the caveat for accuracy.

(EAS Custom Builds, Maestro Cloud) Expo + Maestro CI Pipeline Overviews

Isaac Addis — Sat, 06 Sep 2025 06:39:56 +0000

Pipeline overview

Push to main triggers a GitHub Action workflow
The workflow installs dependencies, installs EAS CLI, then runs an EAS build with a build-and-maestro-test profile
Artifacts and logs are uploaded for debugging.

Note: I led the creation of our mobile app CI pipeline.

EAS Custom Builds vs Maestro Cloud (cost-driven choice)

I implemented both EAS‑based and Maestro Cloud pipelines and validated they work

We run on EAS Build because it's significantly cheaper. As of Aug 24, 2025: EAS Starter Plan starts at $19/month; Maestro Cloud is about $212.50/month

EAS Custom Builds Configuration

Here is our build-and-maestro-test configuration (eas.json):

"build-and-maestro-test": {
    "withoutCredentials": true,
    "config": "build-and-maestro-test.yml",
    "android": {
    "buildType": "apk",
    "image": "latest"
    },
    "ios": {
    "simulator": true,
    "image": "latest"
    },
    "channel": "build-and-maestro-test"
}

Here is the corresponding Github Actions workflow file:

name: EAS Build & Maestro Tests

on:
  push:
    branches:
      - "main"
  pull_request:
    branches:
      - "main"

jobs:
  build_and_test:
    runs-on: ubuntu-latest
    timeout-minutes: 120
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Install Bun
        uses: oven-sh/setup-bun@v1
        with:
          bun-version: latest

      - name: Install dependencies
        run: bun install

      - name: Install EAS CLI
        run: npm install -g eas-cli

      - name: Run EAS Build with Maestro Tests
        run: EXPO_TOKEN=${{ secrets.EXPO_TOKEN }} eas build --platform android --profile build-and-maestro-test --non-interactive

Maestro Cloud Configuration

Here is the Github Actions workflow file for this:

name: EAS Build & Maestro Tests

on:
  push:
    branches:
      - "**"

jobs:
  build_and_test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Install Bun
        uses: oven-sh/setup-bun@v1
        with:
          bun-version: latest

      - name: Install dependencies
        run: bun install

      - name: Install EAS CLI
        run: npm install -g eas-cli

      - name: Fetch Latest EAS Build Artifact
        run: |
          # Export Expo token for authentication
          export EXPO_TOKEN=${{ secrets.EXPO_TOKEN }}
          # Get latest build URL
          BUILDS_JSON=$(eas build:list --platform android --profile production --status finished --json --non-interactive)
          # Validate JSON response
          if [[ -z "$BUILDS_JSON" || "$BUILDS_JSON" == "[]" ]]; then
            echo "No completed builds found!"
            exit 1
          fi
          # Extract the build URL
          BUILD_URL=$(echo "$BUILDS_JSON" | jq -r '.[0].artifacts.buildUrl')
          # Ensure a valid URL was extracted
          if [[ -z "$BUILD_URL" || "$BUILD_URL" == "null" ]]; then
            echo "No valid build URL found!"
            exit 1
          fi
          echo "Downloading APK from $BUILD_URL"
          # Download the APK using Expo authentication
          curl -L -o app-release.apk $BUILD_URL
          echo "APK downloaded to app-release.apk"
          ls -la

      - name: Install Maestro CLI
        run: |
          curl -Ls "https://get.maestro.mobile.dev" | bash
          echo "$HOME/.maestro/bin" >> $GITHUB_PATH

      - name: Run Maestro Cloud Tests on APK
        uses: mobile-dev-inc/action-maestro-cloud@v1.9.6
        with:
          api-key: ${{ secrets.MAESTRO_API_KEY }}
          project-id: ${{ secrets.PROJECT_ID }}
          app-file: app-release.apk
          workspace: maestro
          android-api-level: 33
          env: |
            MAESTRO_TEST_EMAIL=${{ secrets.MAESTRO_TEST_EMAIL }}
            MAESTRO_TEST_PASSWORD=${{ secrets.MAESTRO_TEST_PASSWORD }}

Tips and tricks from our experience

These tests can be flaky:

Add short delays before interacting with components in dialogs
Use pixel coordinates when IDs aren't reliable
Use runScript for dynamic data
I tested locally on a Pixel 5 emulator (API 33)

DEV Community: Isaac Addis

A Complete Beginner's Guide to Item-Item Recommendations with Matrix Factorization and BPR

Problem

The Matrix Factorization + BPR Algorithm

Intuition

Common Issues and their Fixes

Performance and Tuning

Working Expo + pnpm Workspaces Configuration

Working Expo + pnpm Workspaces Configuration

Prerequisite Knowledge

Overview of our pnpm Workspaces Configuration

Errors I Encountered and Fixes

Error: Invalid hook call

Error: Missing transitive dependencies

Error: Missing non-transitive dependency

Conclusion

Complete metro.config.js File

Building an LLM-powered Facebook Marketplace Bot

System Overview

Technical Challenges + Solutions

Captcha Harvesting

Proxy Rotation

Residential Proxies

Puppeteer Stealth Mode

User Agent

Tips

My Nontraditional Stress Management Routine

Introduction

The Routine

Conclusion

Zero-Downtime AWS Cognito User Pool Migration (User Migration Lambda Trigger)

Overview

Link to the repository

Changes I made to the repository

Free Mapbox SSO Configuration with Auth0

Required Code

Using React Native Components in a Next.js Web App (via @expo/next-adapter)

Using React Native Components in a Next.js Web App (via @expo/next-adapter)

Tech Stack

Key ideas

Integrating the React Native library

next.config.ts

tsconfig.json (please note the jsxImportSource line)

.babelrc (Babel config)

nativewind-env.d.ts

tailwind.config.js (Tailwind v4 + NativeWind)

postcss.config.mjs (Tailwind v4)

styles/globals.css (Tailwind v4 import)

pages/_app.tsx (CSS interop for RN primitives)

Issues and fixes

Conclusion

(EAS Custom Builds, Maestro Cloud) Expo + Maestro CI Pipeline Overviews

Pipeline overview

EAS Custom Builds vs Maestro Cloud (cost-driven choice)

EAS Custom Builds Configuration

Maestro Cloud Configuration

Tips and tricks from our experience

Error: `Invalid hook call`

tsconfig.json (please note the `jsxImportSource` line)