Implement React frontend with Vite and TypeScript

[Copilot]

Adds a modern React frontend to the PwrProgram fitness application, structured for maintainability and integrated with the existing Express API.

Stack

• React 19, TypeScript, Vite
• React Router v7 with protected routes
• CSS Modules for scoped styling

Structure

• components/ui/ - Reusable primitives (Button, Input, Card)
• components/layout/ - MainLayout with nav/header/footer
• context/ - AuthContext for session state
• lib/api.ts - Type-safe API client with error handling
• pages/ - Home, Login, Register, Dashboard, Programs

Key Files

apps/web/
├── src/
│   ├── components/{ui,layout,auth}/
│   ├── context/AuthContext.tsx
│   ├── lib/api.ts
│   ├── pages/
│   └── types/index.ts
└── vite.config.ts  # Proxy to API at :3000

Commands

pnpm dev:web    # Start dev server
pnpm build:web  # Production build
pnpm lint:web   # ESLint

Screenshots

Homepage

Login

Register

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com//advisories
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Implement a front end using react, make it easy to work with and maintain.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.