# RN Interview Practice

> A free, in-browser tool for practicing React Native coding interview problems: edit App.js in a live code editor, watch it render in a real React Native preview, and get AI-graded feedback on your solution — no signup, no API key required.

RN Interview Practice runs entirely in your browser at https://rnprep.dev/ — no signup or account required to use it. Pick one of the built-in problems (or generate a new one with AI), edit a single `App.js` file in a CodeMirror editor, and watch it render live in a phone-shaped preview panel. The preview is a real, self-hosted sandbox — `@babel/standalone` transpiles the code and `react-native-web` renders the actual React Native components directly in the page's own React tree (not a third-party embed or an iframe) — so behavior matches real React Native. Console output from the running code is captured into an on-screen console panel, and render/runtime errors are caught and shown clearly.

Clicking "Evaluate with AI" sends the current problem and your code to an LLM, which returns a 0-100 score, a one-sentence verdict, a per-requirement met/unmet breakdown with notes, and lists of strengths, issues, and suggestions. Clicking "New problem" asks the same LLM to generate a fresh problem (by difficulty, and an optional topic) with an intentionally minimal starter — a bare screen the candidate has to both build the UI for and wire up the logic for, not just fill in event handlers.

## Built-in problems

- Stepper Counter (Easy) — useState, event handlers, clamping a value
- Todo List (Medium) — FlatList, TextInput, toggling item state
- Tip Calculator (Easy) — derived/computed values from state
- Live Search Filter (Medium) — case-insensitive filtering of a FlatList
- Star Rating (Medium) — interactive tap-to-select UI state

## AI backend — free by default, provider-agnostic

The AI features work out of the box with **no signup and no API key**: the default provider proxies through a Cloudflare Pages Function to Cloudflare Workers AI (`@cf/moonshotai/kimi-k2.7-code`), rate-limited to 10 evaluations/generations per day per visitor to keep it available for everyone. It's noticeably slower than the paid options below (responses can take 20-30+ seconds).

For faster responses, Settings also supports bringing your own API key for **Anthropic (Claude)** or **Google Gemini** — sent directly from your browser to that provider's API, stored only in your browser's localStorage, never through a server of ours.

AI features are built behind a provider-agnostic `AiProvider` interface, so adding another backend is a small, contained change.

## What this is not

This is not a native mobile app and does not require Expo, Xcode, or Android Studio — everything runs in a desktop browser tab. It is not a general-purpose React Native IDE; each problem is scoped to a single `App.js` file and a fixed set of core React Native components (View, Text, ScrollView, FlatList, Pressable, TouchableOpacity, TextInput, Button, Image, Switch, ActivityIndicator, SafeAreaView, StyleSheet) plus the standard React hooks.