---
description: Rules for working with the React project in the /frontend folder
globs: fastapi_react_app/frontend/**/*
alwaysApply: false
---
This project should use the modern, concise, and best practices for building React 18+ with TypeScript

# Primary Libraries

See [package.json](mdc:fastapi_react_app/frontend/package.json) for the specific libraries and versions you should use!
When making recommendations, make sure you are referencing the correct verions! Double check your work.

- Mantine (the latest version, >= v.7) for the UI
- Tailwind CSS (the latest version, >= v.4) for styling if you can't do this with Mantine (always prefer Mantine)
- TanStack Router
- TanStack Query
- Zustand, 
- react-hook-form
- Zod
- automatic generation of typescript types for my OpenAPI compatible fastAPI backend in `../backend.py`

# Rules

- Use TypeScript for all code. Prefer interfaces over types. Avoid enums, use const objects or maps.
- Use recommended practices routing with TanStack Router
- Prefer using just Mantine for the UI but also apply tailwind CSS as needed.
- Implement responsive, mobile-first design with Mantine.
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Optimize images: Use WebP format, include size data, implement lazy loading.
- Use Zustand for state management.
- Use Zod for form validation and input schema definition.
- Use fetch API, Axios, or TanStack Query (React Query) for data fetching where appropriate
- Implement error boundaries using error.tsx and global-error.tsx files.
- Ensure all components meet WCAG 2.1 AA standards.
- Use Prettier for consistent code formatting.