React, TypeScript, TailwindCSS, daisyUI, + Go, PostgreSQL

Core Framework & Structure

• Project Type: Standard React application (e.g., created with Vite or similar, NOT Next.js).
• Frontend Core: React with TypeScript.
  • Create components as functional components using modern React Hooks.
  • TypeScript files should use .tsx for components with JSX, and .ts for other TypeScript logic.
  • Frontend source code resides in the ./frontend/ directory.
• Frontend Routing: React Router (v6/v7).
  • Define routes clearly using React Router components (e.g., <BrowserRouter>, <Routes>, <Route>).
  • Implement protected routes for authenticated users.
• Backend Core: Go (Golang) with the Fiber web framework (preferred, Gin acceptable if specified).
  • Backend source code resides in the ./backend/ directory.
  • The main entry point for the backend server is ./backend/cmd/server/main.go.
  • Structure Go code logically (e.g., internal/handlers, internal/models, internal/services, internal/middleware, pkg/utils, internal/config, internal/database).
• Database: PostgreSQL.

Styling & UI Components (Frontend)

• Styling: Tailwind CSS is the primary styling solution. Apply utility classes directly.
• UI Component Library: daisyUI (as a Tailwind CSS plugin).
  • Use daisyUI components and their classes directly. Do not create abstract wrapper components around basic daisyUI elements unless for highly complex, reusable composite UI patterns not achievable with direct daisyUI classes. Focus on using classes like btn, card, input, modal, table, etc.
  • Assume daisyUI is configured and its classes are available.

Data Fetching & State Management (Frontend)

• Frontend Data Fetching (Server State): SWR (stale-while-revalidate) with Axios.
  • Use the useSWR hook for data fetching.
  • Configure SWR to use Axios as its fetcher function.
  • Implement proper SWR key management.
  • For mutations (POST, PUT, DELETE), use Axios directly, and then use SWR's mutate function to revalidate related data.
• HTTP Client: Axios for all API communication (both within SWR fetchers and for standalone mutation requests).
• Form Handling: TanStack Forms.
  • Utilize hooks and components from @tanstack/react-form.
  • Manage form state, validation, and submission.
• Validation: Zod.
  • Define Zod schemas for data validation (forms, API request/response DTOs).
  • Integrate Zod with TanStack Forms.
• Global Client State Management: Zustand.
  • Define Zustand stores with clear state and actions for managing global client-side UI state or other complex client states not directly tied to server data.

Database & Backend Logic

• Database ORM (Backend): GORM for Go.
  • Define GORM models for database entities in the ./backend/internal/models directory.
  • Write GORM queries for database interactions within service or handler layers.
• API Design (Backend): RESTful APIs.
  • Clearly define request (DTOs) and response structures (using Go structs) for API endpoints.
• Authentication (Backend): JWT-based.
  • Implement JWT generation on login and validation via middleware in the Go backend.

Code Formatting & Naming Conventions

• Code Style (General): Follow the AirBnB JavaScript Style Guide (with appropriate adaptations for TypeScript/React). For Go, follow idiomatic Go style (e.g., gofmt/goimports).
  • Prioritize readability and consistency.
• React File Naming: Use PascalCase for React component files (e.g., ClientIntakeForm.tsx, not client-intake-form.tsx).
• React Component Exports: Use named exports for React components.

  // Correct:
  export function MyComponent() { /* ... */ }
  

• Go File Naming: Use snake_case.go for Go files (e.g., user_model.go, auth_handler.go).
• TypeScript File Extensions: Use .tsx for files containing JSX, and .ts for plain TypeScript files.

Critical Project Constraints (REMINDER)

• Strictly Local Deployment: NO Docker, NO Kubernetes, NO Cloud Services. System runs on agency's local servers. Manual setup and operation procedures are expected.
• Security is Paramount: Implement RBAC, data encryption (in transit and at rest for PII/PHI), comprehensive audit logging, secure password handling (bcrypt), protection against common web vulnerabilities (OWASP Top 10), and adherence to HIPAA privacy and security principles.
• Modular Architecture: Design both frontend and backend with clear separation of concerns and well-defined APIs to allow for future, independent module development.

Development Process & LLM Interaction

• Focus: DO NOT PROVIDE PROJECT SETUP INSTRUCTIONS. Assume the React and Go projects, Tailwind, daisyUI, GORM, PostgreSQL connection, SWR/Axios setup, etc., are already configured or that setup instructions will be handled separately.
• Action: Jump directly to writing components, functions, API endpoints, GORM models, Zod schemas, Zustand stores, SWR hooks, etc., as requested for the features.
• File Paths: When generating code, be mindful of the ./frontend and ./backend directory structure.
• Imports: Include all necessary imports for the code you generate.
• Completeness: Provide complete, runnable (or near-runnable within its context) code snippets.
• TypeScript (Frontend): All frontend code should be written in TypeScript using strong typing.
• Go (Backend): All backend code should be idiomatic Go.
• Documentation Continuously update README.md when new features and Functions are implemented
• Planning For complex tasks that require multiple steps, first update PLAN.md then references PLAN.md as the task is being developed
• Current Task Tracking for the current task should be kept in TASK.md
• Progress Keep track of all progress in the PROGRESS.md file. You should only add to or modify this file. You must not delete anything from it.
• API Tracking All API names, purposes, and functions should be explained in the APIs.md file