7Mountains · IvanIhnatsiuk · Dec 21, 2025 · Dec 18, 2025 · Dec 19, 2025 · Dec 19, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -53,6 +53,37 @@ jobs:
       - name: Build package
         run: yarn prepare
 
+  build-web:
+    runs-on: ubuntu-latest
+    env:
+      TURBO_CACHE_DIR: .turbo/web
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Cache turborepo for Web
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.TURBO_CACHE_DIR }}
+          key: ${{ runner.os }}-turborepo-web-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-turborepo-web-
+
+      - name: Check turborepo cache for Web
+        run: |
+          TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:web --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:web').cache.status")
+
+          if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then
+            echo "turbo_cache_hit=1" >> $GITHUB_ENV
+          fi
+
+      - name: Build example for Web
+        run: |
+          yarn turbo run build:web --cache-dir="${{ env.TURBO_CACHE_DIR }}"
+
   build-android:
     runs-on: ubuntu-latest
     env:

diff --git a/apps/example-web/README.md b/apps/example-web/README.md
@@ -0,0 +1,60 @@
+# React Native Enriched Web Example
+
+This is a [**Vite**](https://vite.dev) + [**React**](https://react.dev) web example for the React Native Enriched text input component, bootstrapped with Vite's React template.
+
+# Getting Started
+
+## Step 1: Install dependencies
+
+From the root of the monorepo, install all workspace dependencies:
+
+```sh
+yarn install
+```
+
+## Step 2: Start the development server
+
+Run the following command from the root of the monorepo or from the `apps/example-web` directory:
+
+```sh
+# From root - using Turbo
+yarn example-web dev
+
+# OR directly in this workspace
+yarn dev
+```
+
+The app should now be running at `http://localhost:5173`.
+
+## Step 3: Modify your app
+
+Now that you have the development server running, let's make changes!
+
+Open `src/App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes.
+
+## Build for production
+
+To create an optimized production build:
+
+```sh
+yarn build:web
+```
+
+The built files will be in the `dist/` directory.
+
+## Preview the production build
+
+To preview the production build locally:
+
+```sh
+yarn preview
+```
+
+# Learn More
+
+To learn more about the tools and technologies used:
+
+- [Vite Documentation](https://vite.dev) - Learn more about Vite
+- [React Documentation](https://react.dev) - Learn more about React
+- [TypeScript Documentation](https://www.typescriptlang.org) - Learn more about TypeScript
+- [Turbo Documentation](https://turbo.build) - Learn more about Turbo monorepo management
diff --git a/apps/example-web/eslint.config.mjs b/apps/example-web/eslint.config.mjs
@@ -0,0 +1,32 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import reactX from 'eslint-plugin-react-x';
+import reactDom from 'eslint-plugin-react-dom';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.strictTypeChecked,
+      tseslint.configs.stylisticTypeChecked,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+      reactX.configs['recommended-typescript'],
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);
diff --git a/apps/example-web/index.html b/apps/example-web/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>React Native Enriched Web Example</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/apps/example-web/package.json b/apps/example-web/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "react-native-enriched-web-example",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build:web": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react-dom": "^2.3.13",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-x": "^2.3.13",
+    "globals": "^16.5.0",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}
diff --git a/apps/example-web/src/App.css b/apps/example-web/src/App.css
@@ -0,0 +1,5 @@
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
diff --git a/apps/example-web/src/App.tsx b/apps/example-web/src/App.tsx
@@ -0,0 +1,12 @@
+import './App.css';
+
+function App() {
+  return (
+    <div className="container">
+      <div>Text input</div>
+      <input type="text" placeholder="Type something..." />
+    </div>
+  );
+}
+
+export default App;
diff --git a/apps/example-web/src/index.css b/apps/example-web/src/index.css
@@ -0,0 +1,11 @@
+:root {
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}
diff --git a/apps/example-web/src/main.tsx b/apps/example-web/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) throw new Error('Root element "#root" not found');
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/apps/example-web/tsconfig.app.json b/apps/example-web/tsconfig.app.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+  },
+  "include": ["src"]
+}
diff --git a/apps/example-web/tsconfig.json b/apps/example-web/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/apps/example-web/tsconfig.node.json b/apps/example-web/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "lib": ["ES2023"],
+    "types": ["node"],
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/apps/example-web/vite.config.ts b/apps/example-web/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -33,9 +33,6 @@ export default defineConfig([
     },
   },
   {
-    ignores: [
-      'node_modules/',
-      'lib/'
-    ],
+    ignores: ['node_modules/', 'lib/', 'apps/example-web/dist/'],
   },
 ]);