Secure Backend Proxy for React App (2–8 hrs)

Project overview AlpenFinanz is a React-based financial wellness app for English-speaking expats in Switzerland (health insurance, pensions, taxes, mortgages). It’s currently a single-file client-side prototype, feature-complete for beta, but blocked from public launch by one critical issue: the Anthropic API key is exposed in client-side code. I need this fixed before I can open the app to real users. The problem The app currently calls the Anthropic API directly from the browser, which means the API key is visible to anyone who opens dev tools. This needs to move server-side. Scope of work 1. Convert project structure • Current: single .jsx file with client-side state (localStorage), no build tooling. • Convert to a Vite or Next.js project (either is fine — your call based on what pairs best with the hosting choice below). • Preserve all existing functionality and localStorage-based state; this is a structural conversion, not a rewrite of app logic. 2. Build a backend proxy for the AI calls • Implement a Vercel Edge Function or Cloudflare Worker (your recommendation) that: • Holds the Anthropic API key as a server-side environment variable (never shipped to the client). • Accepts requests from the frontend, forwards them to the Anthropic API, and returns the response. • Replaces all direct client-side Anthropic API calls currently in the app (used for an AI Coach chat feature and AI-driven insurance recommendations). 3. Add rate limiting • IP-based rate limiting on the proxy endpoint to prevent abuse/cost overruns if the endpoint is discovered or scraped. • Reasonable default (e.g., X requests per IP per hour) — happy to discuss specifics, open to your recommendation. 4. Deploy • Deploy to Vercel or Netlify (your recommendation) with environment variables configured securely. • Confirm the API key is not present anywhere in client-side bundles or source maps in production build. What I’ll provide • The existing single-file JSX source. • Any context needed on which components make Anthropic API calls. • Model string in use (will confirm exact model at handoff). Deliverables • Working deployed app (or deployment-ready project + clear deploy instructions) with the proxy in place. • Confirmation/proof that the API key is not exposed client-side (e.g., screenshot of network tab / built bundle showing no key). • Brief written summary of what was changed and how the proxy is configured, so I can maintain it going forward. • Rate limiting configuration documented (limits used, how to adjust). Not in scope • No changes to app features, UI, or business logic beyond what’s needed for the proxy conversion. • No user authentication or database work (separate future phase). • No design changes. Timeline & budget • Estimated effort: 2–8 hours.