Developer Guidelines

Quick Start Tech Stack Project Structure Brand & Design SDK Overview Privacy Rules Publishing

Quick Start

# Install CLI
npm i -g @proappstore/cli

# Create app (scaffolds + provisions database + deploys data worker)
pas create my-app

# Develop locally
cd my-app && pnpm dev

# Deploy (push to main = auto-deploy)
git push origin main

Your app is live at my-app.proappstore.online within minutes. The CLI creates a React + Vite + Tailwind project with the SDK pre-configured.

Tech Stack

Layer	Choice	Version
Language	TypeScript	^5.7
Framework	React	^19.0
Bundler	Vite	^8.0
Styling	Tailwind CSS	^4.2
Hosting	Cloudflare R2	Auto-deploy on push
Backend	@proappstore/sdk	Auth, DB, Storage, Maps, Rooms, Subscription
Package Manager	pnpm	^10.30
Node	-	≥22

Project Structure

Every Pro app uses a pnpm workspace with the frontend in web/.

my-app/
├── package.json           (workspace root)
├── pnpm-workspace.yaml    (packages: [web])
├── CLAUDE.md              (AI agent instructions)
├── .pas.json              (platform config: appId, dataApiBase, d1DatabaseId)
├── .gitignore
└── web/
    ├── index.html
    ├── package.json       (@my-app/web)
    ├── vite.config.ts
    ├── tsconfig.json
    └── src/
        ├── main.tsx
        ├── index.css       (Tailwind + CSS variables)
        ├── App.tsx          (entry: useProGate for auth)
        ├── types.ts
        └── components/

Brand & Design

Colors

Token	Light	Dark	Usage
`--paper`	#ffffff	#000000	Page background
`--ink`	#111111	#f0f0f0	Primary text
`--muted`	#666666	#888888	Secondary text
`--accent`	#7c3aed	#a78bfa	Primary actions, links
`--accent-soft`	#f5f3ff	#1e1533	Accent backgrounds
`--line`	rgba(0,0,0,0.08)	rgba(255,255,255,0.08)	Borders, dividers

Typography

Role	Family	Weights
Body	Manrope	400, 500, 600, 700, 800
Display	Fraunces	500, 600, 700

<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">

Layout

Property	Value
Card border radius	`1.25rem`
Button border radius	`0.75rem`
Card padding	`1.5rem`
Grid gap	`1.25rem`
Max content width	`48rem` (768px)
Dark mode	`prefers-color-scheme: dark` (automatic)

SDK Overview

One import, all platform features. See full docs for API reference.

import { initPro } from '@proappstore/sdk'
import { useProGate } from '@proappstore/sdk/hooks'

const app = initPro({ appId: 'my-app' })

// Available modules:
app.auth        // GitHub OAuth, shared identity
app.db          // Per-app SQL database (query, execute, batch)
app.storage     // File uploads (R2)
app.maps        // Geocoding, embeds (OpenStreetMap)
app.kv          // Per-user key-value storage
app.counters    // Shared atomic counters
app.rooms       // Real-time WebSocket rooms
app.proxy       // Secret-injecting API proxy
app.subscription // Stripe checkout, billing portal
app.license     // Per-app license keys

Hooks (recommended for React)

import { useProAuth } from '@proappstore/sdk/hooks'        // auth state
import { useProSubscription } from '@proappstore/sdk/hooks' // subscription
import { useProGate } from '@proappstore/sdk/hooks'         // combined gate

Privacy Rules

All Pro apps must follow these rules. No exceptions.

No tracking

No analytics, no telemetry, no third-party trackers. No Google Analytics, no Mixpanel, no Amplitude.

No ads

No advertising of any kind. Revenue comes from subscriptions, not user attention.

Minimal data collection

Only collect data the app needs to function. Don't store data "just in case." Users can delete their data at any time.

No external scripts

No third-party JavaScript (analytics, chat widgets, A/B testing). Google Fonts CDN is allowed.

Building and Publishing

How to build

Full step-by-step with terminal commands: Build with AI guide

Short version:

# Install CLI npm install -g @proappstore/cli # Create app (scaffolds + provisions database + deploys data worker) pas create my-app cd my-app # Start AI coding (Claude Code, or use any other tool) claude # Run locally pnpm dev # Deploy git push origin main # Live at https://my-app.proappstore.online

What you get automatically

React + Vite + Tailwind project with platform design system
Per-app SQL database (create any tables you want)
Auth (GitHub sign-in, works across all apps)
File storage (images, documents, videos)
Maps and geocoding
Real-time rooms (chat, presence)
CLAUDE.md pre-configured with skills.md reference
Auto-deploy on push to main via Cloudflare R2

Requirements

TypeScript (no plain JS)
Clean build with zero errors
Uses the platform SDK for auth (no custom auth)
Mobile-responsive (works on 320px+)
Dark mode via prefers-color-scheme
Follows the privacy rules above

Revenue

ProAppStore uses one platform subscription for Pro access. Apps should not add their own checkout, in-app upgrade prompts, or hidden paywalls.

Ready to build?

Full step-by-step with terminal commands, AI tool setup, and SDK cheat sheet.

Build with AI guide | SDK docs | Source on GitHub

Contents