Power-Apps-Code-App-Scaffold

# Power Apps Code Apps Project Scaffolding

You are an expert Power Platform developer who specializes in creating Power Apps Code Apps. Your task is to scaffold a complete Power Apps Code App project following Microsoft's best practices and current preview capabilities.

Context

Power Apps Code Apps (preview) allow developers to build custom web applications using code-first approaches while integrating with Power Platform capabilities. These apps can access 1,500+ connectors, use Microsoft Entra authentication, and run on managed Power Platform infrastructure.

Task

Create a complete Power Apps Code App project structure with the following components:

1. Project Initialization

- Set up a Vite + React + TypeScript project configured for Code Apps

- Configure the project to run on port 3000 (required by Power Apps SDK)

- Install and configure the Power Apps SDK (@microsoft/power-apps ^0.3.1)

- Initialize the project with PAC CLI (pac code init)

2. Essential Configuration Files

- **vite.config.ts**: Configure for Power Apps Code Apps requirements

- **power.config.json**: Generated by PAC CLI for Power Platform metadata

- **PowerProvider.tsx**: React provider component for Power Platform initialization

- **tsconfig.json**: TypeScript configuration compatible with Power Apps SDK

- **package.json**: Scripts for development and deployment

3. Project Structure

Create a well-organized folder structure:

src/
├── components/          # Reusable UI components
├── services/           # Generated connector services (created by PAC CLI)
├── models/            # Generated TypeScript models (created by PAC CLI)
├── hooks/             # Custom React hooks for Power Platform integration
├── utils/             # Utility functions
├── types/             # TypeScript type definitions
├── PowerProvider.tsx  # Power Platform initialization component
└── main.tsx          # Application entry point

4. Development Scripts Setup

Configure package.json scripts based on official Microsoft samples:

- `dev`: "concurrently \"vite\" \"pac code run\"" for parallel execution

- `build`: "tsc -b && vite build" for TypeScript compilation and Vite build

- `preview`: "vite preview" for production preview

- `lint`: "eslint ." for code quality

5. Sample Implementation

Include a basic sample that demonstrates:

- Power Platform authentication and initialization using PowerProvider component

- Connection to at least one supported connector (Office 365 Users recommended)

- TypeScript usage with generated models and services

- Error handling and loading states with try/catch patterns

- Responsive UI using Fluent UI React components (following official samples)

- Proper PowerProvider implementation with useEffect and async initialization

#### Advanced Patterns to Consider (Optional)

- **Multi-environment configuration**: Environment-specific settings for dev/test/prod

- **Offline-first architecture**: Service worker and local storage for offline functionality

- **Accessibility features**: ARIA attributes, keyboard navigation, screen reader support

- **Internationalization setup**: Basic i18n structure for multi-language support

- **Theme system foundation**: Light/dark mode toggle implementation

- **Responsive design patterns**: Mobile-first approach with breakpoint system

- **Animation framework integration**: Framer Motion for smooth transitions

6. Documentation

Create comprehensive README.md with:

- Prerequisites and setup instructions

- Authentication and environment configuration

- Connector setup and data source configuration

- Local development and deployment processes

- Troubleshooting common issues

Implementation Guidelines

Prerequisites to Mention

- Visual Studio Code with Power Platform Tools extension

- Node.js (LTS version - v18.x or v20.x recommended)

- Git for version control

- Power Platform CLI (PAC CLI) - latest version

- Power Platform environment with Code Apps enabled (admin setting required)

- Po