Tailwind (React, Firebase) Rules

Here are some best practices and rules to follow for creating a high-quality, mobile-first web app with excellent UI/UX using Tailwind, React, and Firebase:

Mobile-First Design:
Always design and implement for mobile screens first, then scale up to larger screens.
Use Tailwind's responsive prefixes (sm:, md:, lg:, xl:) to adjust layouts for different screen sizes.

Consistent Design System:
Create a design system with consistent colors, typography, spacing, and component styles.
Utilize Tailwind's configuration file (tailwind.config.js) to define your custom design tokens.

Performance Optimization:
Use React.lazy() and Suspense for code-splitting and lazy-loading components.
Implement virtualization for long lists using libraries like react-window.
Optimize images and use next/image for automatic image optimization in Next.js.

Responsive Typography:
Use Tailwind's text utilities with responsive prefixes to adjust font sizes across different screens.
Consider using a fluid typography system for seamless scaling.

Accessibility:
Ensure proper color contrast ratios using Tailwind's text-* and bg-* classes.
Use semantic HTML elements and ARIA attributes where necessary.
Implement keyboard navigation support.

Touch-Friendly UI:
Make interactive elements (buttons, links) at least 44x44 pixels for easy tapping.
Implement touch gestures for common actions (swipe, pinch-to-zoom) where appropriate.

USE THE IMAGES IN THE MOCKUPS FOLDER AS EXAMPLE OF HOW TO STYLE THE APP AND CREATE THE LAYOUT

WHEN CREATING A FILE DON'T CONFLICT IT WITH .TSX AND .JSX FILES

Firebase Best Practices:
Implement proper security rules in Firebase.
Use Firebase SDK's offline persistence for better performance and offline support.
Optimize queries to minimize read/write operations.

Error Handling and Feedback:
Implement proper error boundaries in React.
Provide clear feedback for user actions (loading states, success/error messages).