add readmes for cloudflare and sentry

README.cloudflare/README.cloudflare.md

@@ -0,0 +1,71 @@
+1. [Sign up for Cloudflare](https://www.cloudflare.com/) (they have a free tier)
+
+2. Create a Pages app to host the React client. From the Workers & Pages screen, choose "Create".
+   ![](./img/1%20-%20create%20pages.jpg)
+
+3. Select the "Pages" tab and click "Upload assets" from the "Create using direct upload" section.
+   ![](./img/2%20-%20direct%20upload.jpg)
+
+4. Name your app and click "Create". Note: You do not need to upload any assets and click "Deploy". The Wrangler CLI and GitHub actions will take care of that later.
+
+   ![](./img/3a%20-%20name%20project.jpg)
+
+5. Each time you add an app, you will see it appear in your "Workers & Pages" Overview:
+   ![](./img/4%20-%20dashboard.jpg)
+
+6. Add the following variables under "Variables and Secrets" so that the build command can run in the correct environment:
+   | Type | Name | Value |
+   | --- | --- | --- |
+   | Plaintext | NODE_VERSION | 22.9.0 |
+   | Plaintext | PNPM_VERSION | 9 |
+
+7. Create a Workers app to host the prod server. From the Workers & Pages Overview page, click "Create" (like step 2), and then from the "Workers" tab, click "Create Worker".
+   ![](./img/7%20-%20create%20worker.jpg)
+
+8. Name your worker and click "Deploy". Note: Ignore the `worker.js` code, as it will be overwritten by our app when we run our deploy script.
+   ![](./img/8%20-%20name%20worker%20and%20deploy.jpg)
+
+9. Add a KV namespace for your prod server storage. Navigate to Workers & Pages - KV, and click "Create a namespace".
+   ![](./img/9%20-%20create%20namespace.jpg)
+
+10. Enter a name for your prod server kv namespace, and click "Add".
+    ![](./img/10%20-%20add%20namespace.jpg)
+
+11. Repeat steps 7-10 for your stage server and kv storage. Note: It might be useful to use suffix `-stage` in your naming.
+
+12. On the right hand side of the Workers & Pages Overview screen, you can find your Account ID, as well as a link to "Manage API tokens":
+    ![](./img/11%20-%20account%20id.jpg)
+
+13. Create an API token for "Edit Cloudflare Workers", using the provided template.
+    ![](./img/12%20-%20edit%20workers%20token.jpg)
+
+14. Add your Cloudflare API Token and Account ID in [.env](../.env). This will enable the Wrangler CLI to deploy the app locally.
+
+15. Add your Cloudflare API Token and Account ID to your repository secrets in GitHub. This will enable deploy from GitHub actions.
+    ![](./img/13%20-%20gh%20vars.jpg)
+
+16. Configure `ENV` and `getServerUrl` in [client/src/config.ts](../client/src/config.ts). Note: This is just a suggestion, and you may choose another method of determining your app's runtime environment.
+
+17. Update [server/wrangler.toml](../server/wrangler.toml) with your app names and IDs. Eg:
+
+```diff
+[env.stage]
+- name = "todo-rename-stage"
++ name = "my-app-stage"
+workers_dev = true
+- vars = { ALLOWED_HOST = "todo:rename to stage host", ENV = "stage" }
++ vars = { ALLOWED_HOST = "my-app-stage.pages.dev", ENV = "stage" }
+[[env.stage.kv_namespaces]]
+binding = "DB"
+- id = "e0c5eee53ed34ff69c4d8303f818adca"
++ id = "fThh47jB971c4GP452h75cP7jqE499mL"
+```
+
+18. Update the deploy scripts in [client/package.json](../client/package.json) to use your project name. Note: Pages allows a "Preview" branch, for all branches besides main. We use the same app name but provide `--branch "stage"` for our staging branch:
+
+```diff
+-    "deploy:stage": "pnpm wrangler pages deploy ./dist --project-name todo-rename --branch \"stage\"...,
++    "deploy:stage": "pnpm wrangler pages deploy ./dist --project-name my-app --branch \"stage\"...,
+-    "deploy:prod": "pnpm wrangler pages deploy ./dist --project-name todo-rename",
++    "deploy:prod": "pnpm wrangler pages deploy ./dist --project-name my-app",
+```

README.sentry/README.sentry.md

@@ -0,0 +1,32 @@
+1. [Sign up for Sentry](https://sentry.io/welcome/) for free!
+
+2. From the Projects tab, Click "+ Create Project"
+
+![1 create project](./img/1%20create%20project.jpg)
+
+3. Select "React", name your project, and click "Create Project"
+
+![2 create project](./img/2%20create%20project.jpg)
+
+4. Select your new project to enter the project overview page
+
+![3 select project](./img/3%20select%20project.jpg)
+
+5. Click the gear icon in the top right to edit project settings
+
+![4 click settings](./img/4%20click%20settings.jpg)
+
+6. In the "Client Keys (DSN)" tab, copy your DSN.
+
+![5 copy dsn](./img/5%20copy%20dsn.jpg)
+
+7. Paste this into the `SENTRY_DSN` const in [client/src/services/monitor.tsx](../client/src/services/monitor.tsx)
+
+8. Generate an auth token for sourcemap uploads:
+   https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/vite/#configuration
+
+![6 generate token](./img/6%20generate%20token.jpg)
+
+9. Add your `SENTRY_AUTH_TOKEN` in [client/.env](../client/.env)
+
+10. Add your `org` and `project` values to Sentry Vite plugin in [client/vite.config.ts](../client/vite.config.ts)