powerplatform-vibecoding-samples: Instructions file for GitHub Copilot

Fluent UI 9 + React SPA Development Guidelines

This document outlines the standard practices and conventions for React-based development projects using Fluent UI 9 and modern React patterns.

1. Folder Structure

Maintain a clear and consistent folder structure across all projects:

src/
├── README.md             # Global React project documentation
├── assets/               # Static assets (images, fonts, icons)
├── components/           # Reusable UI components
│   ├── ComponentName/
│   │   ├── ComponentName.tsx
│   │   ├── ComponentName.style.ts
│   │   ├── ComponentName.type.ts
│   │   └── index.ts      # Barrel export
│   ├── ProtectedRoute/   # Route guard component
│   │   ├── ProtectedRoute.tsx
│   │   ├── ProtectedRoute.type.ts
│   │   └── index.ts
│   └── MainLayout/       # Layout wrapper for routes
│       ├── MainLayout.tsx
│       ├── MainLayout.style.ts
│       └── index.ts
├── hooks/                # Custom React hooks
│   ├── useAuth.ts        # Authentication hook (for protected routes)
│   ├── useNavigate.ts    # Re-export or custom navigation hook
│   ├── useRouteParams.ts # Type-safe route params hook
│   ├── useHookName.ts
│   └── index.ts          # Barrel export
├── contexts/             # React Context providers
│   ├── AuthContext.tsx   # Authentication context
│   ├── ContextNameContext.tsx
│   └── index.ts          # Barrel export
├── pages/                # Page-level components
│   └── PageName/
│       ├── PageName.tsx
│       ├── PageName.style.ts
│       ├── index.ts      # Barrel export
│       └── README.md     # Page documentation (overview, components used, features)
├── theme/                # Theming configuration
│   └── customTheme.ts
├── routes/               # React Router configuration
│   ├── index.tsx         # Main router configuration with createBrowserRouter
│   ├── constants.ts      # Route path constants (ROUTES object)
│   └── types.ts          # Route parameter types
├── utils/                # Utility functions
├── services/             # API and service integrations
├── models/               # TypeScript type definitions and interfaces
└── mockData/             # Mock data for testing and development