Statusphere React

A status sharing application built with React and the AT Protocol.

This is a React implementation of the example application covering:

• Signin via OAuth
• Fetch information about users (profiles)
• Listen to the network firehose for new data
• Publish data on the user's account using a custom schema

Structure

• packages/appview - Express.js backend that serves API endpoints
• packages/client - React frontend using Vite

Development

# Install dependencies
pnpm install

# Run this once, to run codegen from the lexicons
pnpm build:lexicon

pnpm dev

Additional Commands

# Build commands
pnpm build           # Build in correct order: lexicon → client → appview
pnpm build:lexicon   # Build only the lexicon package (type definitions)
pnpm build:client    # Build only the frontend
pnpm build:appview   # Build only the backend

# Start commands
pnpm start           # Start the server (serves API and frontend)
pnpm start:client    # Start frontend development server only
pnpm start:dev       # Start both backend and frontend separately (development only)

# Other utilities
pnpm typecheck       # Run type checking
pnpm format          # Format all code

Deployment

For production deployment:

1. Build all packages in the correct order:

   pnpm build

   This will:

   • Build the lexicon package first (shared type definitions)
   • Build the frontend (packages/client) next
   • Finally build the backend (packages/appview)

2. Start the server:

   pnpm start

The backend server will:

• Serve the API at /xrpc/* and /oauth/* endpoints
• Serve the frontend static files from the client's build directory
• Handle client-side routing by serving index.html for all non-API routes

This simplifies deployment to a single process that handles both the API and serves the frontend assets.

Environment Variables

Copy the .env.template file in the appview to .env:

cd packages/appview
cp .env.template .env

Requirements

• Node.js 18+
• pnpm 9+

License

MIT