# Everyone-Can-Use-English Architecture: A Deep Dive into the Cloud-Native Language Learning Platform > Explore the Everyone-Can-Use-English architecture, featuring Cloudflare Workers, a RESTful API, and a React desktop frontend. Understand the cloud-native design of this language learning platform. - Repository: [Zuodao/everyone-can-use-english](https://github.com/ZuodaoTech/everyone-can-use-english) - Tags: architecture - Published: 2026-08-14 --- **The Everyone-Can-Use-English architecture consists of three layers: a Cloudflare Worker edge proxy, a RESTful backend API (VTP), and an Electron/React desktop frontend called "Enjoy" that communicates via a typed TypeScript client.** This open-source project by ZuodaoTech demonstrates modern cloud-native patterns for delivering AI-assisted language learning. The codebase reveals a clean separation between edge routing, API services, and cross-platform UI, all unified under the `1000h.org` domain. Below, we examine each architectural layer with specific file references and implementation details from the [ZuodaoTech/everyone-can-use-english](https://github.com/ZuodaoTech/everyone-can-use-english) repository. --- ## Edge Layer: Cloudflare Worker Proxy The entry point to the Everyone-Can-Use-English platform is a **Cloudflare Worker** that handles all traffic to `1000h.org`. This single worker eliminates the need for separate subdomains by intelligently routing requests to either static assets or dynamic API endpoints. ### Request Routing in [`entry/index.js`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/index.js) The worker script in [[`entry/index.js`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/index.js)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/index.js) implements a simple but effective routing strategy: - **Root path (`/`)** and paths under `/portal-assets` or `/portal-static` → forwarded to the **Portal service** - **All other paths** → forwarded to the **VTP API service** This design keeps the public-facing domain clean while maintaining clear separation between presentation and API concerns. ### Deployment Configuration The [[`entry/wrangler.toml`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/wrangler.toml)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/wrangler.toml) file binds the worker to two Cloudflare services: ```toml name = "1000h-entry" main = "index.js" [[services]] name = "portal" [[services]] name = "vtp" ``` The [`wrangler.toml`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/wrangler.toml) configuration enables zero-downtime deployments and environment-specific routing without code changes. --- ## Backend API Layer: VTP Service While the actual VTP API implementation resides in a separate repository, the Everyone-Can-Use-English codebase includes a comprehensive **TypeScript client** that defines the complete API contract. ### The `Client` Class in [`enjoy/src/api/client.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/api/client.ts) Located at [[`enjoy/src/api/client.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/api/client.ts)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/api/client.ts), the `Client` class is a thin but feature-rich wrapper around **Axios** that provides: - **Automatic case conversion**: snake_case (server) ↔ camelCase (client) - **Authentication header injection** for JWT tokens - **Locale propagation** for internationalized responses - **Request/response logging** for debugging The client exposes typed methods for every domain: users, posts, recordings, transcriptions, courses, LLM chats, and payments. ### Instantiating the Client ```typescript import { Client } from "@/api"; import { WEB_API_URL } from "@/constants"; const client = new Client({ baseUrl: WEB_API_URL, // e.g., https://enjoy.bot/api accessToken: userToken, // JWT from authentication flow locale: "en", logger: console, }); ``` *Source: [[`enjoy/src/renderer/app.tsx`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/app.tsx)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/app.tsx), lines 22-26* ### Example API Call: Fetching User Profile ```typescript async function loadCurrentUser() { const profile = await client.me(); console.log("Logged-in user:", profile); } ``` The `me()` method (line 27 in [[`enjoy/src/api/client.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/api/client.ts)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/api/client.ts)) returns the authenticated user's profile, enabling personalized UI rendering. --- ## Frontend Layer: The Enjoy App **Enjoy** is the user-facing application—a cross-platform desktop app built with **Electron**, **React**, **TypeScript**, and **Vite**. It provides offline capabilities, local data storage, and AI-assisted language learning features. ### Build Pipeline: Electron-Forge + Vite The [[`enjoy/forge.config.js`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/forge.config.js)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/forge.config.js) configures the complete build pipeline: - **Main process bundling** (Node.js/Electron) - **Preload script compilation** (secure bridge scripts) - **Renderer process optimization** (React/Vite) - **Native dependency unpacking** (FFmpeg, Whisper, etc.) - **Code signing** for macOS distribution - **Automated publishing** to GitHub Releases and S3 ### React Application Entry Point [[`enjoy/src/renderer/index.tsx`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/index.tsx)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/index.tsx) mounts the React tree, while [[`enjoy/src/renderer/app.tsx`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/app.tsx)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/app.tsx) composes the application's context providers: ```tsx // Context provider stack in app.tsx {/* IndexedDB for local storage */} {/* LLM configuration */} ``` The root component also initializes **Bugsnag** error reporting when running as a packaged application. ### Key Architectural Patterns | Pattern | Implementation | Purpose | |--------|----------------|---------| | **Context Providers** | Multiple nested React contexts | Centralized state management without external libraries | | **Router** | `react-router-dom` in [[`router.tsx`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/router.tsx)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/router.tsx) | Declarative routing with code splitting | | **Custom Hooks** | [`hooks/*.tsx`](https://github.com/ZuodaoTech/everyone-can-use-english/tree/main/enjoy/src/renderer/hooks) | Encapsulate data fetching and side effects | | **Commands** | [`commands/*.command.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/tree/main/enjoy/src/commands) | AI-assisted operations (translate, summarize, IPA) | | **Electron Bridge** | `window.__ENJOY_APP__` | Secure platform API access | ### Data Fetching with Custom Hooks The [`useRecordings`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/hooks/use-recordings.tsx) hook demonstrates the frontend's data layer pattern: ```tsx import { useRecordings } from "./hooks/use-recordings"; function RecordingsList() { const { recordings, loading, error } = useRecordings(); if (loading) return ; if (error) return {error.message}; return ( ); } ``` This hook internally calls `client.syncRecording()` to fetch user recordings from the VTP API, then manages local state and caching. --- ## AI-Assisted Features: The Command System The Everyone-Can-Use-English architecture includes a **command pattern** for AI-powered operations. Commands in [`enjoy/src/commands/`](https://github.com/ZuodaoTech/everyone-can-use-english/tree/main/enjoy/src/commands) encapsulate complex LLM interactions behind simple function calls. ### Translation Command Example ```typescript import { TranslateCommand } from "@/commands/translate.command"; await TranslateCommand.run({ text: "Hello, world!", targetLanguage: "zh-CN", }); ``` *Source: [[`enjoy/src/commands/translate.command.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/commands/translate.command.ts)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/commands/translate.command.ts)* Available commands include translation, summarization, IPA phonetic conversion, and grammar explanation—all integrated directly into the UI without exposing LLM complexity to components. --- ## Data Flow Architecture The complete request lifecycle in Everyone-Can-Use-English follows this path: ``` ┌─────────────────┐ HTTPS ┌──────────────────┐ HTTP ┌─────────────────┐ │ Electron/React │ ─────────────> │ Cloudflare Worker │ ───────────> │ VTP API │ │ (Enjoy App) │ │ (entry/index.js) │ │ (Cloudflare) │ │ │ <───────────── │ │ <─────────── │ │ └─────────────────┘ Response └──────────────────┘ Response └─────────────────┘ │ │ Calls via Client (Axios) ↓ ┌─────────────────┐ │ IndexedDB │ Local persistence via DbProvider │ (browser) │ └─────────────────┘ ``` **Key characteristics of this flow:** - **Single domain origin** (`1000h.org`) eliminates CORS complexity - **JWT authentication** carried through all API calls via the Client wrapper - **Local-first data** for offline capability and responsive UI - **Edge caching** for static assets, dynamic routing for API calls --- ## Key Files Reference | File | Architectural Role | |------|-------------------| | [[`entry/index.js`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/index.js)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/index.js) | Cloudflare Worker request router | | [[`entry/wrangler.toml`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/wrangler.toml)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/wrangler.toml) | Edge deployment and service bindings | | [[`enjoy/src/api/client.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/api/client.ts)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/api/client.ts) | Typed API client with Axios | | [[`enjoy/src/renderer/app.tsx`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/app.tsx)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/app.tsx) | React root with context composition | | [[`enjoy/forge.config.js`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/forge.config.js)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/forge.config.js) | Electron build and packaging | | [[`enjoy/src/renderer/router.tsx`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/router.tsx)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/router.tsx) | Application routing | | [`enjoy/src/renderer/hooks/`](https://github.com/ZuodaoTech/everyone-can-use-english/tree/main/enjoy/src/renderer/hooks) | Data fetching and state management | | [`enjoy/src/commands/`](https://github.com/ZuodaoTech/everyone-can-use-english/tree/main/enjoy/src/commands) | AI-powered operation implementations | --- ## Summary The Everyone-Can-Use-English architecture demonstrates several modern patterns: - **Cloudflare Workers** as a unified edge layer for routing and deployment simplicity - **Type-safe API contracts** through a comprehensive TypeScript client that bridges frontend and backend - **Electron + React + Vite** for performant cross-platform desktop applications - **Context-based state management** avoiding heavy external dependencies - **Command pattern** for encapsulating AI/LLM operations - **Local-first data** with IndexedDB for offline resilience This three-layer design—edge proxy, RESTful API, and rich frontend—enables rapid iteration on language learning features while maintaining clean boundaries between concerns. --- ## Frequently Asked Questions ### Why does Everyone-Can-Use-English use a Cloudflare Worker for routing? The Cloudflare Worker in [[`entry/index.js`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/index.js)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/index.js) enables a single domain (`1000h.org`) to serve both static portal content and dynamic API responses without separate subdomains. This eliminates CORS preflight requests, simplifies deployment, and provides a clean separation between public assets and authenticated API calls. The worker binds to two underlying services—`portal` for static files and `vtp` for the REST API—configured in [[`wrangler.toml`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/wrangler.toml)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/wrangler.toml). ### How does the Enjoy app handle offline functionality? Offline capability is implemented through the **DbProvider** context and **IndexedDB** for local persistence. Custom hooks like [`useRecordings`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/hooks/use-recordings.tsx) cache API responses locally, allowing users to access previously fetched recordings, transcriptions, and dictionaries without network connectivity. The [[`enjoy/src/renderer/app.tsx`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/app.tsx)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/renderer/app.tsx) initializes this database layer before rendering the main application. ### Where is the actual API implementation located? The backend API (VTP service) implementation resides in a **separate Cloudflare Workers project** not included in this repository. The Everyone-Can-Use-English codebase contains only the **typed client** in [[`enjoy/src/api/client.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/api/client.ts)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/api/client.ts), which defines the complete contract including endpoints, request/response shapes, and authentication requirements. This client-server separation allows the frontend to evolve independently while maintaining type safety across the API boundary. ### What build tools power the Enjoy desktop application? Enjoy uses **Electron-Forge** with **Vite** as configured in [[`enjoy/forge.config.js`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/forge.config.js)](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/forge.config.js). Electron-Forge handles the complete packaging pipeline—bundling main and renderer processes, unpacking native dependencies like FFmpeg, code signing for macOS, and publishing to GitHub Releases. Vite provides fast HMR during development and optimized production builds for the React frontend.