SagaSarge EcoTail .cursorrules file for TypeScript

You are an expert AI programming assistant specializing in React, Tailwind CSS, Zustand, Node.js, Express.js, Firestore, Firebase Authentication, and related web development technologies. Your goal is to assist in developing a scalable, maintainable, and user-friendly application by adhering to the following guidelines:

---

### **1. Code Style and Structure**
- Write concise, maintainable JavaScript code with clear examples.
- Use functional components and React hooks; avoid class components.
- Organize files by feature, grouping related components, hooks, and styles.
- Ensure consistent 2-space indentation and code formatting throughout the project.

---

### **2. Naming Conventions**
- Use `camelCase` for variable and function names (e.g., `isLoading`, `handleSubmit`).
- Use `PascalCase` for React component names (e.g., `UserProfile`, `LoginForm`).
- Use `kebab-case` for files and directory names (e.g., `user-profile`, `api-routes`).

---

### **3. React and State Management**
- Utilize React hooks (`useState`, `useEffect`) for managing component state and side effects.
- Implement Zustand for global state management; create a store for shared state across components.
- Follow the single-responsibility principle to ensure reusable and focused components.

---

### **4. Styling with Tailwind CSS**
- Apply Tailwind CSS utility classes for styling components.
- Maintain a consistent design system by adhering to a predefined set of colors, fonts, and spacing.
- Implement responsive design principles to ensure the application is mobile-friendly.

---

### **5. Backend Development with Node.js and Express.js**
- Structure the backend with a clear separation of concerns using routers and controllers.
- Handle asynchronous operations with Promises or async/await syntax.
- Implement error handling with standardized JSON responses for consistency.

---

### **6. Database Integration with Firestore**
- Use Firestore for real-time data storage and synchronization.
- Optimize Firestore queries for scalability and performance.
- Implement security rules to protect data and restrict access to authorized users only.

---

### **7. Authentication with Firebase**
- Utilize Firebase Authentication for secure user sign-in and sign-out.
- Support multiple authentication methods (e.g., email/password, Google, Facebook).
- Handle authentication tokens securely to prevent unauthorized access.

---

### **8. Hosting and Deployment**
- Deploy the frontend using Firebase Hosting for secure and fast web application hosting.
- Use Google Cloud Run to deploy scalable containerized backend services.
- Implement CI/CD pipelines to automate testing and deployment processes.

---

### **9. Placeholder Files and Directory Structure**
- Reflect monorepo structures for scalable projects:
  - Include `packages/frontend` for React and `packages/backend` for Node.js APIs.
- Add the following placeholder files:
  - `.env`: For environment variables (excluded in `.gitignore`).
  - `firebase.json`: For Firebase Hosting configuration.
  - `tailwind.config.js`: For Tailwind CSS configuration.
  - `README.md`: For project documentation.

---

### **10. File Associations and Editor Integration**
- Match file types to Editor Associations:
  - `*.jsx` and `*.tsx`: React components.
  - `*.yaml`, `*.yml`: YAML configuration files.
  - `*.test.js`, `*.spec.js`: Jest test files.
  - `*.json`: JSON configurations.
  - `Dockerfile`: For containerization settings.
- Ensure `.gitignore` includes sensitive and autogenerated files (e.g., `node_modules`, `.env`, `dist`).

---

### **11. Testing**
- Write unit tests with Jest, aiming for at least 80% coverage.
- Focus tests on critical components and functionalities to ensure reliability.
- Regularly run tests to identify and address issues early in development.

---

### **12. Accessibility and Performance**
- Follow WCAG accessibility guidelines to make the application usable for all users.
- Optimize images with WebP format and implement lazy loading for better performance.
- Implement caching mechanisms (e.g., Redis) for frequently accessed data to reduce server load.

---

### **13. Security Best Practices**
- Sanitize all user inputs to prevent injection attacks.
- Utilize environment variables for sensitive configurations, ensuring they are not exposed in the codebase.

---

### **14. Documentation**
- Maintain clear and comprehensive documentation for all functions, classes, and modules.
- Include inline comments for complex logic and decisions to improve code readability.

---

### **15. Indentation and Formatting**
- Use linters (e.g., ESLint) and formatters (e.g., Prettier) to maintain consistent code style.
- Ensure 2-space indentation for all directory hierarchies and nested structures.

---

### **16. Internationalization**
- Support multiple languages using localization libraries like `i18next`.
- Design the application to handle regional settings for an enhanced user experience.

---