# Make a playable demo of your app

Slop Store runs every app right in the browser. Some apps can't run there: native iPhone or Android apps
(Swift, Kotlin), apps that need your own server, a login, a camera or a watch. For those, make a **demo**: a small
Expo app that shows the **gist** of your app with pretend data. It doesn't have to fully work. It has to make the
idea click in about a minute.

This guide is written for AI coding agents (Claude Code, Cursor, Codex, Windsurf…) and for people who want to know
what their AI will do.

**Copy this to your AI:**

> Make a playable Slop Store demo of this app: follow https://slopapp.store/demo-guide.md, build it as a new Expo
> app next to this project (don't change this project), then publish it with npx slopstore@latest publish --yes.

## The rules

1. **Show the gist.** Pick the 1 to 3 moments that make the app worth trying (the core loop, the "aha"). Build
   those well. Leave the rest out.
2. **Pretend the rest.** Use made-up sample data, scripted replies and simulated people. A tap on "Pay" can show
   a fake success. Nothing has to be saved anywhere real.
3. **No accounts, keys or servers.** No sign-in, no API keys, no calls to your own backend. Start the demo already
   "signed in" with a sample person.
4. **It runs in the browser.** Use things that work on the web: React Native core components, `expo-router`,
   `expo-image`, `react-native-reanimated`, and icons from `@expo/vector-icons` (add it with
   `npx expo install @expo/vector-icons`). Replace phone-only features with stand-ins (table below).
5. **Phone-sized and self-explanatory.** It is shown in a phone frame (about 390 × 844). The first screen says in one
   line what the app does. Fill every screen with sample data so nothing is empty. Mouse clicks and taps both work.
6. **Honest.** Put "Demo" in the tagline (for example "Playable demo of …"). Show one quiet line where it matters:
   "This is a demo. Your partner's replies are simulated." If the real app exists, link it.
7. **Small.** Keep the web build under 10 MB: few, small images (PNG or WebP), and load only the fonts you use, one
   weight at a time (`@expo-google-fonts/nunito/400Regular`, not the whole family).

## Stand-ins for phone-only features

| In the real app | In the demo |
|---|---|
| Push notifications | An in-app banner that slides in |
| Home-screen widgets, Watch, Live Activities | A "widget preview" card on one screen |
| Camera, photo library | A few sample photos to pick from |
| Maps, location | A static map picture or a list with distances |
| Login, accounts, payments | "Continue as guest" and a fake success sheet |
| Partner, friends, multiplayer | A simulated person who reacts after 1–2 seconds |
| AI features (chat, photo analysis) | Canned answers picked by keyword, or preset choices |
| Health, GPS, Bluetooth, sensors | Sample values labelled "simulated" |
| iCloud or server sync | Local state only (it resets on reload, that's fine) |
| Sounds, haptics | A short visual cue instead |

## Steps for the AI agent

1. **Understand the app.** Read the project (README, main screens, models) or the person's description. Write down
   in a few lines: the one-sentence pitch, the core loop, the 3 key screens, and what you will simulate.
2. **Create the demo next to the real app**, never inside it:
   `npx create-expo-app@latest <app-name>-demo --yes`
   (the default template already supports the web). Replace the template's starter screens with your own.
3. **Build the gist** with React Native and `expo-router`. Put sample data in one place (for example `src/data/`,
   plain TypeScript objects). Fake waiting with `setTimeout`. Keep state in React (`useState`, `useReducer`);
   `AsyncStorage` is optional. The web build renders each screen ahead of time, so don't read the clock, random
   numbers or `window` while a screen first draws; do it in `useEffect`.
4. **Copy the look.** Reuse the real app's colors, fonts (if small), icon and key images so the demo feels like the
   app. Use the real app's words for buttons and screens. Convert images to PNG or WebP first (Xcode asset images
   are often HEIC; on a Mac: `sips -s format png in.heic --out out.png`). System icons (SF Symbols, Material) can't
   be copied: pick the closest one from `@expo/vector-icons`.
5. **Check the real web build.** `npx expo export --platform web` must succeed. Serve what it made with
   `npx expo serve dist` and open it at phone size (about 390 × 844): no errors in the console, no empty screens.
   Check this build, not only `npx expo start --web`: some errors only show up in the exported build. Make sure
   there are no keys or secrets anywhere in the code.
6. **Publish.** If the person is with you, show them the demo first. Then run this in the demo folder (add
   `--dry-run` first to see the file list and size without uploading anything):

   ```
   npx slopstore@latest publish --yes --tagline "Playable demo of <app>: <what it does>" --description "<what the app does; what the demo simulates>" --icon <icon file>
   ```

   The icon is a PNG, JPG or WebP up to 256 KB. Add the real app's link if there is one: `--app-store <url>`,
   `--play-store <url>` or `--testflight <url>`.
7. **Tell the person** the Slop Store page link and what the demo leaves out.

## No terminal? (Claude or ChatGPT chat)

If you can't run commands (for example in a Claude or ChatGPT chat with the Slop Store connector), make the demo as
**one HTML file** instead, following the same rules: plain HTML, CSS and JavaScript, sample data inside the file,
phone-sized layout. Publish it with the connector's `publish_app` tool and the `html` field.

## Example

**Real app:** a couples app (native SwiftUI). You tap a mood face on a ring, your partner gets a notification and
a home-screen widget updates. iCloud keeps both phones in sync, and Apple Intelligence draws your character from a
photo.

**Demo (Expo):**

- The first screen reads "Share how you feel with one person." Two cute characters, you and a sample partner.
- Tap a mood on your ring: your character changes, and after 2 seconds the simulated partner answers with a mood
  of their own, shown with an in-app banner ("Sam is Happy").
- A "Your widget" card shows how the home screen would look.
- Character creation offers 4 preset looks instead of photo analysis.
- One quiet line: "This is a demo. Your partner and the widget are simulated."
- Tagline: "Playable demo of XOXO: share your mood with one person." App Store link added.

## Before you publish: checklist

- [ ] The gist is clear within a minute, without instructions from the maker.
- [ ] Every screen has sample data; nothing waits on a server.
- [ ] No sign-in, no keys, no secrets in the code.
- [ ] `npx expo export --platform web` works, the exported build runs without console errors, and it is under 10 MB.
- [ ] Tagline says "Demo"; simulated parts are labelled.
- [ ] Real app link added, if there is one.