the statusphere demo reworked into a vite/react app in a monorepo
1# Statusphere React
2
3A status sharing application built with React and the AT Protocol.
4
5This is a React implementation of the [example application](https://atproto.com/guides/applications) covering:
6
7- Signin via OAuth
8- Fetch information about users (profiles)
9- Listen to the network firehose for new data
10- Publish data on the user's account using a custom schema
11
12## Structure
13
14- `packages/appview` - Express.js backend that serves API endpoints
15- `packages/client` - React frontend using Vite
16
17## Development
18
19```bash
20# Install dependencies
21pnpm install
22
23pnpm dev
24```
25
26### Additional Commands
27
28```bash
29# Build commands
30pnpm build # Build in correct order: lexicon → client → appview
31pnpm build:lexicon # Build only the lexicon package (type definitions)
32pnpm build:client # Build only the frontend
33pnpm build:appview # Build only the backend
34
35# Start commands
36pnpm start # Start the server (serves API and frontend)
37pnpm start:client # Start frontend development server only
38pnpm start:dev # Start both backend and frontend separately (development only)
39
40# Other utilities
41pnpm typecheck # Run type checking
42pnpm format # Format all code
43```
44
45## Deployment
46
47For production deployment:
48
491. Build all packages in the correct order:
50
51 ```bash
52 pnpm build
53 ```
54
55 This will:
56
57 - Build the lexicon package first (shared type definitions)
58 - Build the frontend (`packages/client`) next
59 - Finally build the backend (`packages/appview`)
60
612. Start the server:
62 ```bash
63 pnpm start
64 ```
65
66The backend server will:
67
68- Serve the API at `/api/*` endpoints
69- Serve the frontend static files from the client's build directory
70- Handle client-side routing by serving index.html for all non-API routes
71
72This simplifies deployment to a single process that handles both the API and serves the frontend assets.
73
74## Environment Variables
75
76Copy the `.env.template` file in the appview to `.env`:
77
78```
79cd packages/appview
80cp .env.template .env
81```
82
83## Requirements
84
85- Node.js 18+
86- pnpm 9+
87
88## License
89
90MIT