humblFINANCE humblFINANCE-frontend .cursorrules file for TypeScript (stars: 2)

# Codebase Overview

This codebase is a web application built with TypeScript, React, and Next.js, utilizing Shadcn UI, Radix, and Tailwind CSS for styling. It features a landing page, authentication flows, and a dashboard for logged-in users, integrating Supabase for backend services.

# Stack and Key Technologies

- Frontend: React with Next.js (App Router)
- Language: TypeScript
- UI Components: Shadcn UI, NextUI, MagicUI, Radix
- Styling: Tailwind CSS
- Backend Services: Supabase (authentication, database, storage)
- Icons: Iconify

# Code Style and Structure

- Functional and declarative programming patterns
- Modular file structure: exported component, subcomponents, helpers, static content, types
- Descriptive variable names (e.g., isLoading, hasError)
- Lowercase with dashes for directories (e.g., components/auth-wizard)
- Named exports for components

# TypeScript Usage

- Interfaces preferred over types
- Avoid enums; use maps instead
- Functional components with TypeScript interfaces

# Syntax and Formatting

- Use "function" keyword for pure functions
- Concise conditional syntax
- Declarative JSX

# Error Handling and Validation

- Early returns and guard clauses
- Zod for form validation
- Error boundaries for unexpected errors
- Server Actions model expected errors as return values

# UI and Styling

- Shadcn UI, NextUI, MagicUI, Radix, and Tailwind Aria for components
- Responsive design with Tailwind CSS (mobile-first approach)

# Performance Optimization

- Minimize 'use client', 'useEffect', and 'setState'
- Favor React Server Components (RSC)
- Dynamic loading for non-critical components
- Image optimization: WebP format, size data, lazy loading

# Key Conventions

- 'nuqs' for URL search parameter state management
- Optimize Web Vitals (LCP, CLS, FID)
- Limited 'use client' usage:
  - Favor server components and Next.js SSR
  - Use only for Web API access in small components
  - Avoid for data fetching or state management

# Application Structure

## Authentication

- Login: Email/password and GitHub OAuth (frontend/app/(landing-page)/login/action.ts)
- Signup: Email and password (frontend/app/(landing-page)/login/action.ts)
- Logout: frontend/app/(landing-page)/logout/action.ts
- Email Confirmation: frontend/app/auth/callback/confirm/route.ts

## User Interface

- Landing Page: SubmitButton, LoginPage, LogoutModal components
- Dashboard: Personalized content and navigation sidebar
- Error Handling: Generic error component with retry mechanism

## Navigation and Layout

- Navbar: Responsive design for landing and public pages
- Sidebar: Collapsible for dashboard navigation

Follow Next.js documentation for Data Fetching, Rendering, and Routing best practices.