## 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).