Mission Relay

A premium creator/community platform where fans earn engagement points by completing missions, get featured on a community wall, and unlock access to exclusive live circles.

Built with Expo (React Native), FastAPI, and MongoDB.

---

Screenshots

---

Architecture

┌─────────────────────────────────────────────────────────────┐
│                        Expo (React Native)                   │
│                                                              │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │  Auth Flow    │  │  Tab Nav     │  │  Modals      │      │
│  │  welcome      │  │  Hub         │  │  review      │      │
│  │  register     │  │  Missions    │  │  settings    │      │
│  │  verify       │  │  Wall        │  │  mission/:id │      │
│  │              │  │  Circles     │  │              │      │
│  │              │  │  Profile     │  │              │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
│                                                              │
│  AuthContext (JWT + SecureStore) → UserContext (role-based)   │
│  Reanimated · SVG · Haptics · Urbanist Typography            │
└──────────────────────────────────────────────────────────────┘
                            │ HTTPS
                            ▼
┌──────────────────────────────────────────────────────────────┐
│                     FastAPI Backend                           │
│                                                              │
│  Auth          Content             Creator                   │
│  ─────         ─────────           ────────                  │
│  register      GET /missions       GET /creator/:id/dash     │
│  request-otp   GET /wall           POST /missions            │
│  verify-otp    GET /circles        PATCH /submissions/:id    │
│  refresh       GET /stats/:id      GET /submissions/pending  │
│  me            POST /submissions                             │
│  logout                                                      │
│                                                              │
│  JWT (access + refresh w/ rotation) · OTP · Invite Codes     │
└──────────────────────────────────────────────────────────────┘
                            │
                            ▼
┌──────────────────────────────────────────────────────────────┐
│                        MongoDB                               │
│  users · missions · submissions · wall_posts                 │
│  circles · circle_participants · points_events               │
│  refresh_tokens                                              │
└──────────────────────────────────────────────────────────────┘

---

Design Decisions

Auth: Passwordless OTP

No passwords. Users authenticate with a 6-digit OTP sent to email. In demo mode, the code is displayed on-screen in a teal banner. JWT access tokens (60min) + refresh tokens (30 days) with automatic rotation.

Roles: Creator vs Fan

Role is chosen at registration and is permanent. Creators get an auto-generated invite code they can share. Fans can enter a creator's invite code during signup to establish the relationship.

Typography

Urbanist (display) — geometric sans-serif, slightly condensed, contemporary museum aesthetic. Plus Jakarta Sans (UI) — clean workhorse for body text. JetBrains Mono (data) — monospace for numbers and stats.

Animation

SignalField — custom generative SVG orbital composition using react-native-svg + requestAnimationFrame. Sparse nodes orbit on mathematical rings with connecting lines and breathing effects. Background for the Welcome and Hub screens.

---

Quick Start

Demo Accounts

Role	Email	Invite Code
Creator	[email protected]	NEON01
Fan	[email protected]	—

1. Open the app → Sign In → enter demo email
2. Tap Send Code → OTP appears in teal banner
3. Enter the 6 digits → you're in

Reset Demo Data

Settings → Reset Demo Data, or:

curl -X POST https://YOUR_URL/api/seed

---

Tech Stack

Layer	Tech	Purpose
Mobile	Expo / React Native	Cross-platform app
Routing	Expo Router	File-based navigation
Animation	Reanimated 3	Spring physics, layout transitions
Graphics	react-native-svg	Generative SignalField background
Haptics	expo-haptics	Tactile micro-interactions
Tokens	expo-secure-store	JWT storage (native)
Backend	FastAPI	Async Python API
Database	MongoDB (Motor)	Document store
Auth	PyJWT + bcrypt	Token management

---

Project Structure

├── frontend/
│   ├── app/
│   │   ├── (auth)/           # Auth flow (welcome, register, verify)
│   │   ├── (tabs)/           # Main 5-tab layout
│   │   │   ├── index.tsx     # Hub (Fan + Creator views)
│   │   │   ├── missions.tsx  # Mission browser
│   │   │   ├── wall.tsx      # Community wall
│   │   │   ├── circles.tsx   # Live circles
│   │   │   └── profile.tsx   # User profile
│   │   ├── mission/[id].tsx  # Mission detail + submission
│   │   ├── review.tsx        # Creator submission review
│   │   └── settings.tsx      # Account settings + logout
│   └── src/
│       ├── components/       # MRText, MRCard, GlowButton, SignalField...
│       ├── context/          # AuthContext, UserContext
│       ├── api/client.ts     # HTTP client with JWT injection
│       └── theme/tokens.ts   # Design tokens (colors, spacing, fonts)
├── backend/
│   ├── server.py             # FastAPI app (auth + content + admin)
│   └── test_api.py           # API test suite
└── docs/
    └── screenshots/          # App screenshots for README

---

API Reference

Auth

Method	Endpoint	Body	Returns
POST	/api/auth/register	{email, display_name, role, invite_code?}	{simulated_otp}
POST	/api/auth/request-otp	{email}	{simulated_otp}
POST	/api/auth/verify-otp	{email, otp}	{access_token, refresh_token, user}
POST	/api/auth/refresh	{refresh_token}	{access_token, refresh_token, user}
GET	/api/auth/me	Bearer token	User object
POST	/api/auth/logout	{refresh_token}	{message}

Content

Method	Endpoint	Description
GET	/api/missions	List all missions
GET	/api/wall	Community wall posts
GET	/api/circles	Live circles
GET	/api/users/:id	User profile
GET	/api/stats/:id	User engagement stats
POST	/api/missions	Create mission (creator only)
POST	/api/missions/:id/submit	Submit entry (fan only)

Admin

Method	Endpoint	Description
GET	/api/creator/:id/dashboard	Creator dashboard data
GET	/api/submissions/pending	Pending submissions
PATCH	/api/submissions/:id/approve	Approve submission
PATCH	/api/submissions/:id/reject	Reject submission
POST	/api/seed	Reset demo data