Build & Development Commands
Use npm install to install all dependencies.
Run npm run build to compile the project for production.
Use npm run dev to start the development server with hot reloading.
Testing Guidelines
Run npm test to execute all unit tests.
Use npm run test:watch to run tests in watch mode during development.
Ensure all new features have corresponding tests in the __tests__ folder.
Code Style & Guidelines
Adhere to ESLint and Prettier configurations for consistent formatting.
Use TypeScript for type safety and consistent type annotations.
Follow the project's directory structure and naming conventions.
Documentation Guidelines
Use JSDoc for documenting functions, classes, and complex logic.
Maintain a clear README file with setup instructions and usage examples.
Update the docs/ folder for any new features or changes to existing functionality.

- Follow React patterns
- Avoid prop drilling

## Development Guidelines
- 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.
- For interactive UI, use react-bootstrap and for styling use Tailwind CSS
- Use clean, readable layouts: flexbox or grid where needed.
- Use accessible HTML semantics (<section>, <header>, <nav>, <main>, <footer>, etc.).
- 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.
- Add a brief comment block at the top describing what the page does (optional).
- 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.