update readmes

Author: chrisjtang

README.md

@@ -18,13 +18,21 @@ This monorepo contains:
 - **Environment variables** for secure key management
 - **Comprehensive tests** using Vitest
 
-### Frontend (`packages/frontend-vanilla/`)
+### Frontend - Vanilla JavaScript (`packages/frontend-vanilla/`)
 - **Vanilla JavaScript** demo application
 - **jQuery integration** for AJAX calls
 - **Environment detection** (localhost vs production)
 - **Live Disqus integration** with login/logout functionality
 - **Responsive design** that works on mobile and desktop
 
+### Frontend - React (`packages/frontend-react/`)
+- **React 18** with modern hooks and functional components
+- **Vite** for fast development and optimized builds
+- **Axios** for HTTP requests to the SSO backend
+- **disqus-react** package for seamless Disqus integration
+- **ESLint** configuration for code quality
+- **Modern ES6+** syntax and module system
+
 ## 🛠️ Key Features
 
 - **🔐 Secure Authentication**: HMAC-SHA1 signed payloads for Disqus SSO
@@ -48,11 +56,19 @@ sso-demo/
 │   │   │   └── sso.test.js     # Test suite
 │   │   ├── wrangler.toml       # Cloudflare Workers config
 │   │   └── package.json
-│   └── frontend-vanilla/        # Vanilla JS frontend
-│       ├── index.html          # Main demo page
+│   ├── frontend-vanilla/        # Vanilla JS frontend
+│   │   ├── index.html          # Vanilla JS demo page
+│   │   └── package.json
+│   └── frontend-react/          # React frontend
 │       ├── src/
-│       │   └── disqus-sso.js   # SSO client library
+│       │   ├── App.jsx         # Main React component
+│       │   ├── components/
+│       │   │   └── DisqusSSO.jsx # SSO integration component
+│       │   └── main.jsx        # React entry point
+│       ├── vite.config.js      # Vite configuration
+│       ├── eslint.config.js    # ESLint configuration
 │       └── package.json
+├── index.html                   # Landing page for demos
 ├── .github/
 │   └── workflows/
 │       ├── deploy.yml          # Backend deployment
@@ -89,13 +105,17 @@ nano packages/backend/.dev.vars
 # Start backend (Cloudflare Workers)
 yarn dev
 
-# In another terminal, serve frontend
+# In another terminal, serve vanilla frontend
 yarn dev:vanilla
+
+# Or serve React frontend
+yarn dev:react
 ```
 
 ### 4. Test Locally
 - Backend API: `http://localhost:8787`
-- Frontend Demo: `http://localhost:3000` (or open `packages/frontend-vanilla/index.html`)
+- Vanilla Frontend: `http://localhost:3000` (or open `packages/frontend-vanilla/index.html`)
+- React Frontend: `http://localhost:3001`
 
 ## 📡 API Endpoints
 
@@ -147,10 +167,15 @@ ALLOWED_ORIGINS=https://yourdomain.com,http://localhost:3000
 ```
 
 ### Frontend Configuration
-The frontend automatically detects the environment:
+Both frontends automatically detect the environment:
 - **Development**: Uses `http://localhost:8787`
 - **Production**: Uses `https://sso-serverless.ctang-402.workers.dev`
 
+**React-specific configuration:**
+- Vite build configuration in `vite.config.js`
+- Base path set to `/sso-demo/react/` for GitHub Pages deployment
+- ESLint rules for React development
+
 ## 🚢 Deployment
 
 ### Backend (Cloudflare Workers)
@@ -167,7 +192,10 @@ Automatically deployed via GitHub Actions when you push to `main`:
    ```
 
 ### Frontend (GitHub Pages)
-Automatically deployed when frontend files change:
+Automatically deployed when frontend files change. Both vanilla and React frontends are deployed to:
+- **Landing page**: `https://disqus.github.io/sso-demo/`
+- **Vanilla demo**: `https://disqus.github.io/sso-demo/vanilla/`
+- **React demo**: `https://disqus.github.io/sso-demo/react/`
 
 1. Enable GitHub Pages in repository settings:
    - Go to Settings → Pages
@@ -191,6 +219,19 @@ yarn workspace @disqus-sso/backend test
 yarn workspace @disqus-sso/backend test --watch
 ```
 
+## 🏗️ Building
+
+```bash
+# Build React frontend for production
+yarn build:react
+
+# Build both frontends for GitHub Pages
+yarn build:pages
+
+# Build all workspaces
+yarn build
+```
+
 ## 🔒 Security
 
 - **HMAC-SHA1 Signatures**: All SSO payloads are cryptographically signed

packages/backend/README.md

@@ -41,17 +41,37 @@ yarn dev
 
 Your serverless function will be available at `http://localhost:8787`
 
+**Production URL:** `https://sso-serverless.ctang-402.workers.dev/`
+
 ### 4. Test the API
 
-**Health Check:**
+**Health Check (Local):**
 ```bash
 curl http://localhost:8787/health
 ```
 
-**Generate SSO Token:**
+**Health Check (Production):**
+```bash
+curl https://sso-serverless.ctang-402.workers.dev/health
+```
+
+**Generate SSO Token (Local):**
 ```bash
-curl -X POST http://localhost:8787/sso \\
-  -H "Content-Type: application/json" \\
+curl -X POST http://localhost:8787/sso \
+  -H "Content-Type: application/json" \
+  -d '{
+    "user": {
+      "username": "john_doe",
+      "id": "12345",
+      "email": "[email protected]"
+    }
+  }'
+```
+
+**Generate SSO Token (Production):**
+```bash
+curl -X POST https://sso-serverless.ctang-402.workers.dev/sso \
+  -H "Content-Type: application/json" \
   -d '{
     "user": {
       "username": "john_doe",
@@ -113,6 +133,8 @@ yarn test
 
 ## Deployment
 
+The backend is deployed to: **`https://sso-serverless.ctang-402.workers.dev/`**
+
 ### 1. Install Wrangler CLI
 
 ```bash

packages/frontend-react/README.md

@@ -5,8 +5,9 @@ A React implementation of the Disqus SSO demo using Vite as the build tool.
 ## Features
 
 - **React Components**: Modern React with hooks for state management
+- **Official Disqus Integration**: Uses the official `disqus-react` package for seamless Disqus embedding
 - **Environment Detection**: Automatically uses localhost for development and production URL for deployment
-- **Fetch API**: Uses modern fetch API instead of jQuery
+- **Axios HTTP Client**: Modern HTTP client for API requests instead of jQuery
 - **Responsive Design**: Works well on desktop and mobile devices
 - **Real-time SSO Testing**: Login/logout functionality with live Disqus integration
 - **Better Error Handling**: Comprehensive error states and loading indicators
@@ -39,12 +40,29 @@ The build output will be in the `dist/` directory.
 
 ## How It Works
 
-1. **Login Button**: Calls your backend API with test user data using fetch API
+1. **Login Button**: Calls your backend API with test user data using Axios
 2. **Environment Detection**: Uses localhost in development, production URL when deployed
-3. **SSO Integration**: Passes the SSO payload to Disqus for authentication
-4. **Logout Button**: Clears the current user and resets Disqus
+3. **SSO Integration**: Passes the SSO payload to Disqus for authentication via the `DiscussionEmbed` component
+4. **Logout Button**: Clears the current user and resets Disqus using the `window.DISQUS.reset()` API
 5. **State Management**: Uses React hooks for managing loading states and debug information
 
+## Disqus Integration
+
+This implementation uses the **official `disqus-react` package** which provides:
+
+- **`DiscussionEmbed` Component**: Renders the Disqus comment thread with proper React lifecycle management
+- **Automatic Script Loading**: Handles loading and cleanup of Disqus scripts
+- **SSO Configuration**: Supports Disqus SSO configuration through component props
+- **React-Friendly**: Properly integrates with React's virtual DOM and component lifecycle
+
+### Key Advantages of `disqus-react`:
+
+- ✅ **Official Support**: Maintained by Disqus team
+- ✅ **React Optimized**: Designed specifically for React applications
+- ✅ **Better Performance**: Handles script loading and cleanup automatically
+- ✅ **Type Safety**: Includes TypeScript definitions
+- ✅ **SSO Ready**: Built-in support for Single Sign-On configuration
+
 ## API Integration
 
 The frontend communicates with your Cloudflare Workers backend:
@@ -55,10 +73,20 @@ The frontend communicates with your Cloudflare Workers backend:
 ## Component Structure
 
 - `App.jsx`: Main application component
-- `components/DisqusSSO.jsx`: Main SSO component with login/logout functionality
+- `components/DisqusSSO.jsx`: Main SSO component with login/logout functionality and `DiscussionEmbed` integration
 - `index.css`: Styling that matches the vanilla JS version
 - `main.jsx`: React application entry point
 
+### DisqusSSO Component Details
+
+The main component (`DisqusSSO.jsx`) demonstrates:
+
+- **State Management**: Uses `useState` for login status and debug information
+- **SSO Integration**: Configures the `DiscussionEmbed` component with SSO settings
+- **API Calls**: Makes POST requests to the backend using Axios
+- **Disqus Reset**: Uses `window.DISQUS.reset()` for logout functionality
+- **Error Handling**: Graceful error states and user feedback
+
 ## Deployment
 
 This can be deployed to GitHub Pages alongside the vanilla JS version by:
@@ -72,7 +100,9 @@ The React version would be available at: `https://[username].github.io/sso-serve
 ## Development Notes
 
 - Uses modern React patterns with functional components and hooks
+- Leverages the **official `disqus-react` package** for better integration than manual script loading
 - Implements proper cleanup in useEffect to prevent memory leaks
 - Handles loading states and errors gracefully
 - Maintains the same visual styling as the vanilla JS version
 - Uses Vite for fast development and optimized production builds
+- Axios replaces jQuery for cleaner, Promise-based HTTP requests