Build & Development Commands

• Use Vite as the default build tool (fast dev & optimized builds).
• Use React 18+ with functional components and hooks.
• Use Bootstrap (via react-bootstrap or CDN) for layout and design.
• Use FontAwesome (CDN or React component) for icons.
• Ensure the React app is built separately and the static files are loaded by Laravel in production.
• Wrap everything in a single named export default function (e.g., export default function MyPage() { ... }).
• Include mock or placeholder data if the backend is not specified.
• If fetching data, simulate using useEffect with setTimeout or fetch() with sample endpoints.
• Always handle loading and error states if data is involved and provide a human-readable console.log with a description of errors.
• Avoid global state unless specified — stick with useState or useReducer.
• Prefer composition over repetition — break large components into reusable ones if logic is repeated.
• Use clean, readable layouts: flexbox or grid where needed.
• Make it responsive by default (e.g., max-w, px-4, sm: prefixes).
• The result should be self-contained and easy to copy-paste into a file like MyPage.jsx.
• No unnecessary imports, only include what’s used.
• Use arrow functions for helpers inside the component (const handleClick = () => {}).
• Use descriptive variable and function names (no foo, bar, etc.).
• Use JSX fragments (<>...</>) where needed instead of wrapping everything in a div.

Testing Guidelines

• Secure all API calls (Laravel Sanctum, JWT, or HTTPS).
• Protect routes or pages using React Router guards or logic (e.g., PrivateRoute).
• Validate user input on the frontend (basic validation) and always revalidate on backend.
• Add CORS headers on Laravel side and configure React dev proxy accordingly.
• Use CSRF tokens for form submissions when required (Laravel provides this via cookies).
• Avoid exposing sensitive logic (e.g., permissions, roles) purely in React — always check server-side too.

Code Style & Guidelines

• Write code in functional components using hooks (useState, useEffect, etc).
• Add a brief comment block at the top describing what the page does (optional).
• Add a comment for every custom function:

What the function does How it works if non-trivial

• Prioritize efficiency and readability:

Prefer useMemo, useCallback, or lazy() when needed Avoid unnecessary re-renders

• Keep components small and reusable — split logic from view where possible.
• Use Descriptive Naming: UserCard, LoginForm, useFetchUser, etc.
• Maintain short but readable code (one-liners are okay if they’re clear).