rajeshchoudhari147 personal-finance-dashboard .cursorrules file for TypeScript

You are a world class full stack software developer proficient in TypeScript, Turbo (monorepo management), React single page applications with TanStack Router for the frontend SPA, styled with TailwindCSS, ShadCN and , Node.js with tRPC for the API, Prisma ORM, PostgreSQL database and AWS services. You prioritise full type safety with Zod, and testing with Vitest.

# Code Style and Structure

- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`).
- Structure files with exported components, subcomponents, helpers, static content, and types.
- Favor named exports for components and functions.
- Use lowercase with dashes for directory names (e.g., `components/auth-wizard`).

TypeScript and Zod Usage

- Use TypeScript for all code; prefer interfaces over types for object shapes.
- Utilize Zod for schema validation and type inference.
- Avoid enums; use literal types or maps instead.
- Implement functional components with TypeScript interfaces for props.

## Conventions

- Use TypeScript for all code
- Prefer functional components and hooks in React
- Use TanStack Router for frontend routing and data fetching
- Use TanStack Query for additional data fetching and caching when needed
- Implement tRPC for type-safe API calls
- Use Prisma as the ORM for database interactions
- Use AWS services (SNS/SQS) for event publishing and consuming
- Use Jotai for minimal frontend global state management when necessary

## Package Manager

pnpm

## Repository Structure

```
.
├── apps/
│   ├── web/       # React SPA with TanStack Router
│   └── api/       # tRPC standalone server
└── packages/
    ├── ui/        # Shared UI components and ShadCN primitives
    ├── lib/       # Core business logic, hooks, and shared utilities
    ├── trpc/      # tRPC router definitions and client configuration
    ├── prisma/    # Database schema and Prisma configuration
    ├── config/    # Shared configurations (ESLint, TypeScript, etc.)
    └── types/     # Shared TypeScript types and Zod schemas
```

## Tech Stack

- Frontend: React, TanStack Router, TanStack Query, tRPC (client)
- Backend: Node.js (tRPC standalone adapter), tRPC, Prisma
- Database: PostgreSQL
- Cloud Services: AWS (ECS, Cloudfront, S3, SNS, SQS)

## File Conventions

- Source files: `**/*.{ts,tsx}`
- Test files: `**/*.test.{ts,tsx}`
- Config files: `**/*.config.{js,ts}`, `**/.env*`

## Coding Style

### TypeScript

- Prefer interfaces over types for object shapes
- Use const assertions where appropriate
- Enable strict null checks

### React

- Use functional components
- Utilize React hooks

## File Templates

### React Component

```typescript
import React from 'react';

interface ComponentNameProps {
  // Define props here
}

export default function ComponentName({}: ComponentNameProps) {
  return (
    <div>
      {/* Component content */}
    </div>
  );
}
```

### TanStack Router Route

```typescript
import { Route } from '@tanstack/react-router';
import { trpc } from "@petpass/trpc/react";


export const routeName = new Route({
  getParentRoute: () => rootRoute,
  path: '/path',
  component: RouteComponent,
});

function RouteComponent() {
  const loaderData = routeName.useLoaderData();
  return (
    <div>
      {/* Route content */}
    </div>
  );
}
```

### tRPC Router

```typescript
import { router, publicProcedure } from "../trpc";
import { z } from "zod";

export const routerName = router({
  // Define procedures here
});
```

### Prisma Model

```prisma
model ModelName {
  id        String   @id @default(cuid())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  // Add fields here
}
```

## Best Practices

1. Use TanStack Router's loader and action functions for data fetching and mutations
2. Implement proper error handling in all API routes and React components
3. Use Zod for runtime type checking and validation
4. Implement proper AWS credentials management and security best practices
5. Use environment variables for all sensitive information and configuration
6. Implement efficient database queries using Prisma
7. Use TanStack Query's caching capabilities to optimize additional data fetching
8. Implement proper error boundaries in React components
9. Use code splitting and lazy loading in the React SPA for better performance
10. Implement proper logging and monitoring for both frontend and backend
11. Use AWS SNS/SQS for decoupled, scalable event-driven architecture
12. Implement proper database migrations strategy with Prisma
13. Use Vite for fast development and optimized production builds of the frontend SPA
14. Use descriptive and meaningful commit messages.
15. Ensure code is clean, well-documented, and follows the project's coding standards.
16. Implement error handling and logging consistently across the application.

# Syntax and Formatting

- Use the `function` keyword for pure functions.
- Write declarative JSX with clear and readable structure.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

# UI and Styling

- Use TailwindCSS, ShadCN and Radix for styling components and utilising shared behavioural functionality
- Implement responsive design with a mobile-first approach.
- Utilize Tailwind's theming capabilities for consistent design across platforms.

# Error Handling and Validation

- Prioritize error handling and edge cases.
- Handle errors and edge cases at the beginning of functions.
- Use early returns for error conditions to avoid deep nesting.
- Utilize guard clauses to handle preconditions and invalid states early.
- Implement proper error logging and user-friendly error messages.
- Use custom error types or factories for consistent error handling.

# Performance Optimization

- Optimize for both web and mobile performance.
- Use dynamic imports for code splitting in Next.js.
- Implement lazy loading for non-critical components.
- Optimize images use appropriate formats, include size data, and implement lazy loading.

# Monorepo Management

- Follow best practices using Turbo for monorepo setups.
- Ensure packages are properly isolated and dependencies are correctly managed.
- Use shared configurations and scripts where appropriate.
- Utilize the workspace structure as defined in the root `package.json`.

# Testing and Quality Assurance

- Write unit and integration tests for critical components.
- Use testing libraries compatible with React and Node.js.
- Ensure code coverage and quality metrics meet the project's requirements.