OpenRSS Web Frontend

Publisher onboarding dashboard for OpenRSS, implementing the Universal Publishing Protocol (UPP).

Features

• Patreon OAuth Integration: One-click connection to sync content
• Multiple Payment Options: Stripe Connect, PayPal, Google Pay
• Tier Configuration: Map source tiers to OpenRSS pricing
• Real-time Status: Track sync progress and webhook status

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Patreon Developer Account
• Stripe Account (for payments)

Setup

1. Clone the repository:

   cd openrss-web

2. Install dependencies:

   npm install

3. Copy environment file:

   cp .env.example .env.local

4. Configure environment variables (see below)

5. Run development server:

   npm run dev

6. Open http://localhost:3000/onboarding

Environment Variables

Required

Variable	Description
NEXT_PUBLIC_API_URL	OpenRSS backend API URL
NEXT_PUBLIC_PATREON_CLIENT_ID	Patreon OAuth Client ID
NEXT_PUBLIC_PATREON_REDIRECT_URI	Patreon OAuth redirect URI
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY	Stripe publishable key
NEXT_PUBLIC_STRIPE_CONNECT_CLIENT_ID	Stripe Connect client ID

Optional

Variable	Description
NEXT_PUBLIC_PAYPAL_CLIENT_ID	PayPal client ID
NEXT_PUBLIC_GOOGLE_MERCHANT_ID	Google Pay merchant ID

Patreon OAuth Setup

1. Go to Patreon Developer Portal
2. Create a new client
3. Set redirect URI to http://localhost:3000/onboarding/callback/patreon
4. Copy Client ID to .env.local
5. Request the following scopes:
   • identity
   • campaigns
   • campaigns.posts

Stripe Connect Setup

1. Go to Stripe Dashboard
2. Enable Stripe Connect for your platform
3. Set redirect URI to http://localhost:3000/onboarding/callback/stripe
4. Copy the Connect Client ID to .env.local

Project Structure

src/
├── app/
│   ├── layout.tsx           # Root layout
│   ├── globals.css          # Global styles
│   └── onboarding/
│       ├── page.tsx         # Main onboarding page
│       └── callback/
│           ├── patreon/     # Patreon OAuth callback
│           └── stripe/      # Stripe Connect callback
├── components/
│   ├── ui/                  # Reusable UI components
│   │   ├── Button.tsx
│   │   └── Card.tsx
│   └── onboarding/          # Onboarding step components
│       ├── StepIndicator.tsx
│       ├── ConnectSourceStep.tsx
│       ├── ConfigureTiersStep.tsx
│       ├── PaymentSetupStep.tsx
│       └── CompleteStep.tsx
├── context/
│   └── OnboardingContext.tsx  # Onboarding state management
└── lib/
    ├── api.ts               # API client
    └── config.ts            # Configuration

Onboarding Flow

1. Connect Source - Publisher connects Patreon via OAuth
2. Configure Tiers - Map Patreon tiers to OpenRSS pricing
3. Payment Setup - Connect Stripe, PayPal, or Google Pay
4. Complete - Publication is live and syncing

API Integration

The frontend communicates with the OpenRSS backend API:

Endpoint	Method	Description
/onboarding/session	POST	Create new onboarding session
/onboarding/patreon/callback	POST	Exchange Patreon OAuth code
/onboarding/session/:id/tiers	POST	Save tier configuration
/onboarding/payment/stripe/callback	POST	Exchange Stripe Connect code
/onboarding/session/:id/complete	POST	Complete onboarding

Development

# Run development server
npm run dev

# Build for production
npm run build

# Run production build
npm start

# Lint code
npm run lint

License

MIT